Design Tokens

Colors (7)

color-hex

color.hex
Standard hex color (indigo)

color-hex-alpha

color.hex-alpha
Hex color with alpha channel (80% opacity)

color-hsl

color.hsl
HSL functional notation

color-hsla

color.hsla
HSLA with transparency

color-named

color.named
CSS named color

color-rgb

color.rgb
RGB functional notation

color-rgba

color.rgba
RGBA with transparency

Dimensions (9)

dimension-ch

dimension.ch
Character units (good for text measure)

dimension-em

dimension.em
Em units (relative to parent)

dimension-percent

dimension.percent
Percentage value

dimension-px

dimension.px
Pixel units

dimension-rem

dimension.rem
Root em units

dimension-unitless

dimension.unitless
Unitless dimension (line-height, etc.)

dimension-vh

dimension.vh
Viewport height units

dimension-vw

dimension.vw
Viewport width units

dimension-zero

dimension.zero
Zero value (no unit needed)

Font Families (4)

The quick brown fox

font-family-display

font.family.display
Display font with quotes
The quick brown fox

font-family-mono

font.family.mono
Monospace for code
The quick brown fox

font-family-sans

font.family.sans
Modern sans-serif stack
The quick brown fox

font-family-serif

font.family.serif
Serif font stack for body text

Font Weights (10)

Font Weight 900

font-weight-black

font.weight.black
Black weight (900)
Font Weight 700

font-weight-bold

font.weight.bold
Bold weight (700)
Font Weight 800

font-weight-extrabold

font.weight.extrabold
Extra bold weight (800)
Font Weight 200

font-weight-extralight

font.weight.extralight
Extra light weight (200)
Font Weight 300

font-weight-light

font.weight.light
Light weight (300)
Font Weight 500

font-weight-medium

font.weight.medium
Medium weight (500)
Font Weight bold

font-weight-named-bold

font.weight.named-bold
Named weight value
Font Weight 400

font-weight-normal

font.weight.normal
Normal/regular weight (400)
Font Weight 600

font-weight-semibold

font.weight.semibold
Semi-bold weight (600)
Font Weight 100

font-weight-thin

font.weight.thin
Thin weight (100)

Durations (6)

1.5s

duration-decimal-seconds

duration.decimal-seconds
Decimal seconds
150ms

duration-fast

duration.fast
Fast micro-interactions
0ms

duration-instant

duration.instant
No transition
300ms

duration-normal

duration.normal
Standard transitions
500ms

duration-slow

duration.slow
Slower, more dramatic transitions
1s

duration-very-slow

duration.very-slow
Very slow (seconds notation)

Shadows (8)

shadow-2xl

shadow.2xl
Very large shadow

shadow-colored

shadow.colored
Colored shadow (indigo glow)

shadow-inner

shadow.inner
Inset shadow

shadow-lg

shadow.lg
Large shadow for cards

shadow-md

shadow.md
Medium depth shadow

shadow-none

shadow.none
No shadow

shadow-sm

shadow.sm
Subtle shadow

shadow-xl

shadow.xl
Extra large shadow

Strings (5)

string-quoted

string.quoted
String with escaped quotes

string-simple

string.simple
Plain string value

string-special-chars

string.special-chars
String with escape sequences

string-url

string.url
URL as string

string-with-spaces

string.with-spaces
String with whitespace preserved

Numbers (6)

number-decimal

number.decimal
Decimal (golden ratio)

number-integer

number.integer
Positive integer

number-large

number.large
Large integer

number-negative

number.negative
Negative number

number-pi

number.pi
Pi approximation

number-zero

number.zero
Zero value