Guidelines / Colors
System
Functional Colors: Focus, Grid, Selection
01 Preview
02 Rule
Functional (non-palette) colors. --focus-ring (amber-1) draws keyboard-focus outlines; --grid-line is the faint blueprint wash on hero/section/OG surfaces; --selection-bg/--selection-fg style ::selection.
03 Tokens
| Token | Value |
|---|---|
| --grid-line | rgba(236, 231, 219, 0.045) |
| --selection-bg | var(--amber-2) |
| --selection-fg | var(--amber-ink) |
The tokens this card covers, from src/tokens/colors.css. Use these via var(--name) rather than literal values — npm run lint enforces it wherever a token holds the value.