Just Another Day in CA
The design system, rendered from the stylesheets themselves — 156 tokens parsed live. Change a token, re-run the generator, this page follows.
This page is the web team's read of the campaign's design, written down so it can be corrected. It is for whoever owns the creative at Misfit, and for anyone at GO-Biz or Change Craft who needs to see what the site is currently built on.
What we are asking: tell us where we read it wrong. Every colour and the display face below were reverse-engineered from creative boards, not handed to us — so every value here is a candidate, not approved brand canon. Corrections are the point of sending it, and they are cheap to apply. Misfit owns the creative.
What it costs you: about fifteen minutes of skimming. There is nothing to fill in and nothing to approve — the fastest useful reply is a list of the values that are wrong. Sections 1 and 3 are where a correction changes the most.
1 · The accent slot
The accent is a slot, not a colour. The creative fills it per execution — the same headline appears in orange on one board and lime on the next — so nothing in the system may hard-code one. A page sets a default, a section may override it, and no component ever declares its own.
The two that do not rotate
The mark's own colours, read out of Misfit's production vector rather than sampled off a board render — the only two values on this page that are not candidates. Neither is part of the rotation.
The rotation set
Two grades of evidence, and the badge tells you which. The ten tagged named by Misfit are typeset and named in their 2026-08-26 draft guardrails — still a draft, not approved, but read off a label rather than guessed from a pixel. The rest are our own readings sampled off board renders, kept because they are what the draft answers and because the guess was wrong in an informative direction: it was fluorescent, and the named family is earthy. Shown small and separated — at swatch-book size these hues read louder than the campaign ever is.
At the area it actually occupies
The accent doing the two jobs it is allowed to do — a rule, and a field behind one display line. Roughly the share of a surface it holds on the boards, and the reading to carry away rather than the grid above. The same specimen appears on each ground so the only difference is the ground and the accent.
One component, every accent
Identical markup. Only --jad-accent changes — and in none of
them does it carry a word.
2 · Colour
Ground is white — the LED-board family, not the pitch-era navy. Ink is near-black and carries the entire contrast burden.
Ink
Lines
3 · Type
"Archivo", "ITC Franklin Gothic LT Pro", "FranklinGothicLTPro-DmCm", Impact, Haettenschweiler, "Arial Narrow Bold", "Helvetica Neue", system-ui, sans-serif
4 · Space
Linear, 4px base.
--jad-space-0
0
--jad-space-1
4px
--jad-space-2
8px
--jad-space-3
12px
--jad-space-4
16px
--jad-space-5
20px
--jad-space-6
24px
--jad-space-7
28px
--jad-space-8
32px
--jad-space-9
36px
--jad-space-11
44px
--jad-space-12
48px
--jad-space-16
64px
--jad-space-18
72px
--jad-space-21
84px
--jad-space-section
clamp(48px, 6vw, 64px)
--jad-space-section-lg
clamp(48px, 6vw, 72px)
5 · The wordmark
Misfit's production vector, arrived 2026-08-18. Two colour slots, one asset. The eighteen type paths take the page's own text colour; the California bracket takes a variable. Set the variable and the mark is the two-colour lockup; leave it unset and the whole mark collapses to a single ink — which is the knockout case, so the fallback is the design rather than a degradation.
Both states are the same file. The mark is never placed as an image — an image cannot take the colour the page asks it for.
6 · Voice
- Campaign — dry, comparative, confident. The headline and the lead claim, at the top of a page.
- Talking points — formal, sourced, checkable. Everything below.
7 · What we have built with it
- Written down Documented here in full, and the build checks it on every change.
- In the build Part of the design system and live on the site. Not yet written up in full.
- Not yet agreed Live on the site, but the design system does not list it. Shown as a question rather than as canon.
- Named, not built Part of the design system on paper; nothing has been built yet.
One rule governs all of them: reach for the piece that was built for the job, not a general one bent to fit. Where two pieces are easy to confuse, each entry below says which is which. Everything inside a white frame is the system, lifted from the live site; everything around it is this page. Links inside the frames do nothing, and the CANDIDATE bar every real page carries is suppressed inside them — this page states it once, at the top. Nothing else about a specimen is changed.
Claim block Written down
A figure from GO-Biz, shown with where it came from, when it was published, and exactly what it measures.
The default claim — figure, statement, source line.
Its other states
Liftable — Adds two copy controls. Used on the champion takeaway of each sector page; the home page's two claims are deliberately not liftable.
Liftable
With a comparison — A second line naming what the figure is being compared against. Renders only when both the comparison value and its measure exist — never a half comparison.
With a comparison
Unlinkable source — A source with no public URL renders as plain text with its reason stated, at the same rank as a linked one. Eight of these exist today. Never a dead link.
Unlinkable source
The first primitive codified (claim.contract.md, 2026-08-18). Twelve render-time assertions in the build's verify chain.
Sector hero Written down
The opening of a sector page: the sector's name, and immediately beneath it the single strongest sourced figure for that sector.
Sector hero, holding the sector's lead claim.
ds-binding.md names 'sector proof block' but not the hero pairing itself — the closest declared category, claimed here. Worth settling when slot 5 next moves. Codified 2026-08-20 (sector-hero.contract.md, eight render-time assertions). Note the mismatch this specimen cannot show: `purpose` above describes the sector name and the figure together, and the two are DOM SIBLINGS — the specimen lifts .sector__hero, which holds only the claim.
Sector section head In the build
The heading that opens each band of a sector page, with an optional one-line introduction under it.
Section head — this one opens the proof block.
Its other states
With an intro line — Used once per sector page, above the liftable claims, to say what the reader can do with them.
With an intro line
Three declared modules share one treatment. That is a real finding rather than a simplification — if the three should look different, this is where to say so.
Contact block In the build
The 'talk to a real person' band: a short list of topics, each opening the state's own page for it.
Contact block, with its topic list.
Route-out list In the build
The 'looking for something else?' band at the foot of a sector page — two ways out for a reader who is on the wrong page.
Route-out list, two destinations.
ds-binding.md lists both a 'route-out' and an 'honest-routing block' under sector modules. This is the route-out; the card-shaped routing block below appears only on index pages. Which name was meant for which is unresolved.
Press path In the build
A single line pointing a reporter from a sector page to the press materials.
Press path line.
Home hero Not yet agreed
The opening of the home page: a short label above the campaign's lead line.
Home eyebrow and lead line.
Home hero
Sector card Not yet agreed
One sector, as a tile in a grid — its name, linked. Nothing else.
Sector card as it appears on the home page.
The card carried an "Argued against {state}" line under the name until 2026-08-26. The Campaign Throughline (08.20.26) retired rival-state naming from the campaign's voice outright, so the card is name-only and the emitter no longer reads rival_state at all.
Sector grid Not yet agreed
The eight sector cards, laid out together.
The sector grid, all eight cards.
Proof call-to-action Not yet agreed
The one filled button on the site, sending a reader from the home page to the sourced figures.
Proof call-to-action.
Routing card Not yet agreed
A card that names a kind of reader, says in one line what is there for them, and links out to it.
Routing card.
Its other states
Longer copy — The resources page carries a longer version of the same two cards, because a reader arriving there has already left the campaign's argument behind.
Longer copy
Possibly what ds-binding.md means by 'honest-routing block', which is filed under sector modules — a page it never appears on.
Index page head Not yet agreed
The heading treatment for the two index pages.
Index page head.
Press-hub row Named, not built
A dated press item with its provenance and a link to the asset, ungated.
The press hub ships in its empty-at-launch state: a lead paragraph and a link to the figures. No row component exists in the build or in either stylesheet. This is a stated absence in the build's own source, not an oversight.
Site header Written down
The bar every page opens with: the skip link, the wordmark, and the primary navigation.
Site header. The skip link sits above the wordmark and is invisible until a keyboard reaches it, so it is correctly absent here.
Codified 2026-08-21 (site-header.contract.md, fourteen render-time assertions). The three rules above were asserted in prose and checked by nothing until then — RA15 held on 17 of 17 pages and nothing would have said so if it stopped.
Wordmark set In the build
The campaign's mark, in four lockups for four situations.
Only variant B, the two-line horizontal lockup, is wired into the theme. Variants A (stacked), C (one-line) and D (brandmark alone) are comped in the repo and are not part of the build. The direction pick is still open.
See section 5 above for the production lockup at size, in both colour states.
Capture block Named, not built
An email opt-in.
No capture markup, class, or style exists anywhere in the build. It is declared in the design system and correctly unbuilt: there is no destination to send an address to. Listed here so its absence reads as a decision.
tools/gen-styleguide.py from
theme/assets/tokens.css + theme/assets/candidate.css
on 2026-08-27. Not hand-authored — re-run the generator rather than editing this file.