Color

Primitive color scales and semantic color tokens.

Usage

Components use the semantic tokens through their CSS variables; the primitives are only what they point to. Copy a variable from its card.

.card {
  background: var(--color-surface-default);
  border-color: var(--color-border-default);
  color: var(--color-text-default);
}

Primitives

The scales the semantic colors point to. Components never use them directly.

Foundation

Gray

Green

Purple

Red

Teal

Yellow

Canvas

color/canvas/brand#378b91 · color/teal/500
color/canvas/default#fafaf3 · color/gray/100
color/canvas/inverse#0a0a09 · color/gray/950
color/canvas/subtle#fafaf3 · color/gray/100

Surface

color/surface/brand#d7e8e9 · color/teal/100
color/surface/default#fafaf3 · color/gray/100
color/surface/disabled#d0d0c7 · color/gray/400
color/surface/focus#f0f0e6 · color/gray/250
color/surface/glass#ffffff1a
color/surface/hover#f0f0e6 · color/gray/250
color/surface/inverse#40403f · color/gray/800
color/surface/pressed#d0d0c7 · color/gray/400
color/surface/raised#e8e8df · color/gray/300
color/surface/selected#b1b1aa · color/gray/500

Text

color/text/brand#378b91 · color/teal/500
color/text/default#141414 · color/gray/900
color/text/disabled#b1b1aa · color/gray/500
color/text/inverse#f7f7ed · color/gray/200
color/text/muted#8f8f8a · color/gray/600
color/text/on-brand#f7f7ed · color/gray/200
color/text/on-danger#f7f7ed · color/gray/200
color/text/on-subtle#40403f · color/gray/800

Icon

color/icon/brand#378b91 · color/teal/500
color/icon/default#141414 · color/gray/900
color/icon/disabled#b1b1aa · color/gray/500
color/icon/inverse#f7f7ed · color/gray/200
color/icon/muted#8f8f8a · color/gray/600
color/icon/on-brand#f7f7ed · color/gray/200
color/icon/on-danger#f7f7ed · color/gray/200
color/icon/on-subtle#40403f · color/gray/800

Border

color/border/brand#378b91 · color/teal/500
color/border/default#d0d0c7 · color/gray/400
color/border/disabled#e8e8df · color/gray/300
color/border/focus#32757a · color/teal/600
color/border/hover#d0d0c7 · color/gray/400
color/border/on-brand#284a4c · color/teal/800

Action

Brand

color/action/brand/default#378b91 · color/teal/500
color/action/brand/disabled#e8e8df · color/gray/300
color/action/brand/focus#5fa2a7 · color/teal/400
color/action/brand/hover#32757a · color/teal/600
color/action/brand/pressed#2d5f63 · color/teal/700

Danger

color/action/danger/default#c33c3c · color/red/500
color/action/danger/disabled#e8e8df · color/gray/300
color/action/danger/focus#cf6363 · color/red/400
color/action/danger/hover#9f3333 · color/red/600
color/action/danger/pressed#7b2a2a · color/red/700

Ghost

color/action/ghost/default#ffffff00 · color/foundation/transparent
color/action/ghost/disabled#ffffff00 · color/foundation/transparent
color/action/ghost/focus#ebf3f4 · color/teal/50
color/action/ghost/hover#d7e8e9 · color/teal/100
color/action/ghost/pressed#afd1d3 · color/teal/200

Outline

color/action/outline/default#ffffff00 · color/foundation/transparent
color/action/outline/disabled#ffffff00 · color/foundation/transparent
color/action/outline/focus#ebf3f4 · color/teal/50
color/action/outline/hover#d7e8e9 · color/teal/100
color/action/outline/pressed#afd1d3 · color/teal/200

Subtle

color/action/subtle/default#e8e8df · color/gray/300
color/action/subtle/disabled#e8e8df · color/gray/300
color/action/subtle/focus#e8e8df · color/gray/300
color/action/subtle/hover#d0d0c7 · color/gray/400
color/action/subtle/pressed#b1b1aa · color/gray/500

Feedback

Danger

color/feedback/danger/border#9f3333 · color/red/600
color/feedback/danger/icon#c33c3c · color/red/500
color/feedback/danger/surface#f3d8d8 · color/red/100
color/feedback/danger/text#c33c3c · color/red/500

Info

color/feedback/info/border#6f4ca7 · color/purple/600
color/feedback/info/icon#875bcd · color/purple/500
color/feedback/info/surface#e7def5 · color/purple/100
color/feedback/info/text#875bcd · color/purple/500

Success

color/feedback/success/border#759931 · color/green/600
color/feedback/success/icon#759931 · color/green/600
color/feedback/success/surface#e8f2d7 · color/green/100
color/feedback/success/text#759931 · color/green/600

Warning

color/feedback/warning/border#ae9643 · color/yellow/600
color/feedback/warning/icon#ae9643 · color/yellow/600
color/feedback/warning/surface#f7f1dc · color/yellow/100
color/feedback/warning/text#ae9643 · color/yellow/600

Overlay

color/overlay/default#14141466
color/overlay/subtle#14141429