Foundations

Tones

A tone is a class that sets the background and redefines every semantic token for its subtree. Wrap a band in Section tone="…" (or add tone-ink to any element) and the components inside adapt with no extra props.

tone-paper

The same markup, a different band

Default marketing band. Warm paper, the same in both themes.

liveAccentPrimarySecondary

tone-paper-2

The same markup, a different band

Alternate band, one step darker, for rhythm between sections.

liveAccentPrimarySecondary

tone-ink

The same markup, a different band

Heroes and feature bands. Dark in the dark theme, bright white in the light theme.

liveAccentPrimarySecondary

tone-night

The same markup, a different band

Ink that never switches, for code windows and media.

liveAccentPrimarySecondary

tone-violet

The same markup, a different band

The brand band: announcements and the closing call to action.

liveAccentPrimarySecondary