--- 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; ``` | 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; ``` | Property | Type | Description | Default | Required | | :--------- | :------------------------------------------------------------------------------------------------------------ | :------------------------------ | :------ | :------: | | fontFamily | string \| undefined | Font family for all components. | - | Optional | | fontSize | \{ sm?: string \| undefined; base?: string \| undefined; lg?: string \| undefined; } \| undefined | Font sizes for text hierarchy. | - | Optional | | fontWeight | \{ normal?: number \| undefined; medium?: number \| undefined; semibold?: number \| undefined; } \| undefined | Font weights for emphasis. | - | Optional | | lineHeight | \{ tight?: string \| undefined; normal?: string \| undefined; relaxed?: string \| undefined; } \| undefined | Line heights for readability. | - | 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; ``` | 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; ``` | 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; ``` | 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; ``` | Property | Type | Description | Default | Required | | :----------- | :------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------- | :------------------------------------- | :------: | | duration | \{ fast?: string \| undefined; normal?: string \| undefined; slow?: string \| undefined; } \| 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 |