Colors
Semantic color utilities for backgrounds, text, and borders. Structural tokens come first — they're the everyday workhorses. Intent tokens communicate meaning.
Surfaces
Three elevation levels for layering content. Sunken sits behind, default is the main canvas, and raised floats above.
.bg-surface-sunken.bg-surface-default.bg-surface-raisedText: Structural
Most text doesn't communicate status — it just needs the right visual weight. .fg-default for body text, .fg-muted for secondary content, .fg-emphasis for headings and labels.
.fg-emphasis — Page heading
.fg-emphasis.fg-default — Body text that makes up the bulk of your content. This is the color you use without thinking.
.fg-default.fg-muted — Secondary text, helper text, timestamps, captions
.fg-mutedBorders: Structural
Most borders don't communicate meaning — they just separate or outline things. Reach for these first. .b-default is the workhorse; .b-faint for quieter lines, .b-prominent when the line needs to be clearly visible.
.b-faint.b-default.b-prominent