Foundations

Typography

One scale, composed as `font:` shorthands so size, weight, line-height and family travel together.

Families

Inter (--font-family-base) is the interface face and carries everything in the product. Gabarito (--font-family-brand) is the brand face, scoped to marketing surfaces — it is deliberately kept out of the builder and CMS chrome. A system monospace stack (--font-family-mono) handles code and token names.

The scale

Type tokens are complete font: shorthands, not loose sizes. Naming --text-heading-m gets you the weight and line-height that go with it, which is what stops a heading drifting a step out of the scale.

Display--text-display-lMarketing hero
Heading XL--text-heading-xlPage titles
Heading L--text-heading-lSection titles
Heading M--text-heading-mSubsections, card titles
Heading S--text-heading-sPanel and group headings
Body large--text-body-lLead paragraphs
Body regular--text-body-rDefault body copy
Body small--text-body-sDense copy, captions
Body extra small--text-body-xsMetadata
Label M--text-label-mField labels
Menu item--text-menu-itemNav rows, menu items
Overline--text-overlineUppercase section eyebrows
const code = true;--text-codeCode and token names

The shorthand trap

The font: shorthand resets letter-spacing to normal — it does not carry it. Any token that needs tracking has to set it as a second declaration:

.thing {
  font: var(--text-overline);
  letter-spacing: var(--font-tracking-label);
}

Write the two together or the tracking silently goes missing — nothing errors, the text just sits slightly wrong.