Design System
Every module, every size, every color - one page that shows itself
Show, don't describe. The page is its own documentation.
Metrics
- baseUnit (px)
- 256 — The major ruler stride. Every module width, height, and gap snaps to a multiple of this unit. One major square = 256×256. Scales with viewport via baseUnitFor() in src/lib/world-layout.ts.
- text column (2u)
- 512 — TEXT_UNITS × baseUnit. The flex-wrap column where header, pullquote, metrics, cards, longform, demo, media, and widgets stack vertically. Echoes sits at 1u (256px) - the single-major narrow strip.
- right column (5u)
- 1280 — SCENE_UNITS × baseUnit. Where scene, gallery, process, and launch (talks only) live. Absolutely positioned to the right of the text column.
- domain colors
- 6 — games #a855f7 · ai #60a5fa · philosophy #f472b6 · tools #fbbf24 · research #22d3ee · personal #fb923c. Defined in src/lib/fractal-layout.ts.
- presence states
- 5 — unseen · glanced · read · dwelled · returned. Classifier in src/lib/presence.ts - thresholds live as tokens for tuning without rewriting the state machine.
Cards
- Foundations
[VOICE - Baki to revise] Grid, scale, brackets — the substrate every module snaps to. Start here when you need to know why a frame lands where it does.
- Color
[VOICE - Baki to revise] Six domains painted in light. Neutrals, opacity, shadows, glows — the warm-painterly side of the palette.
- Type
[VOICE - Baki to revise] Type as breath, type as scale, type as hand. The type-scale, the iconography, the calligraphic register.
- Motion
[VOICE - Baki to revise] Every frame enters with its own delay and duration. The cascade, the easing, the timing tokens — kinetic register.
- Presence
[VOICE - Baki to revise] Five states, one modifier layer, the room remembering you. Visitor presence + the energy-viz overlay sit here.
- Module
[VOICE - Baki to revise] Every tile this site can show, all in one place. Storage modes, sizing rules, the editability matrix — the architectural reference.
What this is
A self-demonstrating reference▍.Everymodule you see on this page is the same component every other page uses - rendered from frontmatter, sized by the same grid, colored by the same six-domain palette. The page is its own documentation.
Using this as a reference
Any time you’re building a new entry, the frontmatter schema in src/content.config.ts
tells you exactly what can drive which module. The module list and heights live in
src/lib/world-layout.ts. The render switch is at the bottom of
src/components/InfiniteCanvas.tsx (search for function ModuleRenderer). Change a
default here and every page picks it up - that’s the whole point of rendering from
declarative frontmatter instead of per-page components.
If you want a module to appear that isn’t listed in your frontmatter, you can’t - add
the hook. If you want it not to appear, delete the frontmatter field. If you want to
reposition it without deleting it, use module_positions. If you want to edit its
content, append ?edit=1 and check the editability matrix below.