Primitives

Foundational CSS building blocks powered by design tokens.

Font size

fontSize

Token type

fontSizes

Tailwind utility

fontSize

Allowed units

px | % | rem | em

Default unit

px

Default token value

0px

Usage

text-sd-{fontSize}

Token type	Tailwind utility	Allowed units	Default unit	Default token value	Usage
fontSizes	fontSize	px \| % \| rem \| em	px	0px	text-sd-{fontSize}

Example

tokens.json

{
  "global": {
    "my-font-size-token": {
      "value": "32",
      "type": "fontSizes"
    }
  },
  "dark": {
    "my-font-size-token": {
      "value": "20",
      "type": "fontSizes"
    }
  }
}

Usage

page.tsx

<p className="text-sd-my-font-size-token">my-font-size-token</p>

Render

my-font-size-token