Utility table
Properties and namespaces from shared facts; the table scrolls by keyboard in a narrow column.
Grouped namespaces
| Group | Utility keys | Description |
|---|---|---|
| General paint | bg, background-color, fg, color, accent-color, fill | Use palette steps and hue aliases for broad paint decisions. |
| Surfaces | surface | Use surface roles for panels, cards, overlays, and inverse blocks. |
| Line roles | b, bt, br, bb, bl, border-color, outline-color, stroke | Use line roles for borders, dividers, outlines, and strokes. |
Variable sources
| Namespace | Consumers |
|---|---|
color-* |
Show 13 more keys
|
Used on the Colors guide.
Usage and interface
NamespaceUtilityTable connects a token namespace to the utility keys that accept it. When groups have descriptions, the table keeps the original Guide's separate Group, Utility keys and Description columns. The refined shared style uses quiet separators and a consistent reading rhythm. On narrow screens the table scrolls inside its own keyboard-focusable region; the page width stays fixed.
<NamespaceUtilityTable groups={[ { label: 'Surfaces', namespace: 'color-surface', keys: ['surface'], description: 'Panels, cards and overlays.' }]} />Provide reader-facing group names and source keys from the manifest; namespace or namespaces filters unsupported keys. With no descriptions the table uses two columns. The table is a document aid, outside the measured layout of a demo. See its actual uses in Colors, Spacing and Typography, and the utility table review.