Typography
Three families do three jobs: a display face with character for titles, a quiet grotesque for reading, and a mono for labels, values and code. One scale, set in rem, grows with the reader’s text size.
Families
| Family | Token | Use |
|---|---|---|
| Bricolage Grotesque | --f-display | Titles, numbers that matter, the wordmark. Variable width and optical size. |
| Hanken Grotesk | --f-body | Reading text, controls, fields and model output. |
| JetBrains Mono | --f-mono | Labels, keys, values, units and code. |
Model output is set in the body family at the size of the text around it. Authorship is carried by colour, never by a different typeface or italics.
Scale
Each step has one job. Sizes that depend on the screen use clamp(), so a title fits a 390 px phone and still has presence on a desktop.
--t-hero · Wordmark, shown at half size · palette
--t-large · Page title · Large title
--t-1 · Section title · Every screen has three authors
--t-2 · Heading · Best practices
--t-3 · Subheading · Card title
--t-body · Body · The tenant may end the lease at year three.
--t-callout · Callout · Fields, buttons and list rows.
--t-sub · Subhead · Supporting text in cards and tables.
--t-foot · Footnote · Notes, captions and chips.
--t-cap · Caption · Timestamps and fine print.
Model text
Pigment is a gradient laid over text, so it needs strokes thick enough to carry colour.
- Set model text at weight 560 to 600 in body sizes, and 700 or more in titles.
- Keep model text at the same size and family as the person’s text beside it. A model reply isn’t a different kind of writing; it has a different author.
- Don’t italicise model text. Italics already mean emphasis, titles and foreign words.
- Use tabular figures wherever model values sit in columns, so changed numbers don’t jostle their neighbours.
Text size
Every size in Palette is in rem, so the whole interface scales with the reader’s choice. Settings offers three sizes: 100%, 112% and 125%. Layouts reflow; nothing is clipped.
- Never set text in px. Spacing in px is fine; text in px ignores the reader.
- Test every screen at 125% on a 390 px phone.
- Keep reading measure near 44 rem (about 70 characters). Long lines tire the eye; short ones break model text into fragments.