# Typography

Two typefaces, one cohesive system. **Rethink Sans** for display and impactful headings. **DM Sans** for all UI text: body, labels, buttons, inputs. Every style maps to a token used identically in Figma and CSS.

<Tabs>
<Tab title="Overview">

<div class="dh-families"><div class="dh-family"><em>Display / Headings</em><div class="dh-family-sample" style="font-family:'Rethink Sans',ui-sans-serif,sans-serif;font-weight:800">Ag</div><strong>Rethink Sans</strong><span class="dh-family-weights">400 · 500 · 600 · 700 · 800</span><p>Used exclusively for Display and Headline categories. Brings personality and visual impact to large-scale text without sacrificing legibility at high weights.</p></div><div class="dh-family"><em>Body / UI</em><div class="dh-family-sample" style="font-family:'DM Sans',ui-sans-serif,sans-serif;font-weight:400">Ag</div><strong>DM Sans</strong><span class="dh-family-weights">400 · 500 · 600 · 700 · 800</span><p>The workhorse of the UI. Used for Body, Button, Label, Input, and Tooltip. Optimised for small sizes and high-density layouts — reads cleanly at 11px.</p></div></div>

```dh-principles
#006aff | Tokens, not raw values | Every type style is a named token. Font size, weight, and line-height are bundled — never set individually. Use the token, not the number.
#189f60 | Two families, strict roles | Rethink Sans is for impact. DM Sans is for function. Mixing them outside their designated categories breaks visual hierarchy.
#820ad1 | Weight is semantic | Weight within a type style is fixed by the token. Bold is reserved for headings and emphasis — don't apply it to body or label styles arbitrarily.
```

## Category roles

```dh-usage
Display | Rethink Sans | Hero headlines, onboarding titles, verification outcomes at large scale. | 
Headline | Rethink Sans | Section headers, modal titles, step titles within a flow. | 
Feedback | DM Sans | Real-time capture guidance shown over the camera. | 
Body | DM Sans | Paragraphs, descriptions, and supporting copy. | 
Button | DM Sans | Labels inside primary, secondary, and tertiary buttons. | 
Label / Link / Tooltip | DM Sans | Form labels, inline links, and tooltip copy. | 
```

</Tab>
<Tab title="Scale">

## Display

```dh-type-ramp
desc: Rethink Sans. Hero moments and top-level screen titles.
D1 | Rethink Sans | 80/84 | 800 | -1.5 | Verify identity
D2 | Rethink Sans | 48/50.4 | 800 | -0.5 | Verify identity
```

## Headline

```dh-type-ramp
desc: DM Sans. Section and card titles inside product surfaces.
H1 | DM Sans | 32/36.8 | 700 | -1.5 | Keep a neutral expression
H2 | DM Sans | 24/27.6 | 700 | -1 | Keep a neutral expression
H3 | DM Sans | 20/23 | 700 | -0.5 | Keep a neutral expression
H4 | DM Sans | 18/20.7 | 500 | -0.5 | Keep a neutral expression
H5 | DM Sans | 16/18.4 | 500 | -0.5 | Keep a neutral expression
```

## Feedback

```dh-type-ramp
desc: DM Sans. Real-time capture guidance shown over the camera.
L | DM Sans | 24/28.8 | 700 | -0.5 | Ensure good lighting
S | DM Sans | 18/21.6 | 500 | -0.5 | Ensure good lighting
```

## Body

```dh-type-ramp
desc: DM Sans. Paragraphs, descriptions, and supporting copy.
M Bold | DM Sans | 14/18.2 | 700 | 0
M Regular | DM Sans | 14/16.8 | 400 | 0
S Bold | DM Sans | 12/15.6 | 700 | 0
S Regular | DM Sans | 12/15.6 | 400 | 0
```

## Button

```dh-type-ramp
desc: DM Sans. Labels inside primary, secondary, and tertiary buttons.
M | DM Sans | 18/18 | 500 | 0 | Continue
S | DM Sans | 14/14 | 500 | -0.5 | Continue
M Underlined | DM Sans | 18/18 | 500 | 0 | Continue
```

## Label, Link and Tooltip

```dh-type-ramp
desc: DM Sans. Form labels, inline links, and tooltip copy.
Label M | DM Sans | 14/14 | 700 | 0 | Date of birth
Link M Bold | DM Sans | 14/17.5 | 700 | 0 | Learn more
Link S Bold | DM Sans | 12/15.6 | 700 | -0.5 | Learn more
Link S Medium | DM Sans | 12/15.6 | 500 | 0 | Learn more
Link M ExtraBold | DM Sans | 14/17.5 | 800 | 0 | Learn more
Tooltip M | DM Sans | 16/18.4 | 500 | -0.5 | Position your face in the frame
```

</Tab>
<Tab title="Usage">

```dh-usage
Display | D1–D2 | Reserved for hero surfaces and top-level screen titles; inside product UI, start hierarchies at Headline. | Onboarding hero, Success screens
Headline | H1–H5 | Section and card titles. Pick the level by hierarchy, not by the size you want — sizes follow the scale. | Screen titles, Card titles, Section headers
Feedback | L, S | Real-time guidance over the camera; L for the primary instruction, S for secondary hints. | Capture overlay, Liveness hints
Body | M, S | Paragraphs and supporting copy; Bold variants only for inline emphasis, never for headings. | Descriptions, Help text, Legal copy
Button | M, S | Button labels; M for standalone CTAs, S for compact and inline buttons. | Primary CTA, Secondary actions
Label / Link / Tooltip | M, S | Form labels, inline links, and tooltip copy — never re-purpose these for body text. | Form fields, Inline links, Tooltips
```

</Tab>
</Tabs>