Design system · Component review 18

Utility table

The Guide’s namespace table tells readers which utility keys accept a token family. The original separated keys and their purpose; this candidate keeps that structure and gives each column clearer space at the documentation width.

Adopted shared style: NamespaceUtilityTable now uses the refined three-column treatment. The published Guide keeps its existing content and page structure.

Table treatments

The same three groups appear in each treatment. On a phone, scroll inside a three-column table to reach the description; the page itself remains fixed.

01

Original Guide

Three clear information columns

GroupUtility keysDescription
General paintbg, background-color, fg, color, accent-color, fillUse palette steps and hue aliases for broad paint decisions.
SurfacessurfaceUse surface roles for panels, cards, overlays, and inverse blocks.
Line rolesb, bt, br, bb, bl, border-color, outline-color, strokeUse line roles for borders, dividers, outlines, and strokes.

The original table separates utility keys from their purpose. It uses the established Guide table lines and native table markup.

02

Previous shared

Two columns with merged purpose

GroupUtility keys and purpose
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.

The previous shared version kept data-driven keys but placed descriptions beneath them to fit narrow reading columns.

03

Adopted

Refined three-column Guide table

Utility groups table
GroupUtility keysDescription
General paintbg, background-color, fg, color, accent-color, fillUse palette steps and hue aliases for broad paint decisions.
SurfacessurfaceUse surface roles for panels, cards, overlays, and inverse blocks.
Line rolesb, bt, br, bb, bl, border-color, outline-color, strokeUse line roles for borders, dividers, outlines, and strokes.

The adopted shared component restores the original hierarchy, with measured column widths, restrained row rhythm and readable code wrapping. The table itself scrolls in a narrow column, including by keyboard.

Actual Guide use

The live color namespace groups use manifest-filtered keys in the adopted shared component.

Open /guide/colors
Utility groups table
GroupUtility keysDescription
General paintbg, background-color, fg, color, accent-color, fill, filterUse palette steps and base hue aliases for broad paint decisions.
SurfacessurfaceUse surface roles for panels, cards, overlays, and inverse blocks.
Line rolesb, bt, br, bb, bl, bx, by, border, border-color, outline, outline-color, strokeUse line roles for borders, dividers, outlines, and strokes before falling back to palette colors.
Text rolestext, fg, color, caret-color, text-fill-color, -webkit-text-fill-color, text-decoration, text-decoration-colorUse text roles for readable foreground hierarchy and interaction states.
Effects and strokesshadow, box-shadow, text-shadow, text-stroke, text-stroke-color, backdrop-filterUse color tokens where paint appears inside effects or stroke utilities.

Only the table presentation is being considered. The Guide’s surrounding explanation and token palette remain intact.