---
title: Design Tokens
description: The six base token categories that control colors, typography, spacing, radius, shadows, and motion, plus optional dark-mode overrides.
---
## Color Tokens

Color tokens define the palette for all consent components. Set `colors` for light mode and `dark` for dark mode overrides.

When `textOnPrimary` is omitted, c15t derives it automatically from `primary` to keep text readable on primary-filled surfaces such as stock branding tags and buttons. Set `textOnPrimary` explicitly when you need a specific foreground color.

```tsx
const theme = {
  colors: {
    primary: '#6366f1',
    primaryHover: '#4f46e5',
    surface: '#ffffff',
    surfaceHover: '#f9fafb',
    border: '#e5e7eb',
    borderHover: '#d1d5db',
    text: '#1f2937',
    textMuted: '#6b7280',
    textOnPrimary: '#ffffff',
    overlay: 'rgba(0, 0, 0, 0.5)',
    switchTrack: '#d1d5db',
    switchTrackActive: '#6366f1',
    switchThumb: '#ffffff',
  },
  dark: {
    primary: '#818cf8',
    surface: '#1f2937',
    text: '#f9fafb',
    textMuted: '#9ca3af',
    border: '#374151',
  },
} satisfies Theme;
```

### ColorTokens

|Property|Type|Description|Default|Required|
|:--|:--|:--|:--|:--:|
|primary|string \|undefined|Primary brand/accent color for interactive elements.|-|Optional|
|primaryHover|string \|undefined|Hover/active state for primary elements.|-|Optional|
|surface|string \|undefined|Main background color for panels and containers.|-|Optional|
|surfaceHover|string \|undefined|Hover state for surface elements.|-|Optional|
|border|string \|undefined|Border color for containers and inputs.|-|Optional|
|borderHover|string \|undefined|Hover state for bordered elements.|-|Optional|
|text|string \|undefined|Primary text color for headings and body.|-|Optional|
|textMuted|string \|undefined|Muted text color for secondary content.|-|Optional|
|textOnPrimary|string \|undefined|Text color for content on primary background. Auto-derived from \`primary\` when omitted.|-|Optional|
|overlay|string \|undefined|Overlay color for modal backdrops.|-|Optional|
|switchTrack|string \|undefined|Toggle track color (off state).|-|Optional|
|switchTrackActive|string \|undefined|Toggle track color (on state).|-|Optional|
|switchThumb|string \|undefined|Toggle thumb color.|-|Optional|

## Typography Tokens

Control font family, sizes, weights, and line heights.

```tsx
const theme = {
  typography: {
    fontFamily: 'Inter, system-ui, sans-serif',
    fontSize: { sm: '0.875rem', base: '1rem', lg: '1.125rem' },
    fontWeight: { normal: 400, medium: 500, semibold: 600 },
    lineHeight: { tight: '1.25', normal: '1.5', relaxed: '1.75' },
  },
} satisfies Theme;
```

### TypographyTokens

|Property|Type|Description|Default|Required|
|:--|:--|:--|:--|:--:|
|fontFamily|string \|undefined|Font family for all components.|-|Optional|
|fontSize|Object \|undefined|Font sizes for text hierarchy.|-|Optional|
|fontWeight|Object \|undefined|Font weights for emphasis.|-|Optional|
|lineHeight|Object \|undefined|Line heights for readability.|-|Optional|

#### `fontSize`

Font sizes for text hierarchy.

|Property|Type|Description|Default|Required|
|:--|:--|:--|:--|:--:|
|sm|string \|undefined|@default '0.875rem'|-|Optional|
|base|string \|undefined|@default '1rem'|-|Optional|
|lg|string \|undefined|@default '1.125rem'|-|Optional|

#### `fontWeight`

Font weights for emphasis.

|Property|Type|Description|Default|Required|
|:--|:--|:--|:--|:--:|
|normal|number \|undefined|@default 400|-|Optional|
|medium|number \|undefined|@default 500|-|Optional|
|semibold|number \|undefined|@default 600|-|Optional|

#### `lineHeight`

Line heights for readability.

|Property|Type|Description|Default|Required|
|:--|:--|:--|:--|:--:|
|tight|string \|undefined|@default '1.25'|-|Optional|
|normal|string \|undefined|@default '1.5'|-|Optional|
|relaxed|string \|undefined|@default '1.75'|-|Optional|

## Spacing Tokens

Five-step scale for internal padding, margins, and gaps.

```tsx
const theme = {
  spacing: {
    xs: '0.25rem',  // 4px
    sm: '0.5rem',   // 8px
    md: '1rem',     // 16px
    lg: '1.5rem',   // 24px
    xl: '2rem',     // 32px
  },
} satisfies Theme;
```

### SpacingTokens

|Property|Type|Description|Default|Required|
|:--|:--|:--|:--|:--:|
|xs|string \|undefined|@default '0.25rem' (4px)|'0.25rem' (4px)|Optional|
|sm|string \|undefined|@default '0.5rem' (8px)|'0.5rem' (8px)|Optional|
|md|string \|undefined|@default '1rem' (16px)|'1rem' (16px)|Optional|
|lg|string \|undefined|@default '1.5rem' (24px)|'1.5rem' (24px)|Optional|
|xl|string \|undefined|@default '2rem' (32px)|'2rem' (32px)|Optional|

## Radius Tokens

Border radius scale for rounded corners.

```tsx
const theme = {
  radius: {
    sm: '0.25rem',  // 4px
    md: '0.5rem',   // 8px
    lg: '0.75rem',  // 12px
    full: '9999px', // Pill shape
  },
} satisfies Theme;
```

### RadiusTokens

|Property|Type|Description|Default|Required|
|:--|:--|:--|:--|:--:|
|sm|string \|undefined|@default '0.25rem' (4px)|'0.25rem' (4px)|Optional|
|md|string \|undefined|@default '0.5rem' (8px)|'0.5rem' (8px)|Optional|
|lg|string \|undefined|@default '0.75rem' (12px)|'0.75rem' (12px)|Optional|
|full|string \|undefined|@default '9999px'|'9999px'|Optional|

## Shadow Tokens

Box shadow scale for depth and elevation.

```tsx
const theme = {
  shadows: {
    sm: '0 1px 2px hsla(0, 0%, 0%, 0.05)',
    md: '0 4px 12px hsla(0, 0%, 0%, 0.08)',
    lg: '0 8px 24px hsla(0, 0%, 0%, 0.12)',
  },
} satisfies Theme;
```

### ShadowTokens

|Property|Type|Description|Default|Required|
|:--|:--|:--|:--|:--:|
|sm|string \|undefined|@default '0 1px 2px hsla(0, 0%, 0%, 0.05)'|'0 1px 2px hsla(0, 0%, 0%, 0.05)'|Optional|
|md|string \|undefined|@default '0 4px 12px hsla(0, 0%, 0%, 0.08)'|'0 4px 12px hsla(0, 0%, 0%, 0.08)'|Optional|
|lg|string \|undefined|@default '0 8px 24px hsla(0, 0%, 0%, 0.12)'|'0 8px 24px hsla(0, 0%, 0%, 0.12)'|Optional|

## Motion Tokens

Animation duration and easing presets.

```tsx
const theme = {
  motion: {
    duration: { fast: '100ms', normal: '200ms', slow: '300ms' },
    easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
    easingOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
    easingInOut: 'cubic-bezier(0.645, 0.045, 0.355, 1)',
    easingSpring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
  },
} satisfies Theme;
```

### MotionTokens

|Property|Type|Description|Default|Required|
|:--|:--|:--|:--|:--:|
|duration|Object \|undefined|Duration presets for transitions.|-|Optional|
|easing|string \|undefined|Default CSS easing function for general animation curves.|'cubic-bezier(0.4, 0, 0.2, 1)'|Optional|
|easingOut|string \|undefined|CSS easing function for enter/exit animations. Use for modals, tooltips, dropdowns, and any element entering or exiting.|'cubic-bezier(0.215, 0.61, 0.355, 1)'|Optional|
|easingInOut|string \|undefined|CSS easing function for on-screen movement. Use when elements already on screen need to move or morph.|'cubic-bezier(0.645, 0.045, 0.355, 1)'|Optional|
|easingSpring|string \|undefined|CSS easing function with spring-like overshoot. Use for playful, bouncy animations.|'cubic-bezier(0.34, 1.56, 0.64, 1)'|Optional|

#### `duration`

Duration presets for transitions.

|Property|Type|Description|Default|Required|
|:--|:--|:--|:--|:--:|
|fast|string \|undefined|@default '100ms'|-|Optional|
|normal|string \|undefined|@default '200ms'|-|Optional|
|slow|string \|undefined|@default '300ms'|-|Optional|