Colors

Gelium color is semantic: components consume roles such as canvas, foreground, primary, border, focus, and status rather than hard-coded brand values. The swatches below use the live tokens, so changing ?theme=basecoat or the server-rendered light/dark scheme updates the same markup.

Roles and states

Keyboard focus is a role, not a color afterthought: the link below uses the primary pair and gets the theme's focus ring on :focus-visible.

Focus this link with Tab

Rules

• COLOR-ROLE: use semantic foreground/background pairs; never infer text contrast from hue alone.
• COLOR-CONTRAST: verify text and non-text contrast for the active theme; status must not be communicated by color alone.
• COLOR-FOCUS: preserve --ui-color-focus-ring, --ui-focus-thickness, and --ui-focus-offset for keyboard visibility.
• COLOR-SCHEME: theme selection is server-rendered (?theme= and ?scheme=dark), with no client-side palette swap required.

Light and dark guidance

Material and Basecoat both provide .theme-dark variants. Keep markup and semantic roles unchanged; the theme changes token values and color-scheme. Test canvas, surface, primary, danger, status, border, and focus in both schemes. Do not assume a light token is safe on a dark surface, and do not use transparent state layers as the only focus indicator.

Sources and Gelium adaptation

• W3C WCAG 2.2, 1.4.3 Contrast (Minimum) and 1.4.11 Non-text Contrast: Gelium keeps semantic pairs and an explicit focus token for both themes.[1][2]
• USWDS color tokens: Gelium adapts semantic roles and theme-level overrides to --ui-color-*.[3]
• Material 3 color roles: Gelium uses the role-based idea, while retaining its own token names and server-rendered theme switch.[4]

See also: Themes, Accessibility, Tokens.