Canvas Design System
Main Site Tokens

Token Reference

Complete index of all CSS custom properties defined in platform-tokens.css. This file is the canonical source of truth.

info If this document and the CSS file disagree, the CSS file wins. View the raw file: platform-tokens.css

Naming Convention

--{scope}-{property}[-{modifier}] Scope: color, bg, text, phase, {app-name}, gray Property: ink, primary, surface, etc. Modifier: dark, light, very-light, secondary, muted, faint

Examples

TokenMeaning
--color-inkGlobal ink (text) color
--color-ink-secondaryLighter ink variant
--phase-learnLearn phase base color
--tips-primaryTips app accent color
--tips-darkTips app hover shade
--bg-pagePage background
--text-defaultDefault body text color

Phase Tokens

TokenValuePhase
--phase-learn #E54D4D Learn
--phase-learn-dark #C73E3E Learn
--phase-learn-light #FEE2E2 Learn
--phase-learn-very-light #FEF2F2 Learn
--phase-plan #0284C7 Plan
--phase-plan-dark #075985 Plan
--phase-plan-light #E0F2FE Plan
--phase-plan-very-light #F0F9FF Plan
--phase-facilitate #7C4DFF Facilitate
--phase-facilitate-dark #6D28D9 Facilitate
--phase-facilitate-light #EDE9FE Facilitate
--phase-facilitate-very-light #EDE9FE Facilitate
--phase-reflect #10B981 Reflect
--phase-reflect-dark #059669 Reflect
--phase-reflect-light #A7F3D0 Reflect
--phase-reflect-very-light #D1FAE5 Reflect

Ink & Text Tokens

TokenValueUsage
--color-ink#2C2416Headings, primary text
--color-ink-secondary#5C5242Body text, descriptions
--color-ink-muted#78716CMetadata, captions
--color-ink-faint#A8A29EDisabled, hints
--text-darkvar(--color-ink)Alias: headlines
--text-defaultvar(--color-ink-secondary)Alias: body text
--text-mutedvar(--color-ink-muted)Alias: meta text
--text-faintvar(--color-ink-faint)Alias: hints
--text-inverse#FFFFFFText on dark backgrounds

Background Tokens

TokenValueUsage
--bg-page#FEF7F1Default page background
--bg-page-alt#FFFBF8Coach app page bg
--bg-surface#FFFFFFCards, modals, panels
--bg-muted#F5F5F4Subtle section alternates
--bg-subtle#FAFAF9Very light differentiation
--bg-paper#FAF7F2Tips/Intervention paper
--bg-paper-dark#F0EBE3Darker paper sections

Typography Tokens

TokenValue
--font-heading'Fraunces', Georgia, serif
--font-body'Inter', -apple-system, sans-serif
--text-display2.875rem (46px)
--text-h12rem (32px)
--text-h21.5rem (24px)
--text-h31.25rem (20px)
--text-h41.125rem (18px)
--text-body1rem (16px)
--text-ui0.9375rem (15px)
--text-small0.875rem (14px)
--text-meta0.8125rem (13px)
--text-caption0.75rem (12px)
--text-micro0.6875rem (11px)
--text-nano0.625rem (10px)
--font-normal400
--font-medium500
--font-semibold600
--font-bold700
--leading-tight1.2
--leading-snug1.35
--leading-normal1.5
--leading-relaxed1.625
--tracking-tight-0.02em
--tracking-normal0
--tracking-wide0.025em

Spacing Tokens

TokenValue
--space-0-52px (0.125rem)
--space-14px (0.25rem)
--space-1-56px (0.375rem)
--space-28px (0.5rem)
--space-2-510px (0.625rem)
--space-312px (0.75rem)
--space-3-514px (0.875rem)
--space-416px (1rem)
--space-4-518px (1.125rem)
--space-520px (1.25rem)
--space-624px (1.5rem)
--space-832px (2rem)
--space-1040px (2.5rem)
--space-1248px (3rem)
--space-1664px (4rem)

Shadow & Elevation Tokens

TokenValue
--shadow-xs0 1px 2px rgba(0,0,0,0.04)
--shadow-sm0 1px 3px rgba(0,0,0,0.06)
--shadow-md0 4px 6px rgba(0,0,0,0.07)
--shadow-lg0 10px 15px rgba(0,0,0,0.08)
--shadow-xl0 20px 25px rgba(0,0,0,0.10)

Transition Tokens

TokenValueUsage
--transition-fast150ms easeButtons, chips, toggles
--transition-base200ms easeCards, general hover
--transition-slow300ms easeModals, panels, overlays

Semantic Component Tokens

Component-level tokens map design intent to primitive values. Use these in component CSS instead of referencing primitives directly — this enables theming and future dark mode support.

Buttons

TokenValueUsage
--button-bg-primaryvar(--mainsite-primary)Primary button background
--button-bg-primary-hovervar(--mainsite-dark)Primary button hover
--button-text-primaryvar(--text-inverse)Primary button text
--button-bg-secondaryvar(--bg-surface)Secondary button background
--button-text-secondaryvar(--color-ink)Secondary button text
--button-border-secondaryvar(--gray-300)Secondary button border
--button-bg-ghosttransparentGhost button background
--button-text-ghostvar(--color-ink-secondary)Ghost button text
--button-radiusvar(--radius-lg)Button border radius

Cards

TokenValueUsage
--card-bgvar(--bg-surface)Card background
--card-bordervar(--gray-200)Card border color
--card-shadowvar(--shadow-sm)Card resting shadow
--card-shadow-hovervar(--shadow-md)Card hover shadow
--card-radiusvar(--radius-xl)Card border radius
--card-paddingvar(--space-6)Card internal padding

Inputs

TokenValueUsage
--input-bgvar(--bg-surface)Input background
--input-bordervar(--gray-300)Input border color
--input-border-focusvar(--phase-plan)Focused input border
--input-textvar(--color-ink)Input text color
--input-placeholdervar(--color-ink-faint)Placeholder text
--input-radiusvar(--radius-lg)Input border radius
--input-ringvar(--focus-ring-color)Focus ring color

Modals, Tooltips, Toasts

TokenValueUsage
--modal-bgvar(--bg-surface)Modal background
--modal-bordervar(--gray-200)Modal border
--modal-shadowvar(--shadow-xl)Modal shadow
--modal-backdropvar(--backdrop-medium)Modal overlay
--modal-radiusvar(--radius-2xl)Modal border radius
--tooltip-bgvar(--gray-900)Tooltip background
--tooltip-textvar(--text-inverse)Tooltip text
--toast-bgvar(--bg-surface)Toast notification background
--toast-shadowvar(--shadow-lg)Toast shadow

Links & Dividers

TokenValueUsage
--link-colorvar(--phase-plan)Default link color
--link-hovervar(--phase-plan-dark)Link hover color
--link-visitedvar(--phase-facilitate)Visited link color
--divider-colorvar(--gray-200)Default divider/separator
--divider-strongvar(--gray-300)Prominent divider

Legacy Token Aliases

Older tokens that still appear in the codebase. Prefer the current token names. These aliases will be removed in a future release.

warning Deprecation notice: Legacy aliases are scheduled for removal in v2.0. Migrate to the current token names listed in the "Maps To" column. Console warnings will be added in v1.7 to flag remaining usage.
Legacy TokenMaps ToNote
--color-primary--mainsite-primary
--color-primary-dark--mainsite-dark
--color-primary-light--mainsite-light
--text-primary--text-darkAvoid; ambiguous
--text-secondary--text-default or --text-mutedContext-dependent
--font-family--font-body
--border-default--gray-200
--border-light--gray-200