One system, documented as living pages you can see and touch. Every token, component, motion, and rule — rendered, not described. This is the front door.
The core reference. Thirty pages covering the full system — foundations, expression, motion, and the governance layers most systems never write down. Each renders its own rules live, with a spec layer for humans and an embedded layer for agents.
The warm-paper foundation. Color tokens, type, spacing, radii, and the core component gallery. The template every other theme derives from.
Open →Charcoal-rendered deltas: lifted accents, inverted tint pairing, the cursive-accent hero signature. Only what changes from light.
Open →Full-viewport snap-deck. The signature-color palette with a coining rule, self-writing cursive, and a working mini-deck.
Open →Fraunces, Inter, JetBrains Mono, and the five cursive faces rendered side by side. The hero rule and the punctuation-carries-cursive detail.
Open →The stamp, the stickmen, the pencil that writes, the social-card layout. Real SVG rendered live from the generator values.
Open →Container widths, the 8px spacing scale, breakpoints, the 12-column grid, and the reading measure.
Open →Ten 24px-grid icons, CSS-recolorable and CSS-scalable, shown live in buttons, pills, and badges.
Open →Ten pencil-register icons, wobble hand-authored (no live filter) so they stay recolorable and scalable.
Open →Five stamps, two families — ring-seals plus an arc-text certified badge. CSS-recolorable and CSS-scalable.
Open →Seven matched poses each, animated, CSS-recolorable and CSS-scalable — plus a for-fun sumo variant.
Open →A plain numbered circle, not a stamp. One color-mix() recipe recolors through every accent, at two sizes.
Open →Stages connected by an arrow that rotates and stacks on mobile. A process, not a progress bar — the stepper's counterpart.
Open →The narrative motion language: a winding board-game trail with swappable playful devices, plus a vertical dotted-box flow.
Open →The web vocabulary for teaching, by job: accordions, before/after, annotated diagrams, quizzes, callouts, steppers.
Open →The words, made consistent: sentence case, button labels, headline hierarchy, numbers, second person, honest-by-default.
Open →Three card shapes for three jobs: stating exactly two opposing positions, cataloging one entry in a growing set, and labeling something in one word.
Open →A real <dialog>, not a div pretending to be one. Backdrop-click math, native Escape, and focus return, explained.
Open →Traffic-light dots, a blinking cursor, highlighted command text. The frame for a CLI example worth running.
Open →Click a labeled region of real source, read what it does in the panel beside it. For source too dense for a static legend.
Open →Click a tab, land on one structured result. For compare-and-commit choices, not parallel facts.
Open →The rest of the field anatomy. Disabled inputs, textarea, select, checkboxes, radios — validated on blur, proven live.
Open →The header this system already had twice, written down once — plus the mobile menu neither version had.
Open →Four durations, two easings, and the reduced-motion contract. The vocabulary behind every animation, played live.
Open →The full lifecycle: hover, focus, active, disabled, loading, empty, error, success. The interface always answers.
Open →WCAG 2.1 AA with the system's real values: measured contrast, focus rings, motion policy, touch targets, semantics.
Open →The signal colors: deterministic/probabilistic, human/agent, a confidence gradient, and the rule for adding more.
Open →One token, five surfaces recolor. Which part of the system you're in, not what a color means.
Open →A row of choices, not one button's states. Pick one, the rest shift to neutral automatically.
Open →How full, not how far. A gradient fill plus a number — never a bar without its percent.
Open →Content dissolves into the header, it doesn't clip. Four layers of increasing blur, not one flat edge.
Open →The system applied. Full pages and hero explorations that put the tokens, components, and rules to work on real layouts.
The canonical conversion page: the full persuasion sequence from hero to final CTA, in the distinct marketing look.
Open →Three full-viewport compositions of the hand-crafted hero — headline-dominant, giant split, centered title-card.
Open →Three stances compared: hand-crafted & warm, bold editorial, premium & dimensional. Choosing a point of view.
Open →The working full-viewport snap-deck the slideshow theme is drawn from.
Open →The reading page the system was missing: a real essay with a working sticky TOC and progress bar, not just the parts.
Open →The working files behind the decisions — the font tests, color comparisons, and token demos where the choices got made. Kept for the reasoning, not the polish.
The five cursive faces trialed in the hero role to choose by feeling.
Open →The cursive faces compared on the capital G — the deciding glyph.
Open →Large-hero script comparison across the candidate faces.
Open →The slideshow signature palette compared, with the coining rule.
Open →Tokens applied to real spec-page components, light.
Open →The same components rendered on charcoal.
Open →Click one button, swap one file, watch the whole page re-skin. Zero HTML changes — that's the contract.
Open →Four systems, not one with appendices. This one governs how a thing looks. The other three cover whether it should exist, how it's arranged, and what it says.
Whether it should exist. Four stages — Map, Talk, Doubt, Price — that precede any design decision.
Open →How it's arranged. The layer this index and its eighteen pages already stand on.
Open →What it says. Thirteen pages, once there's something worth writing on top of this system.
Open →