/* ============================================================ LEVRG v3 — TOKENS, BUILT FROM SCRATCH ------------------------------------------------------------ DIRECTION CHANGED MID-BUILD, and the reason is recorded because it is the whole argument for the palette. The first cut was a dark "operations console" — near-black, monospace chrome, one electric-green signal. It was grounded in the agency references (Koto, Readymag, KODE, Raw Materials). Then the founder pointed at Amplemarket, Stripe and Acctual and said "looks amazing". Those, plus Attio, Midday, Symbolic and Vizcom, are unanimous: LIGHT, warm, generous, with floating product chrome and scattered proof. The dark console was solving for the wrong reference set, so it went. ⚠️ CORRECTED. The first cut used a warm off-white (#FAFAF9) and argued in this very comment that a 1% cast was not really cream. The founder had already said no cream grounds. Writing the objection down and then shipping it anyway is not flagging a risk, it is overriding an instruction with extra steps — so the ground is now PURE #FFFFFF and every neutral with it is a true grey, no warm cast anywhere. Grounded in Mobbin, per token group: Amplemarket warm-white ground, medium-weight display at large size, scattered floating proof cards Attio pill badge over the headline, faint dotted grid, product panel floating with small UI chips Midday a row of pill tags under the actions Symbolic centred hero, product below Stripe restraint: one accent, lots of air ============================================================ */ :root { /* ---------- GROUND ---------- Warm by 1%, not by 6%. Enough that the page is not clinical, far short of the cream that reads as a template. */ --paper: #F6F7F8; /* the page ground — Z's hero colour, now the whole site */ --paper-2: #EBEDF0; /* tinted panels — must read AGAINST --paper, not match it */ --paper-3: #DDE0E5; --white: #FFFFFF; /* ---------- INK ---------- */ --ink: #0F0F0F; --ink-2: #3F3F3F; --ink-3: #6B6B6B; /* #9AA09C measured 2.66:1 on a white panel — it was carrying every row note, timestamp, table header and section label, and every one of them failed AA. It is now a TEXT grey that clears 4.5:1; --line handles the jobs it was wrongly doing (hairlines, dots). */ --ink-4: #6E6E6E; --line: #E5E5E5; --line-2: #D4D4D4; /* ---------- BRAND ---------- Green, because the wordmark is green and never has been anything else. Deep enough to sit on warm white at 8.5:1, so it works as link text and not only as a button fill. */ --brand: #0B6B42; --brand-hot: #00A855; --brand-lift: #12894F; --brand-wash: #EAF6F0; --brand-line: #C3E4D3; /* ---------- ACCENTS ---------- Amplemarket scatters proof cards in several hues. Used ONLY on the scattered chips, never as UI state. Neutralised with the ground — no warm/cream cast left in the set. */ --tint-1: #FBE9E6; --tint-2: #ECE8FA; --tint-3: #EAF3FB; --tint-4: #E8F5EE; --tint-5: #1C1C1C; --alarm: #C6412A; --alarm-dim: #A82F1A; --alarm-wash: #FBECE9; /* ---------- TYPE ---------- Manrope, not the ultra-bold grotesk of the last system. Every reference in this set sets its display at MEDIUM weight and large size — Amplemarket, Attio and Symbolic all do — and that is what reads as composed rather than shouted. Plex Mono keeps the labels; Inter carries running text. */ /* Manrope until S143. The founder's read — "too curvy" — is a fair description of the face: Manrope is a ROUNDED geometric, circular bowls and very open terminals, which at hero size reads soft and friendly rather than built. Archivo is a grotesque in the News Gothic line: flatter curves, squared terminals, tighter apertures. It also agrees with IBM Plex Mono, which the data rows already use — both are drawn for information rather than for warmth, so the page stops speaking in two accents. League Spartan is also on disk and was NOT chosen: it is Futura-derived and more circular than Manrope, so it moves the wrong way. */ --display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Founder, S143: "use the Jane Morgan font" — the customer name inside the job sheet, which measured as Inter 600. So the display face IS the body face, one weight up. That is a position, not a shortcut: the site now has ONE typeface plus IBM Plex Mono for data rows, and the artefacts stop speaking in a different voice from the page around them — which was a real inconsistency while the headline was a serif and the job sheets were Inter. Five faces were rejected on the way here, each for a different reason. Keeping the list so the loop is not re-run: Manrope — "too curvy": rounded geometric, circular bowls Archivo — "not very bold": a grotesque draws presence from weight, and weight was what had to come down Instrument Serif — "too classical": high-contrast serif reads old Gabarito — picked, then reconsidered Bricolage — picked, then reconsidered All five are still on disk and type.html still renders all eight candidates on the real hero block. */ --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace; --w-display: 600; /* exactly what "Jane Morgan" is set in. Inter 600 is a semibold, not a black — it reads as weight without being the blunt 700/800 that got Archivo rejected. */ --track: -0.035em; --t-mega: clamp(44px, 6.6vw, 92px); --t-xl: clamp(32px, 4.2vw, 60px); --t-lg: clamp(25px, 2.7vw, 38px); --t-md: clamp(19px, 1.7vw, 24px); --t-body: 17px; --t-sm: 15px; --t-xs: 13px; --t-mono: 12px; /* ---------- SPACE ---------- */ --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px; --s9: 176px; --max: 1200px; --gutter: clamp(20px, 4vw, 56px); /* ---------- GEOMETRY ---------- Generous, not square. Every reference in this set runs soft — Amplemarket's cards are ~14px, Attio's panel ~12px. */ --r: 10px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; /* The job sheets have carried a hardcoded 3px since the hero was built — square corners because they are PAPER, not cards. S143, founder: the buttons should match. Naming it makes the relationship explicit instead of two files coincidentally agreeing on a number, and means changing the paper radius moves the buttons with it. */ /* The single accent, founder-locked S143. FILL-ONLY on light grounds — see the measurement table in heromocha.css before using it as type. */ --accent: #DECBB6; /* A WARM off-white ground, lighter than the page paper and warmer than it. It started as the hero gradient's exact 30% stop (#FCF9F6) and the founder asked for lighter, so that provenance no longer holds — saying it does would be the kind of claim that reads as reasoning and is just stale. It is now simply the lightest warm ground on the site — one step off #FFFFFF, keeping a trace of the cream cast so the section still belongs to the hero's palette rather than going cold. ⚠️ THIS IS THE END OF THE ROAD. The only lighter value is pure white, and white is not available here for a reason that is not taste: the artefact cards in this section are `--white`, so a white ground makes card and ground the SAME COLOUR and the cards survive on their 1px border and shadow alone. At #FFFEFC there are still 3 units of separation doing that job. Going further does not make the section lighter, it makes the cards disappear. */ --paper-warm: #FFFEFC; /* THE HERO'S RAMP, RUN BACKWARDS. Founder-directed: sections below the hero go mocha at the top to white at the bottom — the hero's exact four stops with their positions mirrored (100−62=38, 100−30=70), so the two ramps meet edge to edge at #DECBB6 and the page reads as one continuous wash rather than two gradients that happen to share a palette. One declaration, because a mirrored gradient is the kind of thing that gets re-typed slightly differently in the third place it is used. */ --ramp-down: linear-gradient(180deg, #FFFFFF 0%, #FCF9F6 30%, #F1E4D8 62%, #DECBB6 100%); --ramp-up: linear-gradient(180deg, #DECBB6 0%, #F1E4D8 38%, #FCF9F6 70%, #FFFFFF 100%); /* The same palette as a diagonal WASH, for objects rather than sections. It ends on #DECBB6 deliberately: every text colour sitting on the mocha was solved against that exact value, so keeping it as the darkest stop means a gradient can be swapped in without re-solving a single one of them. Lighten the other end freely; darken this one and the labels have to move. */ /* THE SLAB BLACK, founder-directed (#030202). Deeper than --paper's warm black (#14100E) and used only as the GROUND of a black section and the dark end of the strip beneath it — the two have to be the same literal or the join between them is a visible edge across the full width. A token, not two hex values in two files, for exactly that reason. */ --slab: #030202; --wash-mocha: linear-gradient(135deg, #F4E9DE 0%, #E8D7C4 46%, #DECBB6 100%); /* THE ACCENT, AS TEXT. `--accent` is the hero's mocha and it is a LIGHT colour — it exists to read against a near-black ground. Used as type on paper it measures 1.4:1, which is not a colour choice, it is invisible. A separate token rather than a per-callsite fix: whichever theme is on, "the accent, legible as text" now resolves to something that is, so the next label that reaches for it is correct without anyone remembering. */ /* ⚠️ #8A6A42 until S145, where the harness measured it FAILING the thing this token exists to guarantee: 11px mono labels on the warm band ground came out at 4.13 against a 4.5 requirement, on every width including desktop. Darkened by 2.5 points of HSL lightness — same hue, same saturation — which measures 4.60 on the band, 4.92 on a card and 5.54 on white. The failure was uniform across five sections (.vpipe__k, .vtc__who, .hzp__n, .msa__n and the s02b/ s04b/s04c/hero20 eyebrow labels), which is the argument for fixing the TOKEN and not the callsites. */ --accent-ink: #81633E; --r-paper: 3px; --r-btn: var(--r-paper); /* ---------- ELEVATION ---------- Long and soft, so a panel floats on paper rather than sitting in a box. Attio's product shot is the model. */ --lift-1: 0 1px 2px rgba(16,18,17,0.05); --lift-2: 0 4px 14px -6px rgba(16,18,17,0.10); --lift-3: 0 18px 48px -20px rgba(16,18,17,0.22), 0 2px 6px rgba(16,18,17,0.04); --lift-4: 0 40px 90px -40px rgba(16,18,17,0.30), 0 3px 10px rgba(16,18,17,0.05); --fast: 150ms; --base: 280ms; --slow: 640ms; --ease: cubic-bezier(0.22, 1, 0.30, 1); } @media (prefers-reduced-motion: reduce) { :root { --fast: 0.01ms; --base: 0.01ms; --slow: 0.01ms; } }