← Design system

Emphasis

Each scope redefines --fill-*, --ink-*, --stroke-*, and --accent within itself. Components don't know which scope they're in — they just use the tokens. None is the default — the resting state. Alternate bounces against None to create rhythm. Focused brings something forward. Muted is a dull spot that takes a back seat. Immersive takes over.

Default

No data-emphasis — the page-level token defaults stand.

Attention voice

New

Calm voice with an example link.

Auxiliary voice — April 11, 2025


data-emphasis="alternate"

Attention voice

New

Calm voice with an example link.

Auxiliary voice — April 11, 2025


data-emphasis="focused"

Attention voice

New

Calm voice with an example link.

Auxiliary voice — April 11, 2025


data-emphasis="immersive"

Attention voice

New

Calm voice with an example link.

Auxiliary voice — April 11, 2025


Nested scopes

The next four sections are wrapped in a section-group with data-emphasis="alternate". All subsections inherit it unless they override; overrides don't leak past the inner section.

Attention voice

New

Calm voice with an example link.

Auxiliary voice — April 11, 2025


Second section — still alternate.

Attention voice

New

Calm voice with an example link.

Auxiliary voice — April 11, 2025


Override: focused.

Attention voice

New

Calm voice with an example link.

Auxiliary voice — April 11, 2025


Back to alternate — overrides don't leak.

Attention voice

New

Calm voice with an example link.

Auxiliary voice — April 11, 2025