ProblemPrices that change with the size of the bar, on a site moving to dark mode BuiltOne token-based system that serves light and dark, from primitives to components

Why

One page, two themes, and a price that moves with every choice.

How it’s organized

Three layers, named by role, ready for code.

1. 1Three layers. Primitives (64), theme tokens (27, with Light and Dark) and the prototype’s state (30), each in its own collection.
2. 2Named by role, not by color. surface, text, border, action, focus, accent, status, scrim and shadow, so a name still fits when its value changes.
3. 3Scoped. Spacing is offered only for gaps and radii only for corners, so the right variable is the only one on offer.
4. 4Bound, not typed in. 15 text styles and 2 effect styles, and every color, padding and gap in a component is bound to a variable: nothing is unbound.
5. 5Ready for code. All 64 primitives and all 27 theme tokens carry their CSS variable names for Dev Mode.
6. 6Written down. The file runs in system order, from Foundations to Handoff, and every decision is logged with the options that lost, the trade-off and the evidence.

Foundations and components

Every token and every variant, then the library in another file.

Two pages of the Figma file, each scrolling inside its window: the foundations, and every component in Dark. Below them, a second file built only from the published library.

Foundations

Components in Dark

The real test of a library is another file. In this one, every plan card and the summary bar come from the published library.

Nothing in the second file is local. Its colors come from the library’s theme tokens, so the same instances switch between Light and Dark by mode alone, and a fix made once in the library reaches every file that uses it.

Pulled from the published library into another file: the same instances, switched to Dark by mode alone.

Into dark

Designed dark, not inverted.

The first version was light only. The dark version keeps the same components and changes only the values their tokens point at. Below, the shortcut most teams try first, flipped neutrals with every other color and shadow kept, sits beside the dark tokens.

1. 1No pure white text. Flipped, it’s white on near-black at 20:1, bright enough to glare. The dark tokens use neutral 50 on neutral 950: still 17.67:1.
2. 2Elevation by lightness. Flipped, cards turn as dark as the page and the shadow is black on black. Raised surfaces get lighter instead, and the shadow token goes transparent.
3. 3Brand blue steps lighter. The light-mode blue fails on dark, at 3.24:1. Links move to brand 300 (9.93:1), and buttons to brand 400 with a dark label (6.99:1).
4. 4No glowing navy. Flipped, the Recommended card’s pale tint turns a saturated navy that pulls the green check down to 2.57:1. A neutral lift instead keeps the check at 7.52:1.
5. 5A sunken switch. Flipped, the agreement switch’s track turns lighter than the page, so the control looks raised. Its track goes darker than the page instead, so the selected side sits on top.

Built to be checked

Six days, checked from inside and out.

Claude did the production work in Figma, and I made the calls. Some options I chose myself; the rest began as Claude’s recommendations, which I reviewed and approved at three checkpoints, with a second Claude auditing from outside. All 62 decisions are logged with the options that lost.

• 17.67:1body text on the pageNeutral 50 on neutral 950: far above AA, without the glare of pure white.
• 9.69:1selected textThe label on a selected card, against its dark tint (6.89:1 in light).
• 8.92:1focus ring on a cardKeyboard focus stays visible on every surface (6.17:1 in light).

1. IThe briefNov 5. My first calls: a bar as the venue, prices set by the bar’s size, the palette, the typefaces, and what each plan includes.
2. IIA light system firstTokens, components and pages in light, saved as a named version, then checked by an outside reviewer, a second Claude.
3. IIIEvolved into darkThe dark theme, the accessibility checks and the prototype, all from the same components.
4. IVMy first click testSelected cards were too hard to tell apart, and the theme toggle did nothing. Both fixed and re-tested the same day.
5. VImagery and handoffHero photos from my own Gemini prompts, edited in Photoshop, under a token-bound overlay in Figma. Then the developer handoff and a test plan.
6. VIA library, and an auditNov 6 to 9. The components published as a team library. A second click-through and an outside audit found five issues; all fixed.
7. VIIThe recordingNov 10. The prototype recorded, and the case study frames exported.

Handoff

Measured, annotated and marked Ready for dev.

Every key color pair passes WCAG 2.2 AA in both themes. The final frames carry Dev Mode notes with live token names and measurements. The plan card spec gives every size, the token for each part in Light and Dark, and a table of states and what triggers them. Scroll padding keeps the sticky summary bar from covering a focused element, and the components are published as a team library that a second file already uses.

The system in use

Pick a size, pick a plan, see the total.

The components at work: a frame from the Figma file, stills from the prototype recording, and the page on a phone.

1 2 3 4

01The price starts with the bar.

1. 1Three bar sizes, because the price follows how many people the bar can hold. Picking one sets the price on every plan.
2. 2Not sure? opens a short explainer: the size is the maximum occupancy on the fire department certificate, usually posted near the entrance.
3. 3Monthly or a 2-year agreement. Monthly billing adds $20 a month, so the 2-year side says Save $20/mo.
4. 4Until a size is picked, each card shows its “from” price: Kickoff $89, Game Day $149, All-Access $229.

1 2 3

02Everything chosen looks chosen.

1. 1A check in the corner, a tint and a strong outline. Since my first click test, every selected thing on the page shares this one look.
2. 2The button turns into Selected with a check, so the state is in words as well as color. When Game Day isn’t chosen, its Recommended badge stays and the outline goes.
3. 3The summary bar keeps the choice in view down the page: the plan, the agreement, the bar size and the monthly total.

1 2 3

03Add-ons go straight into the total.

1. 1Three extras, priced the same for every bar size: the Sports pack, a music license and extra screens.
2. 2A picked add-on gets the same chosen look as a plan: the tint, the outline and the check.
3. 3The summary bar adds it right away, from $199 to $248. Unticking takes it back out, which my second click-through found it didn’t do at first.

1 2 3

04Switch the theme, keep the choices.

1. 1The same page after the theme toggle in the header: the bar size is still 61 to 150, and the agreement still 2-year.
2. 2Game Day is still selected, with the same check, tint and outline, now drawn from the Light tokens.
3. 3The Sports pack and the $248 total carry over too. It’s one page switching its mode, not two prototypes, so nothing the visitor picked is lost.

1 2 3

05The next step carries the plan.

1. 1Get a quote opens the next step with the plan and the monthly total already in it.
2. 2Each add-on gets its own line, so the quote matches what was picked. Before my second click-through, the lines didn’t follow the add-ons.
3. 3The quote form itself is out of scope, and the card says so. Close it, or click anywhere on the dimmed page: every overlay closes both ways.

1 2 3

06The same choices on a phone.

1. 1On a phone the three bar sizes still fit one row, with the explainer link under them.
2. 2The agreement switch and its Save $20/mo badge get their own line.
3. 3The cards stack, one to a row, here in light. The header’s Menu opens a sheet with the same links, another fix from the second click-through.

The prototype

48 seconds through the dark prototype.

What I’d test next

Price first, or what’s included first?

The card leads with the price. That’s my assumption, not research, so the next step is a test, built from the same plan card with its layout switched.

1. 1A, price first. The card as it is: the name, the price and the button, then what’s included.
2. 2B, what’s included first. The same parts reordered, as real plan card instances with their layout set to coverage first.
3. 3Primary metric: quote starts per visitor.
4. 4Guardrail: the average monthly total at quote start, watched alongside. No results yet: this is the plan, not a finding.