Skip to content

Typography

The CP uses the platform system-UI stack — no web fonts to load. Body text renders at roughly 14px with --size-line-height: 1.42em; secondary text uses --fg-subtle (var(--gray-550)). The pixel sizes here are rendered values applied at runtime — Craft doesn't expose a --font-size token, so match against the tokens that do exist (--size-line-height, --fg-subtle, and the --gray-* scale) rather than hard-coding sizes.

Heading — section title
Subheading — field group label

Body copy at the base 14px / 1.42 rhythm in --gray-700. This is the default for instructions, help text, and table cells. Links appear in sky blue.

Subtle / instructions text — --fg-subtle. Used under labels.

Monospace for code, handles & tokens

--size-line-height: 1.42em;    /* real CP token */
--fg-subtle: var(--gray-550);  /* secondary / instructions text */
/* Base font-size (~14px) is applied at runtime — there is no --font-size token */
font-family: system-ui, BlinkMacSystemFont, -apple-system,
             "Segoe UI", Roboto, sans-serif;