Skip to main content

Product & Design · Design kit

Design tokens starter kit

A token structure (primitive, semantic, component) that scales from one product to many, with a JSON file to start from.

I
Ifeoma Chukwu Sample 16 Oct 2026
Design systems Figma

Three layers

  1. Primitive: raw values. blue.600 = #2563EB
  2. Semantic: meaning. color.action.primary = blue.600
  3. Component: usage. button.primary.bg = color.action.primary

Products only ever use semantic and component tokens, so a rebrand changes primitives and nothing else.

Naming

category.role.variant.state, all lowercase: color.text.muted, space.inset.md.

Accessibility

Every text and background pair in the semantic layer is checked for 4.5:1 contrast before it ships.