# Theme Themes and token foundations: colour, typography, spacing, radii, shadows, semantic planes, component recipes, and documented texture behavior. page plane raised plane inset plane hairline between rows dotted 2px row rhythm structure: section, header, nameplate ember: the present tense editorial emphasis interaction 0.75rem / captions, kbd, footnotes 0.875rem / small UI, table cells 1rem / body 1.125rem / wordmark, deck 1.375rem / sub-headings 1.75rem / section headings 2.25rem / page headings 3rem / post titles 4.5rem / display only nameplate display and page titles display headings, compact UI body and decks prose reading text nameplate floor display section titles headings body captions, kbd mono labels, wordmark cooper corbett nameplate / mono 700 / lowercase / front page only Design system display / sans / tight leading / display tracking A drafting-board interface with visible construction. page-title / sans / responsive title scale Founder and product engineer in Australia. cover / sans / the front page's cover line Primitive token to semantic alias section-title / sans / snug leading Overlay surface pair subheading / sans / compact panel headings Themes and token foundations stay inspectable without becoming route-local utility piles. lead / sans / normal leading Role classes own family, size, line-height, weight, and tracking while tone remains separate. body / sans / normal leading Dense catalogue notes remain readable without local type utility piles. body-small / sans / dense descriptions Email address label / sans / form and control labels caption / source path / package export caption / mono / loose tracking 20 Sep 2026 slot / mono / dates, periods and routes in the gutter Foundations mono-label / uppercase / catalogue eyebrows \--text-4xl--line-height code / mono / compact technical identifiers .type-nameplate The front page's title, once per site. .type-display Hero and design-system introduction titles. .type-page-title Route titles, post headers, and long page headings. .type-body Default prose, page copy, and route explanations. .type-slot Dates, periods and routes hung in the page gutter. .mono-label Eyebrows, source labels, dates, and technical metadata. 0 2px / chips, kbd, tags, favicon 4px / buttons, inputs 6px / cards 8px / dialogs, popovers flat page canvas; no texture ordinary content plane; no texture standalone panel; no texture contained secondary plane; no texture floating interactive plane; no texture rare editorial plane; paper texture allowed page canvas, prose, controls \--bg / --fg base semantic reference Card, Surface content, inventory rows \--bg-elevated raised surface pair DropdownMenu, Select, Combobox, Tooltip, AlertDialog ui-overlay-surface overlay surface pair Button default, brand emphasis \--primary-foreground primary control pair editorial emphasis, focused menu items \--accent-foreground emphasis pair links, focus, live UI \--ring interaction reference surface semantic tone + border + foreground Ordinary panels and catalogue specimens; no texture. overlay popover pair + border-strong + shadow-pop + z-index layer Popup menus, selects, comboboxes, tooltips, and dialogs. control control fill + control foreground + focus ring + compact radius Buttons, triggers, and compact command surfaces. feature feature tone + paper pseudo-layer + readable content Documented /design specimen only; never ordinary cards or controls. A drafting-board interface with visible construction. The sans face carries prose and headings. The mono face is reserved for dates, labels, code, numerals, and the site identity. v0.1.0 \--font-mono Aa composite token anatomy Typography roles are composite tokens: each role binds family, size, line-height, weight, and tracking while tone stays separate. responsive specimen A deliberately long route title that has to wrap without touching the next line of copy. page-title / narrow frame / balanced wrap dense example Compact catalogue text stays legible at control density. mono-label + body-small + caption long code stress \--type-page-title-letter-spacing remains readable beside captions, labels, and dense metadata. caption mono code tone="canvas" Flat page canvas. This role establishes the quiet background and never receives texture. tone="base" Ordinary content plane for unframed route sections. It remains quiet in both themes. tone="raised" Standalone panel with a tonal step and hairline boundary, without decorative texture. tone="inset" Contained secondary plane for dense metadata, code, and secondary information. tone="overlay" Opaque interactive plane for menus, dialogs, and other floating UI. Texture is not allowed. tone="feature" texture="paper" Rare editorial plane. Paper is a decorative layer behind content, removed for print and stronger-contrast modes. primitive token semantic alias reference \--bg quiet page canvas \--bg-elevated raised panels and cards \--bg-sunken code, loading, inset states signal material The field prints in one place only: a framed plate, a keyline and a paper gap around a night ground. It is a 4 x 4 ordered dither on 2 CSS px cells with four ink levels. A plate is tuned to a frequency taken from its route, so the same page always prints the same plate, and a new frequency retunes it in four dither steps. It drifts for eight seconds after arriving or retuning, then holds a still frame. The page around it is flat paper: nothing prints behind text. threshold order Theme Themes and token foundations: colour, typography, spacing, radii, shadows, semantic planes, component recipes, and documented texture behavior. themes primitive and semantic colour Primitive scales stay available for inspection. Components use semantic tokens so light and dark themes are a token flip. relationships primitive token to semantic alias Primitive tokens name raw scales. Semantic aliases and references carry product meaning, then components consume those semantic relationships. type fonts and scale The default reading face carries prose and headings. The mono face carries identity, dates, code, labels, and numeric texture. spacing spacing, radii, and shadows The system favors a 4px spacing ladder, small architectural radii, and hairlines before elevation. surfaces semantic planes, texture, and signal material Primitive color inputs feed semantic roles. Surface recipes choose those roles; paper texture is restricted to the feature specimen. The signal material is app-owned, outside the package API, and marks only generated content, never the reading surface. composites composite token recipes Composite tokens are repeated token relationships: surface, overlay, control, and feature recipes that combine related decisions. home design theme cooper corbett