Clean structure · C.1
Kicker and heading opener
A chapter number above a chapter title. You learn the beat in two chapters and stop noticing it.
One way to open every section: a small accent label, a large quiet heading, and hairlines that run out to the edges of the band.
4 knobs
How it works
The reference opens all six of its sections this way. That repetition is most of why it feels calm: the reader learns where the next topic starts and what it is called before reading a word of it. The rules do the job a card border would do elsewhere, without boxing anything in.
Two elements and a pair of rules. The kicker is a short label in the accent colour at about a fifth of the heading size. The heading sits directly under it with almost no gap, so the two read as one unit. In a centred section the rules are the heading's flex siblings, each flex: 1 with a 1px top border, so they grow to whatever space the heading leaves and reach the band's edges without measuring anything. The band clips them (overflow: clip), so a rule can never cause a sideways scroll. Left-aligned, the rule shrinks to a short tick at the band edge.
The knobs, named
Alignment, rule style, the kicker-to-heading gap, and the heading size. All four are ours. The reference measured a 20px kicker, a 56px heading and about 2px between them.
| Knob | Source | What it teaches |
|---|---|---|
| Alignment | ours | Centred sections take rules on both sides. Left-aligned sections, used in split layouts, start with a short tick at the edge and run one rule out to the right. |
| Rules | ours | The rules are what make a plain heading read as designed. Off, it is a heading. On, it is a section opener. |
| Kicker gap | ours | The reference sits at about 2px. Past 16px the kicker detaches and reads as a caption for the section above. |
| Heading size | ours | The kicker stays at a fixed ratio of this, so the pair scales as one unit. |
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)
Measured on fmjfuelpartner.com, 2026-10-15, via safe-capture --dump-styles and an offline render at 1280px: kicker 20/26px in the accent green, heading 56/56px tracked -0.04em, kicker top to heading top 24px, used on all six home-page sections with flanking hairlines on the centred ones. Our implementation is original code.
- Seen on
- fmjfuelpartner.com (design study 2026-10-15).
- Dependencies
- vanilla CSS
- Difficulty
- easy
- Performance
- None. No measurement at runtime; the rules are flex items.
- Accessibility and the floor
- The kicker is a plain paragraph above a real heading element, so the outline stays the heading. Nothing animates.
Notes
Composability. The opener for every other C feature. Pair it with size-tied tracking (C.2) for the heading and the one-accent palette (C.7) for the kicker colour.