Skip to main content
TokensIntroduction

Design Tokens

Design tokens are the single source of truth for every visual decision in Latty. They are shipped as four artifacts:

Token categories​

Import​

css​

@import '@latty-ds/tokens/tokens.css';
@import '@latty-ds/tokens/semantic.css'; /* optional semantic layer */

typescript​

import '@latty-ds/tokens/tokens.css'; // CSS vars in browser
import { tokens } from '@latty-ds/tokens'; // JS object

Customization​

Override any token on :root after the import:

@import '@latty-ds/tokens/tokens.css';

:root {
  --lt-border-radius: 2px;
  --lt-typography-fontFamilyPrimary: 'Inter', sans-serif;
}

For runtime theming use the configure() API — see the Theming guide.

Explore​

  • Token categories
  • Import
  • Customization
  • Explore