Typography
Instrument Sans for everything you read, condensed (font-stretch: 85%) for display sizes. Martian Mono for anything a machine also reads: commands, token names, file paths, meta labels and redline labels. Both are self-hosted.
Each style is four or five tokens (type.<style>.family, .size, .line-height, .weight, sometimes .letter-spacing). DTA writes font sizes without a unit, so CSS multiplies them: calc(var(--type-body-size) * 1px).
--font-sans"Instrument Sans", system-ui, sans-serif--font-mono"Martian Mono", ui-monospace, monospace
Redlines that compile.
display-xl · 84px / 0.95 · 700 · -0.03em · Hero headline. Set font-stretch: 85% (condensed).
Redlines that compile.
display-lg · 50px / 1 · 700 · -0.03em · Section headline, condensed.
Redlines that compile.
heading · 34px / 1.05 · 700 · -0.02em · Card group titles, condensed.
Redlines that compile.
title · 22px / 1.2 · 700 · Card titles.
Redlines that compile.
body-lg · 20px / 1.5 · 400 · Hero subline.
Redlines that compile.
body · 17px / 1.55 · 400 · Default body.
Redlines that compile.
body-sm · 14px / 1.5 · 400 · Help text, dense UI.
Redlines that compile.
label · 15px / 1.2 · 600 · Buttons, nav, form labels.
$ npx dta diff
code · 14px / 1.8 · 400 · Terminal, commands, token names.
FIGMA → PULL REQUEST
meta · 12px / 1.4 · 400 · 0.02em · Eyebrows, section marks, uppercase meta.
radius.lg · 18
redline · 10.5px / 1.3 · 400 · Redline labels only.