Foundation

Ten families, each with steps 25 → 900 and a main alias. Steps 25/50 are surfaces, 100/200 light accents, 300/400 borders and hover, 500 the default, 600–900 text and dark chrome. Toggle the theme to see the dark overrides: info and primary swap ends so that the same step keeps the same role.

Semantic aliases

Components reference roles, not ramps, wherever a role exists. These are the names that dark mode actually overrides; most components never touch a ramp directly.

Typography

Avenir Next at three weights (500, 600 and 700, each with its italic), with Twemoji Mozilla for emoji; nothing lighter is loaded. The default is sm (0.875rem, 14px at the desktop root size) at weight 500; it accounts for 62% of all text sites, so it is the value you get with no attributes at all.

Spacing

A 0.25rem (4px) base, in rem so it scales with the root size (16px desktop, 20px tablet and mobile). Named steps map to the style guide: tight, standard, field group, card content, section, page.

Radius

Role aliases (control, card, menu, dialog) are what components use.

Elevation

Six steps. Cards rest at xs and lift to sm on hover; menus and popovers use lg; dialogs use 2xl.

Sizing

Motion & layering

… glyphs compiled into sprites/icons.svg as <symbol>s by build-sprite.mjs from icons.txt. The sprite holds every Tabler icon the system uses, a Tabler equivalent for every Blueprint icon the classic app uses, and the classic app's own glyphs (folders, tasks, collections, workflow templates) ported from its SVG bundles as custom/ symbols. sprites/classic-map.json maps each legacy name to its symbol. Click a glyph to copy its markup.

# 1. add the Tabler name to design/sprites/icons.txt (kebab-case; "-filled" picks the filled set)
echo "rocket" >> design/sprites/icons.txt
# 2. rebuild
node design/sprites/build-sprite.mjs
# 3. use it
<svg class="qf-icon"><use href="sprites/icons.svg#rocket"/></svg>

Themes

The theme is a token override: data-theme="dark" on <html> redefines the color and shadow tokens inside the same tokens.css, so every part follows without a rule of its own. There is one skin, classic, and it is the whole stylesheet set: css/classic/ reproduces the GWT QAction app: 13px text on a #FAFAFA page, the navy #10477E band with chip tabs, the pale left menu with bold #000F9F entries, a cyan hover and a green selection mark, 24px bold buttons with 2px corners, #0B568D framed panels, grids and menus with a #B8DEFA header row, orange row hover and periwinkle selection, and 5px-radius dialogs with a 20px navy header. No rule contains a [data-skin] selector: the values live in tokens.css and the geometry tokens cannot express in the layer files. Pages carry data-skin="classic" on <html> for scripts.

The QEditor editors' tokens (spec §2.1 F9–F19), in tokens-office.css, imported right after tokens.css. App accents derive only from the QFlow palette (owner decision Q8) and are set by [data-app]; every app is also named by its glyph and label, so color is never the only cue. The classic skin paints the ribbon tab row with the app's chrome color. Hex stays in --qf-palette-*; the measured contrast of each accent is recorded next to it in the file.