Colophon
Type, color, space, motion, and components · 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.
Customize-panel color templates
Six named (color, type-pairing) bundles from AMBIENT_THEMES, shown by day. Picking a template clears any lingering type or accent override so the applied result matches its thumbnail exactly.
Type tokens
9-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).
Typefaces · two-face system
Serif (Libre Baskerville) for display and body. Mono (IBM Plex Mono) for labels, meta, and code. Sans has been removed.
Off-scale tokens (spec-faithful)
6 named tokens that intentionally fall between scale steps, transcribed verbatim from the design handoff.
Named styles
Canonical treatments. Reuse these rather than ad-hoc font declarations. Color is set separately.
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.
Motion here is short and restrained. Most of it exists only to acknowledge an interaction, not to perform for its own sake.
--duration-fastHover state, focus ring, micro-toggles.
--duration-baseBottom-bar collapse, panel slide, fade.
--duration-slowOverlay fade-up, hero reveal.
--duration-heroFeed to PDP shared-element morph, the site's one signature transition.
--page-crossfadeRoot cross-dissolve for ordinary route navs, keeping every non-hero page change short and gentle.
cubic-bezier(0.2, 0.7, 0.3, 1)--ease-primaryThe default curve for nearly everything: palette transitions, ambient wash, chrome panel slides.
cubic-bezier(0.16, 1, 0.3, 1)--ease-outOvershoot-feel reveals.
linear--ease-linearIndicators: rec dot, progress bars, anything that should read as literal and mechanical, not eased.
cubic-bezier(0.32, 0.72, 0, 1)--ease-morphFeed to PDP poster morph. Ease-out-dominant, so the box travels with intention and settles long, never linear.
cubic-bezier(0.4, 0, 1, 1)--ease-morph-exitThe old poster snapshot in a morph clears the frame quickly so it stops double-exposing against the arriving hero.
Global, non-negotiable collapse. Under prefers-reduced-motion: reduce, every transition and animation duration drops to 0.01ms, iteration counts drop to 1, and scroll behavior goes instant. The rule lives once, in @layer base, and applies to every element on the site without exception.
The demos on this page mirror that policy at the JS layer too, since a replay button drives its animation imperatively rather than through page-load CSS. Each one checks matchMedia("(prefers-reduced-motion: reduce)") on mount and on change: when it's active, replay buttons stay enabled but the dot jumps rather than eases.
Reference inventory, not essays. 34 atom components across four src/components/atoms/ subdirectories, plus the grid primitives, feed-level components, and chrome.
“A system you can't explain isn't a system.”
| Component | Purpose |
|---|---|
Section | Vertical rhythm: viewport margin plus density-driven padding. |
Grid | 12-column grid container, density-driven column gap. |
Col | Column-span primitive (span, optional start, optional rowSpan). |
| Component | Purpose |
|---|---|
AmbientPortrait | Breathing silhouette portrait; renders a real photo or profile video when provided, clipped to shape. |
CommitTicker | Vertical list of recent GitHub commits: sha, message, timestamp. |
ContributionGraph | 7xN GitHub contribution grid, accent tint by intensity level. |
CrossfadeImage | Crossfades an ordered image list on an interval; locks to the first frame under reduced motion. |
IntroVideo | "Play intro" affordance opening an accessible modal video player. |
ProjectPoster | Compact project card: stripe placeholder or real image, palette-aware caption. |
RepoCard | Pinned-repo treatment, GitHub-style but editorial. |
SocialIcon | Inline social-platform icon, icon-only or icon plus label plus handle. |
StripeFill | Diagonal striped placeholder standing in until real imagery lands. |
| Component | Purpose |
|---|---|
BackLink | Mono uppercase nav link ("Back to the feed"). |
ExternalLinkIcon | Small outbound-link mark for inline use beside body-scale labels. |
FigCaption | Mono caption below a figure: text left, numbered index right. |
IdentityBar | Site-wide dark bottom bar; full (expanded) or floating (collapsed pill) mode. |
Masthead | Editorial header band: editorial (three-column) or minimal (single-line) variant. |
MetaRow | Single label/value row with a hairline rule, for spec sheets. |
OutcomeBlock | Rule-bracketed grid of metric/value pairs with an optional note below. |
OutcomeBlockAnimated | Count-up animation variant of OutcomeBlock. |
PressList | Org, title, date list; optional href and thumbnail. |
PullQuote | Serif italic blockquote, left accent bar or centered. |
ScreenFigure | Hatched placeholder figure for project screens. |
SectionLabel | Overline with optional right-aligned meta and a hairline rule. |
| Component | Purpose |
|---|---|
HighlightToQuote | Watches text selection; shows a "quote, copy link" affordance. |
NextPrevNav | Prev/next essay navigation block at the bottom of a reader page. |
ReadingProgress | Fixed scroll-progress bar; optional time-left badge. |
RelatedReading | Row of related-essay cards at the bottom of a reader page. |
SectionAnchor | Reveals a hover anchor mark on section headings. |
TableOfContents | Collapsible TOC with active-section highlight, keyboard-operable. |
| Component | Purpose |
|---|---|
CodeBlock | Deliberately minimal mono code display. |
DropCap | Large initial letter for essay lede paragraphs. |
Figure | Image or placeholder with caption; inline, bleed, margin, or plate variants. |
Footnote | Footnote marker plus the end-of-page footnote list. |
FootnoteTooltip | Hover/focus preview popover for a footnote. |
MarginalNote | Author's annotation, floats into the right margin on desktop. |
Sidenote | Tufte-style marginal note; collapses inline on mobile. |
| Component | Purpose |
|---|---|
FeedCell | Renders one of 11 cell kinds (project, writing, lab, note, sketch, contact, and more). |
LoopVideo | Muted, counted-loop video for feed posters and PDP device screens. |
FeedSegmentedGrid | The feed's segmented grid layout container. |
FeedMasthead, FeedPageControls, FeedPosterMotion, FeedLabPreview | Feed-specific chrome and motion treatments. |
PaletteLoopVideo | Palette-aware loop video variant. |
GooeyWordmark, LenticularWordmark, ParticleWordmark, VariableWordmark | Feed wordmark motion experiments. |
| Component | Purpose |
|---|---|
IdentityBar | The only persistent chrome, bottom-docked (lives in atoms/shared). |
SiteFooter | Site-wide footer: name/role/mailto on the left, socials plus theme toggle plus copyright on the right. |