Components

Typography

React primitives that read straight from the type scale. Pick the size; family and weight come pre-tuned.

Heading

Premium feel.

Section heading

Subsection

tsx

<Heading as="h1" family="display" size="5xl">Premium feel.</Heading>
<Heading as="h2" family="sans"    size="3xl">Section heading</Heading>
<Heading as="h3" family="sans"    size="xl">Subsection</Heading>

Text

Primary tone, lg size.

Secondary tone, base size — body copy.

Muted tone for captions and timestamps.

Brand-coloured callout.

tsx

<Text tone="primary"   size="lg">Primary tone, lg size.</Text>
<Text tone="secondary" size="base">Secondary tone, base size — body copy.</Text>
<Text tone="muted"     size="sm">Muted tone for captions and timestamps.</Text>
<Text tone="brand"     weight="medium">Brand-coloured callout.</Text>

Eyebrow

Get started

tsx

<Eyebrow>Get started</Eyebrow>