Design Tokens
The single source of truth for every visual decision in Forma. Tokens are CSS custom properties applied on the html element — changing the theme swaps the entire set, repainting the UI consistently.
Using tokens in your styles
Reference tokens via var(--token-name) in any CSS or inline style. They automatically update when the theme changes, with no JavaScript required.
Colors
Backgrounds & Surfaces
--color-bg
Page background
--color-bg-secondary
Secondary background
--color-surface
Card / panel surface
--color-surface-raised
Raised surface (hover, tag)
Text
--color-text
Primary text
--color-text-muted
Secondary text
--color-text-subtle
Disabled / placeholder
--color-text-inverse
On dark backgrounds
Brand / Primary
--color-primary
Primary accent
--color-primary-hover
Hover state
--color-primary-subtle
Subtle bg tint
--color-primary-muted
Muted border / ring
Semantic
--color-success
Success state
--color-warning
Warning state
--color-error
Error / destructive
--color-info
Informational
Borders
--color-border
Default border
--color-border-strong
Prominent border
Typography
Sans-serif
Inter
--font-sansMonospace
JetBrains Mono
--font-monoScale
xs
0.75rem
The quick brown fox jumps over the lazy dog
sm
0.875rem
The quick brown fox jumps over the lazy dog
base
1rem
The quick brown fox jumps over the lazy dog
lg
1.125rem
The quick brown fox jumps over the lazy dog
xl
1.25rem
The quick brown fox jumps over the lazy dog
2xl
1.5rem
The quick brown fox jumps over the lazy dog
3xl
1.875rem
The quick brown fox jumps over the lazy dog
4xl
2.25rem
The quick brown fox jumps over the lazy dog
Spacing
--space-1
0.25rem
--space-2
0.5rem
--space-3
0.75rem
--space-4
1rem
--space-6
1.5rem
--space-8
2rem
--space-12
3rem
--space-16
4rem
Border Radius
--radius-sm
0.25rem
--radius-md
0.375rem
--radius-lg
0.5rem
--radius-xl
0.75rem
--radius-2xl
1rem
--radius-3xl
1.5rem
--radius-full
9999px
Shadows
--shadow-xs--shadow-sm--shadow-md--shadow-lg--shadow-xlMotion
--transition-fast100ms cubic-bezier(0.4, 0, 0.2, 1)
Micro-interactions, hover states
--transition-base150ms cubic-bezier(0.4, 0, 0.2, 1)
Default: buttons, inputs, links
--transition-slow250ms cubic-bezier(0.4, 0, 0.2, 1)
Modals, drawers, overlays
--transition-slower350ms cubic-bezier(0.4, 0, 0.2, 1)
Theme transitions, page changes
prefers-reduced-motion — durations collapse to 0.01ms for users who prefer reduced motion. Theme System
Light
Clean whites and subtle zinc grays. Default theme for most interfaces.
[data-theme='light']Dark
Near-black neutral dark, inspired by Vercel. High contrast with minimal eye strain.
[data-theme='dark']Brand
Deep violet brand expression. Full surface coverage with violet-shifted values.
[data-theme='brand']