px = em * px (font) em = px / px (font)
| Name | Description |
|---|---|
| Inter | Figma's default font. |
| Space Grotesk | Danny's font for headlines. |
| Roboto | Google's Material font. |
| SF Pro Display | Apple's font. |
| SF Pro Icons | |
| Helvetica Neue | |
| Helvetica |
| Class | Size | Height | Weight | Letter Spacing | Usage |
|---|---|---|---|---|---|
| Headline | 56px | 60px | 600 (Semi Bold) | -0.28px | Hero title |
| Subhead | 28px | 32px | 400 (Normal) | 0.196px | Hero subtitle |
| Heading 1 | 28px | 34px | 400 (Normal) | 0em | Page title, card title |
| Heading 2 | 22px | 28px | 400 (Normal) | 0em | Section title |
| Heading 3 | 20px | 25px | 400 (Normal) | 0em | Section subtitle |
| Heading 4 | 17px | 22px | 600 (Semi Bold | 0em | |
| Heading 5 | 15px | 20px | 400 (Normal) | 0em | |
| Heading 6 | 13px | 18px | 400 (Normal) | 0em | Card subtitle |
| Body | 17px | 22px | Body text, card content | ||
| Footnote | 12px | 16px | 400 (Normal) | 0.12px | Footnotes |
| Role | Usage |
|---|---|
| Primary | Headings |
| Primary - On Primary | Opposite of Primary |
| Secondary | Subtle Headings |
| Secondary - On Secondary | Opposite of Secondary |
| Text - Primary | Body text |
| Text - Secondary | Hint text, captions, footnotes |
| Text - Hyperlink | |
| Accent | Buttons, Links, CTAs |
| Accent - On Accent | Opposite of Accent |
| Error - Container | Error background |
| Error - On Container | Error text |
| Danger | |
| Danger - On Danger |
| Accent Background | Subtle background using a lighter tone of the accent colour | | Contrast Background | Punchy backround using a darker tone of the accent colour |