Typography tokens

Typography tokens package family, size, weight, line height, and letter spacing into complete DTCG composite values. Keeping the recipe together prevents individual properties from drifting and preserves a coherent hierarchy across components and content.

Albert Sans is the reading typeface for body copy, metadata, and control labels. Geom is the display typeface for heading levels, giving prominent content a distinct voice without compromising the legibility of longer text.

Heading one — a fluid page title

Heading two — a fluid section title

Heading three — a fluid subsection title

Heading four — a fluid nested title

Body large — an approachable introduction

Body — readable interface copy at the default size

Body small — supporting interface copy

Label — compact, emphatic control text

Caption — supplemental metadata

Font sizes use bounded clamp() expressions, so they respond smoothly without breakpoint jumps. Four heading steps establish page through nested-content hierarchy. Three body sizes prioritize sustained reading, while label and caption typography cover compact controls and supplemental metadata.

The generator emits the CSS font shorthand and letter spacing separately. Always apply both:

.article {
  font: var(--aidsgn-typography-body);
  letter-spacing: var(--aidsgn-typography-body-letter-spacing);
}

Components use semantic --aidsgn-typography-* variables. Each semantic typography token directly aliases one primitive --aidsgn-font-* composite; the generator also preserves the paired letter-spacing reference.