Typography
Inter throughout, three weights, line heights in even pixels. The token export names a style by its metrics and ships no role aliases, so the table below is the mapping: which kind of thing takes which style. Seven of the export's twenty styles appear inside a generator region — the rest belong to the platform's own marketing and landing pages.
| Style | Metrics | Carries |
|---|---|---|
16-semibold | 16 / 600 / 22 | Dialog titles only |
14-medium | 14 / 500 / 20 | Buttons, rail headings ("Templates", "AI Generate") |
12-medium | 12 / 500 / 16 | Property-card titles, segmented items |
12-regular | 12 / 400 / 16 | Field labels, values inside inputs, select text, helper text, alert and dialog body |
11-regular | 11 / 400 / 16 | Thumbnail labels, "View all" |
10-medium | 10 / 500 / 14 | The selected tool-rail label |
10-regular | 10 / 400 / 14 | The unit suffix, and a tool-rail label at rest |
Each style at its real size, carrying the kind of thing it is for. Only two of the seven are above 12px, and the four 10–12px steps differ by weight rather than by size — that is what keeps a 320px rail readable without making it tall.
The panel is built on 12px
Labels, values and card titles all share 12px. The hierarchy inside a card comes from weight (card title 500, field label 400) and from position (header row above, field rows below), not from size. 14px is reserved for the two things that have to read from across the room: a button and a rail heading.
Three layers inside one card: card title 12 / 500 / text-primary, field label 12 / 400 / text-primary, value inside the input 12 / 400 / text-secondary. What separates them is weight and colour, not size — so the panel never grows taller as it grows richer.
Raising the field register to 14 makes every row 4px taller and a 320px rail lose a card of content. Field labels, values and helper text all share 12-regular, so a generator that needs bigger text moves the whole register up one step — to 14-regular — and accepts the taller rows. There is no way to raise one of them and not the others, which is the point.
Numbers
Values always use tabular-nums: equal-width digits keep 200, 3 and 12 aligned in a column of 92px inputs, and a value does not jitter sideways as it changes. The unit sits at the end of the same field as its own element, in 10-regular; it never becomes a column of its own.