Styleguide
Tokens come in three layers: primitives (raw scales), semantic roles(what components use, theme-aware) and component recipes. Toggle the theme to see the semantic layer switch.
Semantic colours
surface
surface-raised
surface-sunken
fg
fg-muted
fg-subtle
border
border-strong
accent
accent-hover
accent-subtle
accent-subtle-fg
highlight
highlight-subtle
hero-from
hero-to
ring
success
danger
Primitive scales
brand
50
100
200
300
400
500
600
700
800
900
950
teal
50
100
200
300
400
500
600
700
800
900
950
neutral
50
100
200
300
400
500
600
700
800
900
950
Typography
Display
Headline
Heading 4xl
Heading 2xl
Lead paragraph, text-lg.
Body copy in the sans font. Muted text. Subtle text.
Serif sample.
Mono sample: const x = 1;
Components
Eyebrow
Hero surface
Dark brand gradient with highlight glow, in both themes.
Success notice
Danger notice
Feature card
Used in service and feature grids.
Card
Raised surface, border and shadow from tokens.
Consent embed
Dieser Inhalt wird von YouTube bereitgestellt. Beim Laden werden Daten wie Ihre IP-Adresse an YouTube übertragen.
Radii and shadows
- sm
- md
- lg
- xl
- full
- sm
- md
- lg
Tokens: sm, md, lg, xl, full