Display heading

Section heading

Subsection heading

Detail heading

Body copy uses the sans stack at --text-base with --leading-body line height. Reading is more important than density. Inline link, inline code, and strong emphasis follow.

Muted small text uses --text-muted for secondary information.

Primary action Secondary Ghost

default success warning error

Type	Use for	Status
spec	Implementation plan	stable
pr-explain	PR review writeup	stable
design	Component prototype	draft

function tokens() {
  return { bg: 'var(--bg)', text: 'var(--text)' };
}

Artifacts that accept input must include an export button. Pattern:

btn.addEventListener('click', () => {
  navigator.clipboard.writeText(JSON.stringify(state, null, 2));
  toast('Copied');
});