Scene

One scene of the landing page’s story: a numbered kicker, a heading, one paragraph, the command as a command button and the example in a slot. The example sits on the surface itself: no border, no card chrome.

Kicker, heading, paragraph, command, example

Light

02 · The pull request shows the differences

There are differences to review. DTA knows whether tokens caused them.

dta diff renders the stories before and after and names the token behind each change.

$dta diff

this changeLaunch order · 12 min

Graphite

02 · The pull request shows the differences

There are differences to review. DTA knows whether tokens caused them.

dta diff renders the stories before and after and names the token behind each change.

$dta diff

this changeLaunch order · 12 min

Story: /stories/scene/default/

Guidelines

• The kicker is number · title in mono weight 500 and action-text (AAA on the canvas in both themes).
• One heading, one paragraph (fg-muted, 44 characters wide at most), one command. Nothing numbered beyond the kicker.
• The example takes the right column by default (example="right"); scenes alternate with example="left". On phones the copy comes first and the example stacks under it.
• Scenes are space-36 apart on desktop; the page, not the scene, sets that.

Tokens used

Read from the component’s source:

--action-text--fg-default--fg-muted--font-mono--font-sans--space-10--space-16--space-2--space-4--space-6--type-body-line-height--type-body-size--type-heading-letter-spacing--type-heading-line-height--type-heading-size--type-heading-weight--type-meta-line-height