Skip to content
Design Token Authority

Token cycle

A word under a redline whose tag names the type token that styles it. It cycles through a few styles, on click and every two seconds: the weight glides along the variable font’s axis, a change to or from italic swaps under a short fade (italic is its own font file), the redline is drawn again and the token name pops in. Click the word in the examples to see it change.

A word and the token that styles it

Light

Built for humans and agents.

Graphite

Built for humans and agents.

Story: /stories/token-cycle/default/

Guidelines

Section titled “Guidelines”
  • One per page, in the hero: it shows what DTA is about, a token changing what you see.
  • Three or four styles: weights within the font’s range (400 to 700) and italic. The names on the tag are illustrative.
  • Decorative: the word stays plain text, so a heading reads as written. Hovering pauses it; reduced motion turns the automatic change and the animations off. Weight glides and the redline redraws over motion.duration.slow; the tag pops over base.
  • Stories set autoplay={false}, so screenshots are stable.

Tokens used

Section titled “Tokens used”

Read from the component’s source:

--action-bg--font-mono--motion-duration-base--motion-duration-fast--motion-duration-slow--motion-ease-enter--motion-ease-standard--radius-sm--signal-bg--signal-fg--space-1--space-2--space-8--stroke-redline--token-style--token-weight--type-redline-line-height--type-redline-size--type-redline-weight