Documentation
Foundations
Typography
Seven text styles, each a class with the same name as its Figma text style. Every line height sits on the 4 px grid, so text and controls line up.
Text styles
Put the class on any element: the style says how text looks, the element says what it is. A section title can be an <h2> with dsgn-heading on one page and dsgn-heading-s on another.
Invoices paid on time
Invoices paid on time
Invoices paid on time
Invoices paid on time
Invoices paid on time
Invoices paid on time
Invoices paid on time
| Class | Size | Line height | Weight | Use for |
|---|---|---|---|---|
.dsgn-display | 32 px | 40 px | 600 | The one big title of a landing page or an empty state. |
.dsgn-heading | 24 px | 32 px | 600 | Page titles. |
.dsgn-heading-s | 20 px | 28 px | 600 | Section titles inside a page. |
.dsgn-title | 18 px | 24 px | 600 | Card, dialog and panel titles. |
.dsgn-body | 16 px | 24 px | 400 | Running text. |
.dsgn-body-s | 14 px | 20 px | 400 | Dense UI text, table cells, secondary text. |
.dsgn-caption | 12 px | 16 px | 400 | Labels under images, timestamps, legal lines. |
Helpers
Three classes cover the rest: dsgn-lead for intro paragraphs, dsgn-muted for secondary text and dsgn-eyebrow for the small label above a heading.
Billing
Invoices
Everything you sent this year, newest first.
Updated 5 minutes ago.
<div class="dsgn-stack" data-gap="s">
<p class="dsgn-eyebrow">Billing</p>
<h2 class="dsgn-heading">Invoices</h2>
<p class="dsgn-lead">Everything you sent this year, newest first.</p>
<p class="dsgn-body-s dsgn-muted">Updated 5 minutes ago.</p>
</div>The font
dsgn sets text in Inter. Fonts are not bundled, so load it yourself (see Load the fonts). A project theme can switch to another family; the sizes and line heights stay, so a different font never shifts the layout grid.
Sizes are in rem-based units: when a reader sets a larger default font size in the browser, all text grows with it, and the 2 px grid snapping keeps it sharp.