system.cssthe engine GitHub

Components

Menu
HomeHow-toEngineComponentsLand & streamChartsAdvancedLabDemosSkills
OverviewONE file, one spineThe painter modelThe cascade constitutionLayoutComponentsSemantic hue locks vs number formattingThe rhythm ladderAuthoring checklistView transitions & the FOUC ledgerThe form canonUtilities

COMPONENTS (styled semantics + a few classes)

.card (lifted surface panel), .tag (small pill; pair with a hue helper), .avatar, .crumbs (--type: -3, a crumb is a BARE link — the recipe restates nothing base owns, gf-334), .tree (nested lists of links), .tabs / .tabs-underline (the latter is the GitHub underline treatment; icon-aware, .count pill support), .button-group, .nav-item / .nav-icon, .drawer (+ .left/.right/.top and .glass), .modal, .menu (popover), .search-box (icon+input+kbd as one control), .icon (THE icon-only square — explicit class, aria-label required; never rely on selector inference), section.owns-scroll (a component-scrolled section that stops clipping — how every full-height roster is built; overflow-y:auto clips BOTH axes, which is why corner badges shear without it), .roster (THE SERVER-DRIVEN TABLE: one class on the div holding a roster's head, form and table; truncating cells, the hugging column model with .clip absorbers, tonal head and hover, 1lh head controls that wake on hover, the shadowed .scroll-x — all CSS over server markup, zero client state), .focus-fab, .glass (the surface at --glass-alpha over a --glass-blur of what is behind; 0.65 is a dialog over its dimmed backdrop; an overlay that must read over anything — a toast — wears 0.88; quiet is ink, never opacity on glass: opacity multiplies into it), .hud overlay slots (t/c/b row × l/c/r column; corner slots pad 1lh, the centre none — a scope zeroes it when the top row must be one line, gf-358; a .fab-1/2/3 inside a .hud is frozen to 2.4lh), .wash (gf-359 — a viewport-fixed underlay of two soft pools in the surface's own colour; :has(> .wash) makes the HOST a stacking context so the pools paint above its surface and under its content; the second pool is a real CHILD at --hue-shift: 30, never a pseudo — the engine resolves --_bg per element), .county-map (an engine recipe demoed in the lab only since gf-364's picker paints by --fg groups).

Anatomy glyphs are DECLARED boxes: flex-frozen, exempt from the reset's fluid max-inline-size cap (the 4px-glyph bug), and .icon self-centers — a square control never stretches. Know what a class IS before composing it: .sec is a skin-layer BUTTON voice — on a wrapper it paints a ghost box (the gf-46 button-group scar). Voices, locks, and recipes attach to specific anatomy.

Dialogs are native

at a rung of the content ladder (.content-2 by default · .content-1 the confirm · .content-3 the workbench, all glass, top-pinned), opened and closed in HTML — the button wears commandfor="<dialog id>" command="show-modal", a bare close command="close" (Invoker Commands; never a script lookup of the dialog — a verb that posts THEN closes is Datastar's @post(…); el.closest('dialog').close(), gf-572) — and dismissed declaratively (closedby="any"; data-preserve-attr="open" is MANDATORY on every dialog on a live page — a push morphs the whole page and closes it under the person (gf-357)). popover + popovertarget drive menus — and a closed .menu popover must get display:none, never opacity alone (opacity leaves hidden menus in the tab order).