Download for iOS

Design Tokens Reference

A standardized token format for building consistent, scalable design systems. Use these token types to power any web, mobile, or email project.

Generate Tokens Browse Types

Token Architecture

Global

Raw Primitives

Base values: color scales, spacing steps, font sizes. No semantic meaning — just raw values like #6366F1 or 1rem.

global

Semantic / Alias

Meaningful Names

Map globals to purposes: background, foreground, primary, muted. Light and dark modes are separate token sets.

semantic/light, semantic/dark

Component

Component-Specific

Tokens scoped to components: button-bg, card-border, input-ring. Reference semantic tokens for easy theming.

component/light, component/dark

Presets

Choose a preset based on your project type. Each preset generates the right mix of token types, tiers, and token sets.

Full Brand

Complete 3-tier system with light/dark

full-brand

Simple

Lightweight global-only tokens

simple

Product / SaaS

Interactive product UI with modes

product

Landing Page

Bold marketing with gradients

landing

Dashboard

Data-dense admin panels

dashboard

Mobile App

Touch-friendly native sizes

mobile

Email

Email-safe px + web-safe fonts

email

Minimal

Under 20 tokens, bare essentials

minimal

Token Types

Color

Palette, semantic, and component colors

color.primary.500#6366F1

color.neutral.100#F1F5F9

color.semantic.success#22C55E

View details →

Dimension / Spacing

Spacing scale, sizing, layout measurements

spacing.xs0.25rem

spacing.sm0.5rem

spacing.md1rem

View details →

Typography

Font families, sizes, weights, line heights

fontFamily.sans'Inter', system-ui, sans-serif

fontFamily.mono'JetBrains Mono', monospace

fontSize.xs0.75rem

View details →

Shadow

Elevation, depth, and drop shadows

shadow.xs0 1px 2px rgba(0,0,0,0.05)

shadow.sm0 1px 3px rgba(0,0,0,0.1)

shadow.md0 4px 6px -1px rgba(0,0,0,0.1)

View details →

Border Radius

Corner rounding from sharp to pill

radius.sm0.25rem

radius.md0.5rem

View details →

Border

Border widths and styles

borderWidth.thin1px

borderWidth.medium2px

borderWidth.thick4px

View details →

Opacity

Transparency levels for overlays and states

opacity.disabled0.5

opacity.overlay0.6

opacity.hover0.8

View details →

Duration / Timing

Animation and transition timing

duration.instant0ms

duration.fast100ms

duration.normal200ms

View details →

Gradient

Linear, radial, and conic gradients

gradient.primarylinear-gradient(135deg, #6366F1 0%, #8B5CF6 100%)

gradient.sunsetlinear-gradient(135deg, #F97316 0%, #EC4899 100%)

gradient.oceanlinear-gradient(135deg, #06B6D4 0%, #3B82F6 100%)

View details →

Usage in CSS

CSS Custom Properties

:root {
  --color-primary: #6366F1;
  --color-background: #FFFFFF;
  --spacing-md: 1rem;
  --font-size-base: 1rem;
  --radius-md: 0.5rem;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
}

.card {
  background: var(--color-background);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'var(--color-primary)',
        background: 'var(--color-background)',
      },
      spacing: {
        md: 'var(--spacing-md)',
      },
      borderRadius: {
        md: 'var(--radius-md)',
      },
    },
  },
}

Ready to generate tokens?

Use our AI-powered token generator to create production-ready design tokens for any project type.

Generate Tokens