Foundation

Typography

Type families, scale, line height, and tracking for Concrete reading and product UI.

Use Jakarta for interface density and reserve Fraunces for editorial display moments.
typography
DOM renderImage render
TypographyDefault
Typographic rolesDisplay / sans / mono
Concretedisplayeditorial display
Research noteh2section hierarchy
Dense product copy stays legible at interface scale.bodydefault UI copy
Run auditlabelcontrols and metadata
catalog.render("default")monocode and traces

Playground

Foundation examples are token specimens. The route stays registry-led so every foundation can be rendered, linked, and screenshotted through the same catalog surface.

Loading playground

Rendered matrix

Every state maps to the same foundation render route through the state query param.

Default

Jakarta carries product UI while Fraunces stays reserved for display moments.
Typographic rolesDisplay / sans / mono
Concretedisplayeditorial display
Research noteh2section hierarchy
Dense product copy stays legible at interface scale.bodydefault UI copy
Run auditlabelcontrols and metadata
catalog.render("default")monocode and traces
Render state

Scale

The public type scale spans display, editorial, interface, labels, and traces.
Type scale11px through 120px
Aadisplay120px
Aahero72px
Aah148px
Aah232px
Aah320px
Aaarticle17px
Aabody15px
Aalabel13px
Aacaps11px
Aamono13px
Render state

Mono

The mono family is reserved for commands, traces, tokens, and compact metadata.
Trace typographyJetBrains Mono
task.foundation.colors.defaultrender route: /render/foundation/colors?state=signalsresult: visible, typed, registry-backed
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription