Primitives

The raw scales. Facts about the world, with no opinion about use: a colour is a colour, a size is a size, and nothing here knows what it is for. That is the other half of the line, and it is kept in Semantics.

Primitives

Name and value, both read from the CSS. No hand-kept meaning: a primitive's value is its meaning.

Colour — Neutral
token swatch value
--color-black #000000
--color-white #ffffff
--color-neutral-50 oklch(98.5% 0 0)
--color-neutral-100 oklch(97% 0 0)
--color-neutral-200 oklch(92.2% 0 0)
--color-neutral-300 oklch(87% 0 0)
--color-neutral-400 oklch(70.8% 0 0)
--color-neutral-500 oklch(55.6% 0 0)
--color-neutral-600 oklch(43.9% 0 0)
--color-neutral-700 oklch(37.1% 0 0)
--color-neutral-800 oklch(26.9% 0 0)
--color-neutral-900 oklch(20.5% 0 0)
--color-neutral-950 oklch(14.5% 0 0)

Colour — Blue
token swatch value
--color-blue-50 oklch(97% 0.014 254.604)
--color-blue-100 oklch(93.2% 0.032 255.585)
--color-blue-200 oklch(88.2% 0.059 254.128)
--color-blue-300 oklch(80.9% 0.105 251.813)
--color-blue-400 oklch(70.7% 0.165 254.624)
--color-blue-500 oklch(62.3% 0.214 259.815)
--color-blue-600 oklch(54.6% 0.245 262.881)
--color-blue-700 oklch(48.8% 0.243 264.376)
--color-blue-800 oklch(42.4% 0.199 265.638)
--color-blue-900 oklch(37.9% 0.146 265.522)
--color-blue-950 oklch(28.2% 0.091 267.935)

Colour — Green
token swatch value
--color-green-50 oklch(98.2% 0.018 155.826)
--color-green-100 oklch(96.2% 0.044 156.743)
--color-green-200 oklch(92.5% 0.084 155.995)
--color-green-300 oklch(87.1% 0.15 154.449)
--color-green-400 oklch(79.2% 0.209 151.711)
--color-green-500 oklch(72.3% 0.219 149.579)
--color-green-600 oklch(62.7% 0.194 149.214)
--color-green-700 oklch(52.7% 0.154 150.069)
--color-green-800 oklch(44.8% 0.119 151.328)
--color-green-900 oklch(39.3% 0.095 152.535)
--color-green-950 oklch(26.6% 0.065 152.934)

Colour — Amber
token swatch value
--color-amber-50 oklch(98.7% 0.022 95.277)
--color-amber-100 oklch(96.2% 0.059 95.617)
--color-amber-200 oklch(92.4% 0.12 95.746)
--color-amber-300 oklch(87.9% 0.169 91.605)
--color-amber-400 oklch(82.8% 0.189 84.429)
--color-amber-500 oklch(76.9% 0.188 70.08)
--color-amber-600 oklch(66.6% 0.179 58.318)
--color-amber-700 oklch(55.5% 0.163 48.998)
--color-amber-800 oklch(47.3% 0.137 46.201)
--color-amber-900 oklch(41.4% 0.112 45.904)
--color-amber-950 oklch(27.9% 0.077 45.635)

Colour — Red
token swatch value
--color-red-50 oklch(97.1% 0.013 17.38)
--color-red-100 oklch(93.6% 0.032 17.717)
--color-red-200 oklch(88.5% 0.062 18.334)
--color-red-300 oklch(80.8% 0.114 19.571)
--color-red-400 oklch(70.4% 0.191 22.216)
--color-red-500 oklch(63.7% 0.237 25.331)
--color-red-600 oklch(57.7% 0.245 27.325)
--color-red-700 oklch(50.5% 0.213 27.518)
--color-red-800 oklch(44.4% 0.177 26.899)
--color-red-900 oklch(39.6% 0.141 25.723)
--color-red-950 oklch(25.8% 0.092 26.042)

Type
token value
--font-family-sans system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
--font-family-mono ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace
--font-size--2 0.64rem
--font-size--1 0.8rem
--font-size-0 1rem
--font-size-1 1.25rem
--font-size-2 1.56rem
--font-size-3 1.95rem
--font-size-4 2.44rem
--font-size-5 3.05rem
--font-size-6 3.81rem
--font-weight-light 300
--font-weight-normal 400
--font-weight-medium 500
--font-weight-semibold 600
--font-weight-bold 700
--line-height-tight 1.2
--line-height-normal 1.5
--line-height-loose 1.6
--letter-spacing-tight -0.02em
--letter-spacing-normal 0
--letter-spacing-wide 0.02em
--letter-spacing-wider 0.08em

Space
token value
--space-void 0
--space-hairline 1px
--space-1 0.25rem
--space-2 0.5rem
--space-3 0.75rem
--space-4 1rem
--space-5 1.25rem
--space-6 1.5rem
--space-7 1.75rem
--space-8 2rem
--space-12 3rem
--space-16 4rem
--space-32 8rem

Borders
token value
--border-width-1 1px
--border-width-2 2px
--border-width-4 4px
--border-radius-void 0
--border-radius-circle 50%
--border-radius-pill 9999px
--border-radius-sm 0.25rem
--border-radius-md 0.375rem
--border-radius-lg 0.5rem
--border-radius-xl 0.75rem