DESIGN SYSTEM · 2026-08-18 · CANDIDATE

Just Another Day in CA

The design system, rendered from the stylesheets themselves — 128 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 rule that follows from the numbers, and it is the important one. Nearly every accent below fails 3:1 against white. So on light grounds the accent is decorative and the near-black type carries the contrast burden — exactly as the LED boards do. An accent may never be the only thing distinguishing a control, a state, or a link. The gate that enforces this checks presence, not value, because the next execution's colour is not knowable today.

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.

mark ink from the vector
#282828
The 18 type paths. Carries the contrast burden everywhere.
14.74:1 on white · AAA
mark bracket from the vector
#B58151
The California outline. Fixed, not part of the rotation.
3.37:1 on white · clears 3:1 non-text

The rotation set

Nine readings, not nine approved swatches. Shown small and separated — at swatch-book size these hues read louder than the campaign ever is.

amber
#FABE28
manufacturing x2; highered-01 sampled #FAAA28
1.69:1 on white · fails 3:1 — decorative only
coral
#FA645A
startups-01
2.98:1 on white · fails 3:1 — decorative only
gold
#E4B000
highered-04 LED; startups-02 sampled #FAD232
2.00:1 on white · fails 3:1 — decorative only
led-red
#F00008
the FIXED LED-digit red, not a rotation member
4.46:1 on white · passes 3:1
lime
#8CE050
midpoint of an observed #82D228 to #A0F064 spread
1.63:1 on white · fails 3:1 — decorative only
mint
#64E6BE
aerospace x3 + startups-03; most stable observed value
1.54:1 on white · fails 3:1 — decorative only
purple
#9048CC
startups-04 LED; 5.27:1 on white
5.27:1 on white · passes 3:1
gold lossless
#FAC52B
GO-Biz_OOH_Manu08png, lossless. 1.60:1 on white
1.60:1 on white · fails 3:1 — decorative only
lime lossless
#96E84B
GO-Biz_OOH_Education019, lossless. 1.51:1 on white
1.51:1 on white · fails 3:1 — decorative only

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.

Light ground
Somebody built this today.
1.2M
Californians work in manufacturing — more than any other state.
Dark ground
Somebody built this today.
1.2M
Californians work in manufacturing — more than any other state.

One component, every accent

Identical markup. Only --jad-accent changes — and in none of them does it carry a word.

1.2M
Californians work in manufacturing.
amber
1.2M
Californians work in manufacturing.
coral
1.2M
Californians work in manufacturing.
gold
1.2M
Californians work in manufacturing.
led-red
1.2M
Californians work in manufacturing.
lime
1.2M
Californians work in manufacturing.
mint
1.2M
Californians work in manufacturing.
purple
1.2M
Californians work in manufacturing.
gold · lossless
1.2M
Californians work in manufacturing.
lime · lossless

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

--cand-ink
#1A1A1A
candidate register primitive; #000000 is the more literal sample
17.40:1 on white · AAA
--cand-ink-soft
#595959
candidate register primitive
7.00:1 on white · AAA

Lines

--cand-line
#8C8C8C
candidate register primitive
3.36:1 on white · AA large only

3 · Type

The face is identified and we cannot render it yet. The campaign face is ITC Franklin Gothic LT Pro Demi Compressed, read from the type-layer data inside Misfit's own production artwork rather than guessed from looking. It is named first in the stack but not licensed, so every specimen on this page is rendering in the system fallback. What you see below is therefore the right sizes in the wrong face — treat the scale as real and the letterforms as provisional.

"ITC Franklin Gothic LT Pro", "FranklinGothicLTPro-DmCm", "Franklin Gothic Demi Cond", Impact, Haettenschweiler, "Arial Narrow Bold", …
Hero H1 --jad-text-display clamp(44px, 9vw, 104px) The largest thing on a page. All-caps, one line.
JUST ANOTHER DAY IN CA
Stat numeral --jad-text-stat 44px The figure in a proof block.
JUST ANOTHER DAY IN CA
Fact lead --jad-text-h2-lg clamp(34px, 4.4vw, 44px) Opening claim on a sector page.
JUST ANOTHER DAY IN CA
Section head --jad-text-h2 clamp(28px, 3.6vw, 38px) Sentence case past six words.
JUST ANOTHER DAY IN CA
Editorial head --jad-text-h2-sm clamp(26px, 3vw, 32px)
JUST ANOTHER DAY IN CA
Card heading --jad-text-h3 28px
JUST ANOTHER DAY IN CA
Hero subhead --jad-text-hero-lead clamp(19px, 2vw, 24px)
California is first in venture capital raised, 2024.
Narrative lead --jad-text-lead clamp(18px, 2vw, 21px)
California is first in venture capital raised, 2024.
Body copy --jad-text-base 18px The workhorse. Sourced prose sets here.
California is first in venture capital raised, 2024.
Navigation --jad-text-nav 15px
California is first in venture capital raised, 2024.
Meta / labels --jad-text-sm 14px
California is first in venture capital raised, 2024.
Footer --jad-text-xs 13px
California is first in venture capital raised, 2024.
Eyebrow --jad-text-eyebrow 11px All-caps, wide tracking.
JUST ANOTHER DAY IN CA

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.

Two-colour · on a light ground
One ink · the variable unset, for knockout over imagery

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

Two registers, split by position on the page.

7 · What we have built with it

How to read the labels. Every piece the design system names has an entry below, including the ones with nothing to show yet. That is deliberate: you should never have to guess whether something is missing from this page or missing from the system.

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.

When to reach for it

Reach for it any time a number appears in body content. It is not a pull-quote and not a stat card: the difference is that a claim carries its own sourcing, so it survives being lifted out of the page. If you want a number with no source line, the answer is that this system does not have one.

Rules that ride with it

  • The figure is always near-black type. Never the accent — an accent on white does not clear the contrast floor, and the figure is the one thing that must be readable.
  • Source, date, and stated measure are required. A claim missing any of the three does not ship; this is the campaign's own public promise, not a style preference.
  • Never rendered as an image. A statistic as a picture breaks accessibility and breaks the copy-and-check promise in the same move.
  • The source line is body-size type, never fine print. It is the part a reporter came for.
  • No claim ever sets an accent colour. The accent binds at the section around it.

Its other states

Liftable — Adds two copy controls. Used on /data/ and 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 only primitive with a written contract today (claim.contract.md, seven render-time assertions in the build's verify chain).

Sector hero In the build

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.

When to reach for it

One per sector page, always first. It is not a banner and carries no image — the figure is the hero. If a sector has no figure strong enough to open on, that is a content problem rather than a layout one.

Rules that ride with it

  • Exactly one per page, and it holds exactly one claim.
  • The sector name is the page's only top-level heading.

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.

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.

When to reach for it

Every section of a sector page uses this same head. Three separately-named modules — the proof block, the champion takeaway, and the cost reframe — are all this head plus their own content; they are told apart by their wording and their position, not by a different treatment.

Rules that ride with it

  • Six of these appear on every sector page, in a fixed order. The order is the argument.
  • The intro line under a head is optional and appears once per page at most.

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.

When to reach for it

Once per sector page. It is deliberately a list of links out, not a form — nothing is collected on the page, and the block says so.

Rules that ride with it

  • Nothing is collected here. Every item leaves for a state-owned page.
  • A fallback line appears only when a general request destination exists — never a decorative one.

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.

When to reach for it

Once per sector page, last. Capped at two destinations on purpose: a longer list reads as a sitemap and stops functioning as an exit.

Rules that ride with it

  • Two destinations, never more.
  • It sends people away from the campaign when that is the honest answer. That is the point of it.

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.

When to reach for it

Once per sector page. It is a line, not a row or a card — the press hub itself is the component that does not exist yet.

Rules that ride with it

  • One line, one destination.

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

When to reach for it

Home page only. The same treatment is reused for the two section heads further down the page.

Rules that ride with it

  • One per page.

Sector card Not yet agreed

One sector, as a tile in a grid — its name, linked, and where we have one, the state it is measured against.

Sector card as it appears on the home page.

When to reach for it

Index pages only. It is the entry point to a sector page, not a summary of it: no figure, no description, nothing that would need maintaining in two places.

Rules that ride with it

  • The rival-state line appears only when a real one exists. A card with nothing to compare against shows nothing rather than a placeholder.
  • Its heading level follows the page it sits on.

Its other states

With a rival state — Twelve of the sixteen cards on the site carry one. Aerospace and AI do not, on either page.

With a rival state

Sector grid Not yet agreed

The eight sector cards, laid out together.

The sector grid, all eight cards.

When to reach for it

The two index pages. It is the same grid on both; the industries index adds a second hook so the two can diverge later without either going unstyled.

Rules that ride with it

  • All eight sectors, always. It is not a curated selection.

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.

When to reach for it

Home page only, once. Everything else that looks like a button on this site is an outline control attached to a claim.

Rules that ride with it

  • One per page at most. A second filled button on the same page means neither is the primary action.
  • It is never the only way to reach the numbers.

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.

When to reach for it

Index pages only — never a sector page. Reach for it when a reader needs to be sent somewhere other than deeper into the campaign.

Rules that ride with it

  • Two per page, never more.
  • It addresses a reader, not a topic. 'You run a business in California', not 'Small business resources'.

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.

When to reach for it

Index pages. Same treatment at two heading levels depending on where it sits.

Rules that ride with it

  • One per page as the page title; reused below as a section 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.

When to reach for it

The press hub, once that hub has items in it.

Rules that ride with it

  • Ungated — no email wall, no registration.
  • Dated and sourced like everything else on the site.

Site header In the build

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.

When to reach for it

Every page. It is not configurable per page — a header that varies is a header a reader has to re-read.

Rules that ride with it

  • The skip link is the first thing a keyboard reaches, and it becomes visible when it is focused.
  • The wordmark is announced as the campaign name, never as 'logo'.
  • The campaign name is marked so machine translation leaves it alone.

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.

When to reach for it

Section 5 above shows the production lockup in both of its colour states, at size. That section is where the mark is documented; this entry exists so the set is not missing from the index.

Rules that ride with it

  • One asset, two colour slots. Set the bracket variable and the mark is two-colour; leave it unset and the whole mark collapses to one ink, which is the knockout case.
  • No campaign colour is ever baked into the mark.
  • Always inline, never placed as an image — an image cannot inherit the colour it is asked for.

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.

When to reach for it

Nowhere yet, and possibly nowhere at all.

Rules that ride with it

  • It ships only with a live destination. Absent beats decorative — a form that collects nothing is a promise the site cannot keep.
Generated by tools/gen-styleguide.py from theme/assets/tokens.css + theme/assets/candidate.css on 2026-08-18. Not hand-authored — re-run the generator rather than editing this file.