Clean structure · C.7
One-accent palette
A red pen on a printed page. It only means something because nothing else on the page is red.
Black, white, one grey and one accent, where the accent marks only actions and labels, with the contrast of both uses checked live.
4 knobs
How it works
The reference uses its green on six kinds of thing and nothing else. Set usage to everywhere and the same green goes onto headings, borders and a band, and the page stops telling you where to click.
Four tokens: ink, paper, a band grey a few percent below white, and one accent. The accent is assigned by role, not by component: buttons and the header call to action get it as a fill, kickers and list markers get it as text. Two contrast checks follow from that: white on the accent fill, and the accent as text on white. Both must clear 4.5:1, which bounds how light the accent may go.
The knobs, named
Accent hue, accent lightness, usage, and band tone. All ours. The reference measured #217455 as the accent and #F5F5F5 as the band grey.
| Knob | Source | What it teaches |
|---|---|---|
| Accent hue | ours | Any hue works. The readout is what decides whether a given hue and lightness pass. |
| Accent lightness | ours | Raise it and watch both contrast lines. At this saturation, yellows and greens fail as text on white from about 31 to 35%; blues and violets hold past 55%. |
| Usage | ours | Everywhere is the failure on purpose: the accent stops carrying meaning once it is on everything. |
| Band tone | ours | Lightness of the alternating grey band. 96% is the reference. 100% removes the rhythm between sections. |
sourced means the source names this parameter. ours means the source names none and the knob is our design against the mechanism. No knob here is invented and passed off as sourced.
Evidence
VERIFIED (rendered)
fmjfuelpartner.com, 2026-10-15: Wix theme colours and computed styles show one accent, rgb(33,116,85), on buttons, the header quote block, kickers, list markers and the subscribe button; band grey rgb(245,245,245); ink #000; a charcoal #333742 used once for a secondary button. The contrast arithmetic is ours (WCAG 2.x).
- Seen on
- fmjfuelpartner.com (design study 2026-10-15).
- Dependencies
- vanilla CSS
- Difficulty
- easy, and hard to keep to
- Performance
- None.
- Accessibility and the floor
- The two contrast lines are the a11y check. A failing accent is flagged in the readout rather than silently shown.
Notes
Composability. The colour rule behind every other C feature. It sits alongside the page-gradient field: a gradient site keeps its field as the ground and still spends its one accent only on actions and labels.