Hand this to a person or a model. Either one builds on brand.
This is the foundation under everything else in the book. Put one surface class on any section, and every child element pairs its own color automatically. Then follow a short list of hard rules and load the machine layer. A human reads it as a brief. An LLM reads it as a contract. The output looks like it belongs here either way.
The surface contract
One class · Color-on-color becomes impossiblePick the background, and the foreground picks itself. Put one of five classes on a surface and every child inside reads a small set of contract variables: heading, body, muted, kicker, border, link, and button. You never set a text color by hand, so you can never put rust text on rust or navy text on navy. Drop the same card markup into each surface below and watch all five pair themselves.
color.The default page surface.
Cream paper, bluebonnet headings, rust accents. This is the body of almost every property in the system.
Read the ruleThe default dark surface.
Bluebonnet ground, cream headings, gold kickers. Used for footers, roof bands, and feature stripes.
Read the ruleThe accent surface.
Rust ground, cream headings, gold kickers. Reserved for alerts, breaking bands, and one loud moment per page.
Read the ruleThe quiet warm surface.
A deeper sand for sidebars and pull-asides that need to separate from cream without going dark.
Read the ruleThe deepest surface.
Bluebonnet ink, gold buttons, cream headings. The bottom of the page, the heaviest band you own.
Read the ruleSame markup. Five surfaces. Zero color decisions.
Every card above shares one block of inner HTML. The only thing that changed is the .on-* class on the wrapper. That is the whole contract.
Build with this
The 10-second brief · Copy, paste, buildThis is the whole system compressed to a paste block. Drop it at the top of a build prompt, or read it yourself before you start. It assumes the machine layer in section 4 is loaded alongside it.
Build using the Luckiest Man Ventures design system. Load the tokens and follow the rules below. Use only tokens, never hardcode a hex/duration/easing. Put a surface class on every section and card. Warm editorial meets restrained neo-brutalism. Section rhythm cream to navy to cream to rust to cream, never two darks adjacent. PILL BAN (no radius over 8px on non-circular elements). --white is #fffaf0 never #ffffff. Caveat font for personality accents only. Every animation resolves to a static state under reduced-motion.
The hard rules
Non-negotiable · Enforced on every propertyIf a build breaks one of these, it is off brand no matter how good it looks. These are the lines the system does not cross.
Pill ban
No radius over 8px on anything non-circular. Cards and buttons stay sharp. Only true circular icon buttons use --r-pill.
No pure white
Never #ffffff. White is --white at #fffaf0. Page paper is --paper cream. The system has no cold white.
No white card on cream
A floating card on cream uses a hairline border and the cream-family surface, not a bright white block that fights the paper.
Section rhythm
Cream, navy, cream, rust, cream. Alternate warmth and weight. Never place two dark surfaces adjacent.
Gradients are surfaces only
If a gradient appears, it is a background surface. Never gradient text, never gradient on a rule, badge, or icon.
Caveat is accents only
The Caveat hand font is for a single personality accent, a margin note or a circled word. Never body, never headings, never UI.
No em dashes in copy
Use hyphens, commas, or two sentences. The em dash and en dash never appear in any written output, anywhere.
Reduced-motion fallbacks
Every animation resolves to a clean static state under prefers-reduced-motion. Motion is a bonus, never a requirement to read the page.
Product casing
lightbreak and greetform stay lowercase. Luckiest Man Ventures and Skip School are title case. LMV is all caps. WilCoGuide is camel case. Never improvise casing.
Warm palette only
Navy, rust, gold, cream. No cool baby blue, no neon, no off-system hex. Signature color flexes per property from the editorial pool only.
For machines
Drop the link · An AI reads it allThis page is a dual document. A human reads the brief above. A model reads the same brief plus the machine layer below. Hand an agent these four files and it has the tokens, the rules, and the worked examples it needs to build on brand without seeing this page render.
Everything above, in a form a model loads in one read.
Point an agent at these four files. The tokens carry the colors, type, and spacing. The JSON carries the same tokens in a machine shape. USE-THIS carries the rules in prose, and llms.txt is the front door that tells the model what to load and in what order. Together they are the contract.
Every color, type family, radius, shadow, and spacing step as CSS custom properties. The source of truth a stylesheet imports.
Open file → tokens.jsonThe same tokens in a machine shape. For Tailwind config, Figma variables, native token pipelines, or any agent that wants structured data.
Open file → USE-THIS.mdThe rules and the surface contract in prose. The hard rules, the casing table, the section rhythm, written for a model to follow line by line.
Open file → llms.txtThe front door for an LLM. Names the system, links the files above, and states the load order. Drop this one link and the agent finds the rest.
Open file →