A fictional card issuer, built from tokens.

Why this exists

The confidentiality argument. A blurred real screenshot still carries the real layout. A screen composed from fenmore tokens isn't the client's property in any recognisable sense, because it was never their design — it's a plausible card marketplace built from scratch.

The speed argument. Thirty-odd abstracted screens redrawn by hand is a week. Composed from components, it's an afternoon, and every one is pixel-consistent with the others.

The verification argument. build.py refuses to generate CSS if any text token fails contrast on a surface it's permitted on. A reskin that breaks legibility fails loudly instead of shipping.

reskin

Change the primitives, watch everything follow

Three of the nineteen primitives are actual decisions — a chrome hue, an accent hue, a brand hue. The rest is a neutral ramp. These presets swap only those, live:

layer 1

Primitives — the only layer you edit

layer 2

Semantics — what components reference

Components never touch a primitive. That indirection is what makes the reskin one edit rather than a find-and-replace.

Contrast is measured against the worst light surface a token is permitted on. Fill-only values are supposed to fail as text — that's their job, and the build script asserts it.

components

The pieces the screens are made of

Buttons

Badges

Category panel — with the count treatment

“Pay less” is a goal, not a product attribute — it collects no-annual-fee, 0% intro APR and balance transfers under the reason someone would want any of them. That naming decision is the cognitive-load hypothesis in two words.

Filter rail and form fields

Comparison table

the inverse

An inverse is a surface. A dark mode is a second system.

A dark mode is a parallel copy of every token, wired to prefers-color-scheme, that doubles the maintenance and doubles the places a contrast failure can hide. That is not what a nav bar needs. The bar is dark because it is chrome — not because of anyone’s OS setting — and it sits on the same screen as the light content at the same time.

So the inverse is thirteen tokens and one scope. Roles invert inside it: the hairline goes lighter than its background instead of darker, and the interactive value moves up the accent ramp instead of down. Components never reference the inverse names — the scope re-points the standard ones, so .fen-btn--primary is one class, not two.

The bar and the panel have different contrast budgets. chrome-800 tops out at 10.7:1 for white and affords two comfortable text tiers; chrome-900 reaches 14.2:1 and affords three. The gate now checks them separately, which is why sustained reading belongs on the panel and not on the bar.

brand ramp

Saturation has to rise as chartreuse darkens, or it turns olive

A 58° yellow-green is the single most fragile hue to build a ramp from. Darken it at constant saturation and you land on army olive; lighten it and it goes grey-green and sickly. So saturation climbs from 36% to 68% across the ramp while hue drifts 55°→64° — nine degrees, which is inside the range that still reads as one family.

buttons

Three tiers, each separated on two axes

primary is fill, no border. secondary is border, no fill. ghost is neither. Never fill-strength alone — a trio told apart only by how saturated its fill is collapses in greyscale, at a glance, and for anyone with low colour vision. The first pass failed this: two teal fills of similar value reading as two equal primaries, so the page had no primary at all.

One primary per view. And it is teal, not chartreuse — the loudest colour in a palette should not be the default call to action, because then every screen is shouting and the accent has nothing left to mark. Chartreuse marks selection instead.

Ghost keeps the box. Same padding, same min-height. A ghost that collapses to bare text can’t sit in a row with the other two — which is what --tertiary did, and why it’s now a deprecated alias.

chips

Hairline at rest. Filled when selected.

The old chip was filled at rest, which left selection nowhere to go — every chip already looked switched on, so a filter row read as a stack of buttons. A fill reads as state; a rule reads as an affordance. Same principle as the annotations in the case studies.

The icon circles are gone. They were the highest-contrast element on the screen and carried the least information in it. Icons now ride at 16px in currentColor, or not at all.

nine styles

Every text style has a job it is the only one able to do

A style with no job gets applied arbitrarily; a missing one gets faked with a one-off override. Nine is where those two failures stop. Tracking is stored as a percentage so it scales with size, and label carries its uppercase as a token — components no longer set text-transform themselves.

body-sm and action are the same size on purpose. One is dense reading, the other is something you click, and separating them means every button in the system can be restyled without touching a single table cell.

borders & opacity

A border is one decision, not three

Colour, width and style travel together as a composite, so there is no way to set a 2px border in the hairline colour by accident.

scales

Type, space, radius

workflow

Composing a screen

Wrap markup in .fenmore, assemble from the components, screenshot at 2x. Nothing else needed.

<!-- a category page fragment -->
<div class="fenmore">
  <div class="fen-nav">…</div>
  <div class="fen-chips">…</div>
  <div class="fen-grid">
    <article class="fen-card">…</article>
  </div>
</div>

Regenerate after any token edit:

python3 build.py
# 80 tokens → fenmore.css
# ✓ contrast gate passed