Skip to main content
brickwork
GitHub Log in Get started
Display
Theme
Density
Direction
Brand

Back to component guide

Token specimen

A live side-by-side display of resolved Brickwork design tokens.

Full-page preview

Level-three token pack

Brand foundation

Light

  • --bw-color-accent
  • --bw-color-border
  • --bw-color-border-strong
  • --bw-color-danger
  • --bw-color-fg
  • --bw-color-fg-on-accent per theme
  • --bw-color-success
  • --bw-color-surface
  • --bw-color-surface-marketing-tint
  • --bw-color-surface-overlay
  • --bw-color-surface-raised
  • --bw-color-surface-sunken
  • --bw-color-warning
  • --bw-elevation-1
  • --bw-elevation-2
  • --bw-elevation-3
  • --bw-font-family-display
  • --bw-font-family-mono
  • --bw-font-family-sans
  • --bw-radius-lg
  • --bw-radius-md
  • --bw-radius-sm

Dark

  • --bw-color-accent
  • --bw-color-border
  • --bw-color-border-strong
  • --bw-color-danger
  • --bw-color-fg
  • --bw-color-fg-on-accent per theme
  • --bw-color-success
  • --bw-color-surface
  • --bw-color-surface-marketing-tint
  • --bw-color-surface-overlay
  • --bw-color-surface-raised
  • --bw-color-surface-sunken
  • --bw-color-warning
  • --bw-elevation-1
  • --bw-elevation-2
  • --bw-elevation-3
  • --bw-font-family-display
  • --bw-font-family-mono
  • --bw-font-family-sans
  • --bw-radius-lg
  • --bw-radius-md
  • --bw-radius-sm