color-hex
color.hex
Standard hex color (indigo)
Colors (7)
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