Tokens · Token families

Typography

The three font stacks, the type scale in rem, and the smallest size each kind of text may use.

--luz-font-sans System sans 400 600 700 italic
--luz-font-serif ET Book 400 600 700 italic
--luz-font-mono System mono 400 700 italic

--luz-text-xs 0.75rem · 12px Light, Usable & Zero-dependency
--luz-text-sm 0.875rem · 14px Light, Usable & Zero-dependency
--luz-text-md 0.9375rem · 15px Light, Usable & Zero-dependency
--luz-text-base 1rem · 16px Light, Usable & Zero-dependency
--luz-text-lg 1.25rem · 20px Light, Usable & Zero-dependency
--luz-text-xl 1.5625rem · 25px Light, Usable & Zero-dependency
--luz-text-2xl 1.9375rem · 31px Light, Usable & Zero-dependency
--luz-text-3xl 2.4375rem · 39px Light, Usable & Zero-dependency
--luz-text-4xl 3.0625rem · 49px Light, Usable & Zero-dependency

--luz-type-base1rem · 16pxThe size of --luz-text-base, and the base the other steps are computed from
--luz-type-ratio1.25The multiple between two steps above the base, and the divisor below it

Two knobs size the whole scale. Set them on :root, in rem, in CSS of your own; a knob set on body or on a section changes nothing. Components read the --luz-text-* steps, never the knobs.

Font roles

--luz-font-bodyvar(--luz-font-serif)Running text: the serif. Controls, labels, tables and navigation keep the sans
--luz-font-headingvar(--luz-font-serif)Heading font family
--luz-text-bodycalc(var(--luz-text-base) * 1.0625)Running text, 17px at the defaults: a step above the base, because ET Book's x-height is small. It follows the base knob
--luz-text-controlvar(--luz-text-md)Form field text; at least 16px (max(1rem, --luz-text-base)) at 768px and below and on touch screens

The first three ship with tokens, with the switch to the sans on an element marked lang="ar"; --luz-text-control ships with core.

Type scale and minimum sizes

Every size is in rem, so text follows the font size the reader sets in the browser, not only page zoom (WCAG 1.4.4). The scale is the same at every viewport width: no breakpoint makes text smaller. Above the 16px base each step is the one before times 1.25, rounded to 1/16 rem (a whole pixel at the default); below it are the readability floors. The Formula column is the chain as the stylesheet writes it; a browser that has round() rounds each step to 1/16 rem, which gives the Value column.

Font-size tokens
Token	Formula	Value	At 16px root	Use
`--luz-text-xs`	`max(0.75rem, calc(var(--luz-text-sm) / var(--luz-type-ratio)))`	0.75rem	12px	Absolute floor. Micro-copy only: badges, tags, counters, version labels. Never running text.
`--luz-text-sm`	`max(0.875rem, calc(var(--luz-text-base) / var(--luz-type-ratio)))`	0.875rem	14px	Floor for secondary and UI text: helper and error text, captions, table headers, breadcrumbs, tooltips.
`--luz-text-md`	`calc((var(--luz-text-sm) + var(--luz-text-base)) / 2)`	0.9375rem	15px	Default UI text: buttons, labels, table cells, tabs, navigation.
`--luz-text-base`	`var(--luz-type-base)`	1rem	16px	The base of the scale, and UI text at a larger size. Form fields on touch screens. Running text is `--luz-text-body`, a step above it.
`--luz-text-lg`	`calc(var(--luz-text-base) * var(--luz-type-ratio))`	1.25rem	20px	Lead paragraphs, dialog titles.
`--luz-text-xl`	`calc(var(--luz-text-lg) * var(--luz-type-ratio))`	1.5625rem	25px	Headings.
`--luz-text-2xl`	`calc(var(--luz-text-xl) * var(--luz-type-ratio))`	1.9375rem	31px	Headings.
`--luz-text-3xl`	`calc(var(--luz-text-2xl) * var(--luz-type-ratio))`	2.4375rem	39px	Page titles.
`--luz-text-4xl`	`calc(var(--luz-text-3xl) * var(--luz-type-ratio))`	3.0625rem	49px	Display.

Body text is --luz-text-body (17px at the defaults), with a line height of 1.6.
Secondary and UI text is never below --luz-text-sm (14px).
Nothing goes below --luz-text-xs (12px). Sizes relative to their context (kbd, time, output, inline code, captions) are clamped with max() so they cannot fall below the floor inside small text.
Form fields use --luz-text-control (core setting): --luz-text-md on desktop, max(1rem, var(--luz-text-base)) at 768px and below and on touch screens, never under 16px, where iOS Safari zooms the page into any smaller field.