Typography | Arcadia Design

Ramp

Nine steps, each a size, a line height and a tracking; the values are measured live, in px.

Step	Sample	Size	Line	Tracking
	Key caps, gutter numbers and captions
	Section labels, badges and code
	Rows, menus, pills and pickers
	Conversation, the composer and tool lines
	Markdown h3, a lead
	Markdown h2, settings titles
	Markdown h1, a section
	Page titles
	A public page's one statement

Roles

--type-* shorthands name a role: weight, size, line height and family.

Role	Sample	Size	Line	Weight
	2m ago
	Recent
	Rename project
	Fix the flaky settings test
	The release spring brings a pressed button back with a 2.8% overshoot: felt rather than seen, and never in the way of the next click.
	Settings
	Checkpoints
	Typography
	Projects
	Recent
	const turn = await agent.run(prompt);
	473k tokens, synced 5m ago, v0.1.0
	The harness is the lever.

CSS

.settings-title {
  font: var(--type-heading);
  letter-spacing: var(--tracking-2xl);   /* shorthands set the font only */
}

Weights

Four weights.

Rename

418

Rename

460

Rename

500

Rename

600

Legibility cut

One OpenType feature, on everywhere: SF Pro's cv05, a capital I with serifs, so Il1 and ILineItem never collide in identifier-heavy prose. It lives in --font-features.

Il1ILineItemIDisposable

Without it

Il1ILineItemIDisposable

The kit default

Geist Mono has no cv05, and neither do Segoe and the other fallbacks, so code needs no exclusion and other platforms keep their own I. There are no slashed zeros; numbers in readouts use tabular-nums, which the cut does not touch.

CSS

/* type.css, @layer overrides: every `font:` shorthand resets features, so the token is
   re-applied on every element, after the kit and every product layer */
*, ::before, ::after { font-feature-settings: var(--font-features); }

/* a subtree that wants other features sets the token, never the property */
.terminal-output { --font-features: normal; }

Links

Links are ink, told apart by a quiet underline rather than a colour. The accent is kept for lights.

The release spring is described in the motion notes. On hover the line brightens, like this. File paths such as src/routes/settings.tsx stay in the neutral ranks.

Token	Use	Value
	text-1: links are ink.
	Ink at 30%: a quiet line under the ink.
	text-1: on hover the line brightens to full ink; the text stays.
	The underline's weight.
	Clear of the descenders.

A bare <a href> in running text (p, li, dd, blockquote, figcaption and table cells) gets this from base.css. Anything with a class is a component and styles itself with the same tokens; heading links and navigation stay plain.

Families

The system stack for text, so SF Pro on Apple platforms and the native UI face elsewhere, at no download.

Token	Sample	Stack
	The quick brown fox	-apple-system, SF Pro Text, Segoe UI, system-ui
	bun test --watch	Geist Mono, SF Mono, ui-monospace, Menlo, Consolas

Conversation text (15/24) renders untracked; UI text (13/18) tightens by 0.08px. Code is Geist Mono at 12/19, a terminal's line; inline code inside prose is --font-size-code-inline: 0.867em, so 13px in 15px text. Geist Mono is the variable cut (100 to 900) under the SIL Open Font License, embedded in the kit's stylesheet.