Primitive tokens

Primitive tokens are the raw values used by the semantic token layer. Host applications normally override semantic tokens, and use primitive token names as values when the resolver supports them.

Color primitives can be used as values in design.color. The same fields also accept valid CSS color strings. The color samples below are rendered with inline HTML inside Markdown.

Color primitives

Common colors

Token	Value
`colors-common-white`	`#FFFFFF`
`colors-common-black`	`#000000`

Slate colors

Token	Value
`colors-slate-50`	`#F9FAFC`
`colors-slate-100`	`#F1F5F9`
`colors-slate-200`	`#E2E8F0`
`colors-slate-300`	`#CBD5E1`
`colors-slate-400`	`#94A3B8`
`colors-slate-500`	`#64748B`
`colors-slate-600`	`#475569`
`colors-slate-700`	`#334155`
`colors-slate-800`	`#1E293B`
`colors-slate-900`	`#0F172A`
`colors-slate-950`	`#0C0F18`

Grey colors

Token	Value
`colors-grey-0`	`#FFFFFF`
`colors-grey-50`	`#FAFAFA`
`colors-grey-100`	`#F5F5F5`
`colors-grey-200`	`#EEEEEE`
`colors-grey-300`	`#E0E0E0`
`colors-grey-400`	`#BDBDBD`
`colors-grey-500`	`#9E9E9E`
`colors-grey-600`	`#757575`
`colors-grey-700`	`#616161`
`colors-grey-800`	`#424242`
`colors-grey-900`	`#1F1F1F`
`colors-grey-950`	`#0A0A0A`
`colors-grey-999`	`#000000`

Neutral colors

Token	Value
`colors-neutral-50`	`#FAFBFB`
`colors-neutral-100`	`#F3F4F6`
`colors-neutral-200`	`#E5E7EB`
`colors-neutral-300`	`#D1D5DB`
`colors-neutral-400`	`#9CA3AF`
`colors-neutral-500`	`#6B7280`
`colors-neutral-600`	`#4B5563`
`colors-neutral-700`	`#374151`
`colors-neutral-800`	`#1F2937`
`colors-neutral-900`	`#1A2330`
`colors-neutral-950`	`#111827`

Purple colors

Token	Value
`colors-purple-50`	`#FBF2F9`
`colors-purple-100`	`#F2E5EF`
`colors-purple-200`	`#DDBDD7`
`colors-purple-300`	`#C792BE`
`colors-purple-400`	`#B168A7`
`colors-purple-500`	`#A14993`
`colors-purple-600`	`#8E328A`
`colors-purple-700`	`#7F3389`
`colors-purple-800`	`#6C3588`
`colors-purple-900`	`#5A3581`
`colors-purple-950`	`#422B6E`

Red colors

Token	Value
`colors-red-50`	`#FFF5F4`
`colors-red-100`	`#F6DFDD`
`colors-red-200`	`#F2A69E`
`colors-red-300`	`#ED786A`
`colors-red-400`	`#ED5E4E`
`colors-red-500`	`#EC5561`
`colors-red-600`	`#D53D46`
`colors-red-700`	`#BF2828`
`colors-red-800`	`#B72627`
`colors-red-900`	`#A62319`
`colors-red-950`	`#8A1910`

Orange colors

Token	Value
`colors-orange-50`	`#FFF7E9`
`colors-orange-100`	`#FCEEE0`
`colors-orange-200`	`#F8D1AD`
`colors-orange-300`	`#ECAE75`
`colors-orange-400`	`#F29C52`
`colors-orange-500`	`#FF7901`
`colors-orange-600`	`#DA6F2B`
`colors-orange-700`	`#D55E35`
`colors-orange-800`	`#C93A23`
`colors-orange-900`	`#B03E1B`
`colors-orange-950`	`#973E20`

Blue colors

Token	Value
`colors-blue-50`	`#F6FBFF`
`colors-blue-100`	`#EFF8FE`
`colors-blue-200`	`#AEC7EE`
`colors-blue-300`	`#A2C1F8`
`colors-blue-400`	`#82ABF5`
`colors-blue-500`	`#6994FF`
`colors-blue-600`	`#5C91F5`
`colors-blue-700`	`#447FED`
`colors-blue-800`	`#3466F5`
`colors-blue-900`	`#1467EB`
`colors-blue-950`	`#003EB7`

Green colors

Token	Value
`colors-green-50`	`#F6FDF1`
`colors-green-100`	`#F0FAE8`
`colors-green-200`	`#D9EEC4`
`colors-green-300`	`#C0E19F`
`colors-green-350`	`#A6D579`
`colors-green-400`	`#92CC5C`
`colors-green-500`	`#7FC341`
`colors-green-600`	`#5B9F2E`
`colors-green-700`	`#4A9537`
`colors-green-800`	`#3E8B4E`
`colors-green-900`	`#296133`
`colors-green-950`	`#1C3826`

Emerald colors

Token	Value
`colors-emerald-50`	`#ECFDF5`
`colors-emerald-100`	`#D1FAE5`
`colors-emerald-200`	`#A7F3D0`
`colors-emerald-300`	`#6EE7B7`
`colors-emerald-400`	`#34D399`
`colors-emerald-500`	`#10B981`
`colors-emerald-600`	`#059669`
`colors-emerald-700`	`#047857`
`colors-emerald-800`	`#065F46`
`colors-emerald-900`	`#064E3B`
`colors-emerald-950`	`#002C22`

Yellow colors

Token	Value
`colors-yellow-50`	`#FEFCE8`
`colors-yellow-100`	`#FEF9C2`
`colors-yellow-200`	`#FEF08A`
`colors-yellow-300`	`#FFE86F`
`colors-yellow-400`	`#FDE047`
`colors-yellow-500`	`#FFE200`
`colors-yellow-600`	`#EAB308`
`colors-yellow-700`	`#CA8A04`
`colors-yellow-800`	`#A16207`
`colors-yellow-900`	`#854D0E`
`colors-yellow-950`	`#713F12`

Action grey colors

Token	Value
`colors-actions-grey-text`	`#EEEEEE`
`colors-actions-grey-active`	`#6B7280`
`colors-actions-grey-focus`	`#D0D1D3`
`colors-actions-grey-hover`	`#DEDFDF`
`colors-actions-grey-selected`	`#D7D8D9`
`colors-actions-grey-disabled`	`#6B7280`
`colors-actions-grey-disabledbg`	`#6B7280`

Spacing primitives

Spacing primitives can be used as values in design.spacing. Numeric values are pixels.

Token	Value
`spacing-0`	0px
`spacing-25`	1px
`spacing-50`	2px
`spacing-100`	4px
`spacing-150`	6px
`spacing-200`	8px
`spacing-300`	12px
`spacing-400`	16px
`spacing-500`	20px
`spacing-600`	24px
`spacing-800`	32px
`spacing-1000`	40px
`spacing-1200`	48px
`spacing-1400`	56px
`spacing-1600`	64px
`spacing-2000`	80px
`spacing-2400`	96px
`spacing-2800`	112px
`spacing-3200`	128px
`spacing-3600`	144px
`spacing-4000`	160px
`spacing-5000`	200px

Radius primitives

Radius primitives can be used as values in design.radius. The runtime also accepts direct numeric values in pixels.

Token	Value
`radius-xxs`	2px
`radius-xs`	4px
`radius-sm`	6px
`radius-md`	8px
`radius-lg`	12px
`radius-xl`	16px
`radius-2xl`	20px
`radius-3xl`	24px
`radius-4xl`	32px
`radius-5xl`	40px
`radius-6xl`	56px
`radius-full`	999px

Typography primitives

Typography primitives can be used as values in design.typography. The resolver expects primitive token names, not raw CSS snippets.

Font families

Token	Value
`font-family-inter`	Inter
`font-family-menlo`	Menlo

Font sizes

Token	Value
`font-size-10`	10px
`font-size-12`	12px
`font-size-14`	14px
`font-size-16`	16px
`font-size-18`	18px
`font-size-20`	20px
`font-size-24`	24px
`font-size-32`	32px
`font-size-40`	40px
`font-size-42`	42px
`font-size-48`	48px
`font-size-56`	56px

Font weights

Token	Value
`font-weight-light`	300
`font-weight-regular`	400
`font-weight-medium`	500
`font-weight-semibold`	600
`font-weight-bold`	700
`font-weight-extrabold`	800
`font-weight-black`	900
`font-weight-italic`	400

Line heights

Token	Value
`line-height-4xl`	78px
`line-height-3xl`	64px
`line-height-2xl`	42px
`line-height-xl`	32px
`line-height-md`	28px
`line-height-sm`	24px
`line-height-xs`	22px
`line-height-2xs`	18px
`line-height-3xs`	16px
`line-height-4xs`	12px

Letter spacing

Token	Value
`letter-spacing-0`	0px
`letter-spacing-1`	-0.672px
`letter-spacing-2`	-0.36px
`letter-spacing-3`	-0.19px
`letter-spacing-4`	-0.12px
`letter-spacing-5`	-0.2px
`letter-spacing-6`	-0.1px
`letter-spacing-7`	0.4px
`letter-spacing-8`	0.15px

Shadow primitives

Shadow primitives can be used as values in design.shadows. The runtime also accepts raw CSS shadow strings.

Light shadows

Token	Value
`shadow-0`	`none`
`shadow-1`	`0px 0px 2px 0px #64748b1a`
`shadow-2`	`0px 0px 4px 0px #64748b1f`
`shadow-3`	`0px 0px 8px 0px #64748b24`
`shadow-4`	`0px 0px 12px 0px #64748b2e`
`shadow-5`	`0px 0px 20px 0px #64748b38`
`shadow-6`	`0px 0px 30px 0px #64748b42`

Dark shadows

Token	Value
`shadow-0`	`none`
`shadow-1`	`0px 0px 2px 0px #00000066`
`shadow-2`	`0px 0px 4px 0px #00000080`
`shadow-3`	`0px 0px 8px 0px #00000099`
`shadow-4`	`0px 0px 12px 0px #000000b2`
`shadow-5`	`0px 0px 20px 0px #000000cc`
`shadow-6`	`0px 0px 30px 0px #000000e5`

Stroke primitives

Stroke primitives can be used as values in design.border. The runtime also accepts direct numeric values in pixels.

Token	Value
`stroke-0`	0px
`stroke-50`	0.5px
`stroke-100`	1px
`stroke-120`	1.2px
`stroke-160`	1.6px
`stroke-200`	2px
`stroke-400`	4px
`stroke-600`	6px
`stroke-800`	8px

Internal size and scale primitives

size-* and scale-* primitives are used internally to compose radius and border tokens. Host applications should prefer the semantic tokens and the category-specific primitives above.

Size primitives

Token	Value
`size-0`	0px
`size-25`	1px
`size-50`	2px
`size-100`	4px
`size-150`	6px
`size-200`	8px
`size-300`	12px
`size-400`	16px
`size-500`	20px
`size-600`	24px
`size-800`	32px
`size-1000`	40px
`size-1400`	56px
`size-full`	999px

Scale primitives

Token	Value
`scale-none`	0px
`scale-1`	1px
`scale-2`	2px
`scale-4`	4px
`scale-6`	6px
`scale-8`	8px
`scale-10`	10px
`scale-12`	12px
`scale-16`	16px
`scale-20`	20px
`scale-24`	24px
`scale-32`	32px
`scale-40`	40px
`scale-full`	999px