Colophon
Type, color, space · and the small set of rules that holds them together.
Four palette moods, three type pairings, one spatial rhythm. The point of publishing the system isn't to show the work · it's to hold the work to a standard. A system you can't explain isn't a system.
Color tokens
13 semantic slots, resolved live from the active palette. Contrast ratios are computed against --color-paper.
Type tokens
13-step scale + 6 spec-faithful off-scale tokens. Specimens render in the active type pairing's display face at the exact token size (capped at 56px for layout).
Active type pairing · mixedserif
Off-scale tokens (spec-faithful)
6 named tokens that intentionally fall between scale steps, transcribed verbatim from the design handoff.
Space, form & grid tokens
8px baseline grid. Gutters, vertical gaps, and margins are density-driven and viewport-responsive. Bars are proportional to 200px max.
Gutters (column gap)
Vertical gaps (row spacing)
Viewport margins
Grid constants
Reading widths
Border radii
Border widths
Site-wide environmental layer: sun and moon arcs, diurnal palette drift, CSS gradient sky, and a single viewport foreground wash above all content (paired with the background layer). The WebGL shader renderer is parked for later revival; the CSS gradient is the shipped background. Full model in DESIGN.md §1.1.
Horizon = bottom edge of the viewport. Bodies travel east → zenith → west. Night hands off to moonlight; phase modulates cool shift and intensity. Location from browser timezone → city centroid (src/lib/ambient/timezone-centroids.ts).
| Parameter | Default |
|---|---|
| Celestial (solar) | Live sun/moon from timezone |
| Light | Day locked; sun at zenith |
| Dark | Night locked; live moon arc |
| System | Device light/dark preference |
| Parameter | Default |
|---|---|
| Background intensity | 0.7× |
| Foreground intensity | 0.25× |
| Foreground lag | 250ms |
| Preview duration | 10s |
| Color temp exaggeration | 0.95× |
| Moon influence | 1× |
| Arc height (span) | 0.95 |
| Arc curve | 0.95 |
| Arc lift | 0 |
| Warmth intensity | 1× |
| Grain intensity | 0.5× |
| Parameter | Default |
|---|---|
| Transparent feed cells | off |
| Glass feed cells | off |
| Cell border strength | 1.15× |
| Horizon band | on |
| Celestial tick | off |
| Lamp foreground | off |
| Parameter | Default |
|---|---|
| --ambient-light-x / y | Primary light on arc |
| --ambient-moon-x / y | Moon arc position |
| --ambient-surface-wash | Foreground illumination |
| --ambient-wash-color | OKLCH wash tint |
| --ambient-light-angle | Gradient direction (deg) |
Live tuning is not in the colophon · this page records what shipped. In development, use the Celestial panel (bottom-left, all routes) to dial values before baking defaults here and in DEFAULT_AMBIENT_TUNING.
Surface treatments applied to hero and structural surfaces. Kept at whisper level within the editorial restrained system. Values are baked into component CSS; adjust in the source before re-baking.
Subtle dot-dither texture on the DAB project hero paper surface. Adds quiet material warmth without competing with the device or type. The resolved opacity sits far below the perception threshold for legibility impact, so it reads as texture rather than noise.
| Parameter | Value |
|---|---|
| Pattern | 4px radial-gradient dot grid |
| Dot color | --color-accent |
| Intensity (0 to 1) | 0.64 |
| Resolved opacity | approx. 0.07 (0.015 + 0.64 × 0.085) |
| CSS var | --hero-texture-intensity: 0.64 |
| Attribute | data-texture="dither" data-dither-color="accent" |
| Component | DABLiveHero / DABLiveHero.module.css |
Live tuning is not in the colophon · this page records what shipped. To audition a new surface treatment, add a dev-only tuning panel following the CelestialTuningToolbar pattern, dial the values, then bake them into the component CSS and document the result here.