clemvault internals production August 4, 2026

Design Hub

A design reference library where every entry carries a rule an agent can follow, plus a ledger of which project used it.

AstroTypeScriptZodPlaywrightYAMLCloudflare Pages
The collection. Each card leads with the capture and closes with the payload: how many principles it carries, and how many projects have used it.
The collection. Each card leads with the capture and closes with the payload: how many principles it carries, and how many projects have used it.
A reference page. Every principle states the rule, the evidence on the page, and where it stops working.
A reference page. Every principle states the rule, the evidence on the page, and where it stops working.
Every brand system in the vault, and whether its decisions have a recorded source. Currently none do.
Every brand system in the vault, and whether its decisions have a recorded source. Currently none do.

A library of design references where nothing is stored without a reason attached, and a ledger recording which project used which reason.

The Problem

Every project in this vault has a design/brand.md and a tokens.css. They pin down values: this hex, that spacing step, this font. An agent given those files still produces generic work, because the files say what the values are and say nothing about what was rejected to arrive at them. Tokens carry no taste. Everything the tokens do not cover gets filled in from model defaults, and model defaults are the same everywhere.

Measuring the two most-visited surfaces made the size of the gap concrete. The games hub ships 592 hardcoded hex literals across 227 distinct colours, and the ten most frequent are the Tailwind default ramp. The marketing site looks compliant at 478 var() usages, but its canonical token file is never imported: the shipped stylesheet is a separate hand-kept copy missing every font and radius token, so those are hardcoded by name instead.

A folder of screenshots does not fix this. An agent cannot read a JPEG at generation time, and a screenshot records no decision.

What It Is

Two views of one dataset.

The references are sites worth stealing from. Each one carries principles written as imperatives, and each principle states three things: the rule, the evidence on the page that demonstrates it, and where it stops working. That last field is the one that matters. “Set section padding to 96px minimum and never compensate by tightening line-height” is a rule. “Uses generous spacing” is a preference.

The borrow ledger records what was actually done with each principle: which project, which surface, one sentence in past tense, and whether it was kept or reverted. Reverted entries are required rather than tolerated. A ledger of only successes records taste that was never tested.

Both compile to inspiration-index.json, which is what the inspiration-library skill reads before any UI work in the vault. It resolves in both directions: which references informed a project, and which projects used a principle.

Precedence Is Fixed

The skill states a five-rank ladder and does not renegotiate it per session. The target project’s own brand file always wins. The sourced principles rank below it. The slop tells, a list of specific defaults this vault refuses, act as negative constraints that yield to the brand file. Generic taste skills rank last and are advisory.

Two inversions get named explicitly, because both were observed in practice. A slop tell is not a veto over a brand file: when they disagree, the brand file wins and the tell does not apply. And a generic skill’s aesthetic advice never outranks a brand file, which the code-reviewer agent previously guaranteed it would, by handing out three taste skills while forbidding the agent from reading brand files at all.

Nothing Publishes Without a Human

A reference stays invisible until a human confirms it. Draft entries are excluded from the site, from the index, and from the deployed assets. The capture pipeline writes the measurements and leaves every judgment field blank, and the command that runs it is forbidden from filling them in.

This is enforced in three places rather than documented in one:

Accessibility Found Two of Its Own Bugs

Shipping this added a design and accessibility stage to the vault’s pre-launch audit, checked against a running server rather than source files. Contrast, keyboard operability, visible focus and form labels block a launch; the rest warn.

Its first run was against this site, and it failed. Two colour tokens shipped under the WCAG AA floor: the muted text token at 4.04:1, used for captions, table headers and the sourced count, and the draft badge at 3.91:1 against its own tinted fill. Both were darkened and re-measured clean.

The audit tool itself was wrong twice before it was right. It scored a dark banner with white text at 1.01:1, because these tokens are authored in oklch() and the browser returns oklch() unchanged, so scraping numbers out of the string read lightness and hue as red and green. Then it scored a translucent badge against its own unblended fill instead of compositing it over the page behind. Only after a self-check asserting that black on white is 21:1 and white on white is 1:1 were any of its numbers worth acting on.

Current State

Live, with two confirmed references and two still in draft. The projects page reads 0 of 9 sourced, which is the honest state: every brand system in the vault has made its decisions already, and none of them yet cite where the decision came from. Closing that gap is the point of the ledger, and it is deliberately manual.

Development timeline

18 logged updates over 11 days, 30 Jul 2026 to 9 Aug 2026.

  1. Two ways to measure this site wrongfix

    Neither of these is a defect in the site. Both are ways a future session will read it wrongly, and both produced a confident wrong answer before being caught.

  2. Canvas UI borrow, Liquid as a catalogued specimendocs

    Copy-in source via the shadcn registry model, so there is no runtime dependency on the library and no npm package was added. 25,464 bytes raw, 6,444 gzipped as source.

  3. The ledger stops being emptyfeature

    First borrow recorded. Verified resolving in both directions on the live site: /project/campping lists the reference and the outcome, and the reference page's "Applied in" table lists the surface and the applied sentence.

  4. The type system was decorative, and Preflight was load-bearingfeature

    An /impeccable critique + audit pass on the homepage, run on the newly upgraded skill (upstream v4.0.4). The mechanical detector returned clean before and after; everything below came from reading the source and then measuring the result…

  5. the seven own surfaces, and a stale branch caught by checking productionfix

    Captured the seven live Wanessa Labs / Lists of 30 surfaces into the library: games.wanessalabs.com, books.listsof30.com, wanessalabs.com/projects/, app.listsof30.com, travel.listsof30.com, recipe.wanessalabs.com, kalimba.wanessalabs.com.…

  6. a leak caught by asking what would actually go publicfeature

    Before shipping, checked what a deploy would contain rather than what the pages render. A deploy would therefore have published all four unconfirmed third-party screenshots at guessable URLs while the references themselves were correctly…

  7. custom domain live, a soft 404, and the portfolio pagefeature

    design-hub.wanessalabs.com attached by Clemens. Verified over HTTPS: 200, two confirmed cards with images, the mark loaded, no dev banner.

  8. D2 reversed, the galleryfeature

    Requested directly, with land-book.com as the model.

Show the earlier 10 entries
  1. deployed, and the first two references confirmedfeature

    Live. Cloudflare Pages project design-hub (not design-wanessalabs, renamed to match the subdomain and the convention every other project here follows), Production on main, https://design-hub-3vy.pages.dev.

  2. Phase 4 (partial), the skill that reads the corpusfeature

    Branch feat/design-system-v2, worktree .claude/worktrees/design-system-v2.

  3. session closefeature

    vault-kanban reads the frontmatter, so the board would have shown this in Active Build indefinitely. Corrected to production / 2026-08-04.

  4. the reference detail page, the projects ledger view, and a build-only bugfix

    Reference detail gained a Captures section. Not a dependency: sharp is already in the tree via Astro but it is a native module with an open CVE noted above, and pulling it into page rendering for two integers is a bad trade.

  5. the ship gate, and what it caught on its first runfeature

    launch-readiness had no design or accessibility stage at all. Seven sections covering secrets, transport, SEO, performance, analytics, legal and manual QA, and nothing about the interface.

  6. Phase 2, capture pipeline and four seeded referencesfeature

    Slop tells 3, 6, and 8 were checked against the seven brand token files before this session touched anything else, and one was wrong. Tell 8 ("more than two font families") had been marked vault.

  7. Phase 3, the Astro sitefeature

    A real constraint catch before writing the token-rendering component. Rendering a captured site's actual typeface in its card would mean loading a third-party webfont at runtime from this deployed static page, which is exactly what the…

  8. Decisions D1 to D5feature

    On D5, what was ruled out and why. Clemens asked for capture in the site's own UI rather than a Claude Code command.

  9. Phase 0 auditdocs

    design-hub/ did not exist. Greenfield, no path conflict.

  10. Phase 1 data modelfeature

    Three additions to the specified schema.

Written from this project's decision log as work happened, not afterwards. See every project →

What's next

3 open items

Plans, not promises. Taken from this project's own roadmap, last updated 31 Jul 2026.