apex-brand — Noa Ferreday — the record

The brand site of a competitor, mid-season: an elite downhill mountain-bike racer, five rounds raced and three to go.

apex-brand is a house style rather than a vendor's system, the second one in this portfolio after calm-practice. It is the loud personal-brand site an athlete, a team or a performer publishes — an enormous uppercase masthead on a near-black ground, one acid accent, pill geometry, and a season carried as numbers.

Where the style comes from

The reference is a Webflow site for a Formula 1 driver. It publishes one stylesheet, 188,208 bytes, and everything below was measured out of that file and its :root rather than described from a look at the page.

The structural finding, and the reason this is a system rather than a palette. Its near-black ground measures L 0.2851 C 0.0219 h 122.760 and its acid accent L 0.9347 C 0.2260 h 121.712 — one degree apart in hue, with the chroma an order of magnitude down. The near-black is not a neutral that happens to sit under a bright colour. It is the accent, drained. That is why a page which is 95% dark and 5% acid reads as one decision rather than as a colour dropped onto a grey.

Its off-white is the exception and sits in a separate, warmer family — white h 106.572, cream h 106.650, sixteen degrees off the brand hue. So the style declares two hues, not one.

The brand hue moved once and has been moved back. It shipped at h 1.938, a hi-vis magenta, on the stated grounds that it made the same argument the lime makes — a high-visibility safety colour, legible against dirt and dusk — in a hue the reference does not own. That was the right call for a page claiming to be its own brand, and this page's brief is now the other one: carry the reference the whole way, at its own measured values, so that a reader can hold the two side by side and see that the style was taken apart rather than glanced at. The accent is the reference's own hue to three decimals, its own chroma, and its own lightness. The warm off-white is carried across unchanged, because a warm paper is a property of the style rather than of the brand.

What is carried and what is not

The line is between a style and a mark, and it is drawn deliberately rather than by how much trouble each would be.

Carried, because a style is not property. The hue, the chroma, the lightness of the accent and the drained near-black under it. The type ramp, the sub-one leading, the negative display tracking and the positive tracked capitals. The band alternation. The pill radii. The easing and every duration. The workhorse typeface, which is Mona Sans — GitHub's, open-licensed, and the same file the reference serves.

Not carried. The rider's name, the wordmark, the photography, and the display typeface. Brier is a licensed commercial webfont served from the reference's own CDN; hotlinking it would be theft of service and redistributing it would be theft, and CONTRACT.md §2 refuses remote font hosts anyway. So the display face is substituted, and §The substitution records how the substitute was chosen. The subject of this page is a rider who does not exist, racing a different sport.

Structurally, what is kept: the enormous uppercase masthead at sub-one leading; negative tracking on display and positive on tracked capitals; the alternation of near-black and cream bands down one page; pill geometry at a radius no dense interface could carry; one easing; a footer whose links are set at a heading size; and a next-event block at the top of the page.

The direction

• Archetype. Editorial spread. Full-width bands down one 80rem hold, a masthead over a photograph at the top, and one band inverted to cream so the page has a middle rather than a length. editorial spread is taken twice in this portfolio and both of those spend prose-first, which is what keeps this pair unique.
• Stance. Chart-first. A season is a set of measurements, so the measurements are the spine: a results ladder whose bars are the gap to the winner, and a second chart taking the best run apart section by section, whose five deltas add up to the gap in the ladder. The photographs sit behind the numbers rather than in front of them.
• Density. Generous, display-led. Bands sit --ap-space-2xl apart, 5rem, and the masthead runs from 2.75rem to 7.9375rem on one solved clamp.
• The bold thing. Length and size carry every magnitude, and the one bright colour appears once per section and never twice, so it always means the same thing: this is the one to look at. Counted on the page — the hero eyebrow, the best bar in the ladder, the worst section in the splits, the rule beside the pull quote, the closing button. Five sections, five uses.

The second state: three kinds of absence

The contract asks for the state the archetype makes hardest, and for a chart-first page that is the measurement that does not exist. The ladder carries three of them and they are three different things:

• Round 4 — did not finish. She started and there is no time. The trough is drawn as a dashed outline rather than filled, because a zero-length bar reads as a zero and a zero here would be a lie.
• Rounds 6 to 8 — not raced. Nothing is drawn at all. An empty trough would claim a scale these rows are not yet on.
• The average that has to say what it averaged. The figure reads 8.0 because it is the mean of four finishes with Round 4 left out. The note says so, and says that leaving it out is why the number is not lower.

None of the three is drawn as an error, and the system has no critical colour to draw them with. The reference's own :root declares no red either. A rider who did not finish has nothing gone wrong with the page.

The three components the style is recognised by

The colour, type and band system above is the foundation. These are the parts a reader would actually point at, and each is carried from a measured mechanism in the reference rather than from an impression of it.

The round grid. The reference's biggest component by a wide margin: sixteen cells, each wearing a drawn FRAME — four pieces per cell, 64 of them — where hovering lights the frame in the accent, fades in an overlay and scales the subject. Its own rule is .helmet-grid-item-w:hover .helmet-grid-extender-img { color: var(--color--lime) }. Carried here as the eight rounds, with the subject drawn rather than photographed: each cell holds a descent profile, so the component needs no imagery and the page stays chart-first. The lighting is on :hover and :focus-visible, and every cell is a link to its own row in the results table, because a reveal a pointer can reach and a keyboard cannot is the commonest way this component ships broken.

The profiles are plotted in ONE shared space — 2.8 km of run is the full width, 700 m of drop the full height — so a short shallow track draws a short shallow line. The first version gave every round the same viewBox, which made the lede's own claim ("drawn to the same scale, so the steep ones look steep") false. A chart that contradicts its caption is worse than no chart.

The marquee. Set at max(4em, 8vw), which is the reference's own size for it: display type moving, not a ticker, with both edges masked by a gradient so the strip fades rather than being cut. It does not move until script says so — SC 2.2.2 wants a pause for anything moving past five seconds, the control needs script, and a control that is not there yet is not a control, so the animation and the button arrive together. With no script it is a static strip. Under prefers-reduced-motion the animation is removed rather than shortened, because shortening an infinite loop makes it faster.

It was ghosted at --ap-raise first, and the browser probe measured that at 1.28:1. It is still text, and text that size owes 3:1, so it takes --ap-bar — the token already solved to exactly that bar. As quiet as it is allowed to be rather than as quiet as it looked good being.

The clip reveal. clip-path: polygon(0 -2%, 0 94%, 100% 94%, 100% -2%) is the reference's own, and the 94% is the point: the box stops just above the descender room, so a line of display type rises out of a hard edge rather than fading in. Driven by animation-timeline: view() — no script and no observer, so there is no state in which the text is stuck hidden. Anything that cannot run the timeline simply gets the text, which is what the probe confirms in all three states.

Generator

python3 tools/apex_tokens.py --both > systems/apex-brand/tokens.css
python3 tools/apex_tokens.py --check      # 42 pairs, both palettes
python3 tools/apex_tokens.py --self-test

Twenty of the twenty-two specimens here take tokens from a vendor's published generator. This style has no vendor, so the portfolio ships one. It declares the grounds — a ground is the one honest choice in a palette — and solves everything else: the nearest OKLCh lightness, at a declared chroma and hue, that clears the WCAG ratio its role owes against the theme's worst ground.

Two palettes, not four. The reference alternates near-black and cream bands down one page, so a band that inverts is a first-class mechanism here rather than a one-off override. A theme picks which palette is the page; the other one is automatically what .ap-flip gets. Nothing is solved twice, every pair is measured once, and a band cannot drift from the theme it is nested in.

The ink of one palette is the ground of the other. Chalk on near-black, near-black on chalk. It costs no new declared value and it is what the reference's alternating bands actually are.

The type ramp is not a ratio anybody chose. The reference's own steps are 7.9375/4.5 = 1.76, then 4.5/4 = 1.13, then 4/2.76 = 1.45. That spread is the style — an enormous masthead, then a cliff, then a close ladder of working sizes — and imposing a constant ratio would have replaced a measured ladder with a tidier invented one. Each step is one clamp() that type_scale.py solved through two endpoints at 360px and 1280px, and --self-test asserts every emitted clamp still brackets both.

One face carries a width axis and the system spends it. Mona Sans publishes wdth 75–125. The masthead runs at 116, headings at 104, body at 100, and tracked capitals at 82 — so rank is carried by width as well as by size, and a masthead and a micro label are two ends of one voice rather than two typefaces. --self-test asserts no value falls outside what the family publishes, because asking for wdth 140 does not fail: it silently clamps, and the page then looks narrower than it was drawn.

It used to be both faces, when the display face was a second variable sans. Moving the width mechanism onto one typeface is the right direction independently of which face replaced it: "a masthead and a micro label are the same voice at opposite ends of one axis" is a claim about ONE typeface, and it was being made across two.

The substitution

The reference's display face is Brier Bold, and it cannot ship here — see §What is carried and what is not. The replacement was chosen by rendering, not by reading a description of it: Brier and five candidates were set at 72px against the same string on the same ground and compared.

Brier is a high-contrast Didone display serif — narrow, tall, flat fine serifs, very high stroke contrast. Bodoni Moda at the top of its optical-size axis is the match on all four counts. Playfair Display is wider and softer, DM Serif Display is chunkier at lower contrast, and Abril Fatface is far heavier.

The sixth thing in that specimen was Archivo, which is what this page shipped as its display face until now — and putting it beside the reference is what settled the question. Archivo is a grotesque. Not a near miss: the wrong genus. It was the single largest gap between this page and the thing it claims to have measured, and no amount of correctness in the ramp, the tracking or the leading was going to close it.

What the scripts found that reading would not have

1. The accent tint was quietly the worst ground on the page. accent-quiet was the accent laid over the page at a declared 0.16 alpha. In the dark palette that lands lighter than the page and well inside the bracket. In the light palette it lands darker than sink, so the chip became the worst ground — and nothing in the declared ground set could see it, because the tint is derived from the accent, which is itself derived from the worst declared ground. --check read ink at 6.78:1 against the 7 it owes and ink-muted at 4.33:1 against 4.5. The alpha is now solved rather than declared: the strongest alpha at which every text role still clears its own ratio.

2. The solved alpha then shipped a colour nobody had measured. The first version of that search measured the unquantized blend and emitted a rounded hex that did not clear. ink-muted read 4.49:1, and three roles sitting exactly on 3.00 read as 2.995. The predicate now measures the quantized value — the same discipline _rgb already kept for every other role, and the same defect calm_tokens.py records having found the hard way.

3. "Nearest, not safest" is wrong for this style's ink. Solved down to the nearest lightness clearing 7:1, ink emitted #b3b2aa — a grey headline on a near-black page. The rule is right on a dense console, where it stops four greys all shouting; on a poster it throws away the only thing the style is built on. The reference's own text measures about 13:1. So ink left the solve and became a declared choice, and the choice was already in the file.

4. "Nearest, not safest" is wrong for the accent too, and magenta hid it. This was two findings and they have the same shape as finding 3.

The accent's lightness was solved — the nearest lightness clearing 3:1 on the worst ground. Under magenta the solved answer and the designed answer happened to coincide, so nothing could tell them apart. Lime separates them, because lime is luminous per unit of lightness: the first passing step is L 0.55, #637e00, a dark olive. It cleared the floor, it satisfied every check in the generator, and it is the exact opposite of the "high-visibility safety colour" the file says the accent is for. A colour solved to a contrast floor is not an accent; it is the dimmest colour that passes. The accent's lightness is now declared at the reference's own L 0.9347 and verified, and it falls back to solving only where the declared value cannot clear — which is a real case, not a hypothetical: it is what the light palette does, because no light colour is hi-vis on cream. The reference gets that one wrong, its lime measuring 1.10:1 on its own off-white.

The label on the fill was the same defect one role over. solve_on tried darkening first — a near-black label on a hi-vis fill is the genre's own button — and on magenta the direction was genuinely exhausted: pure black measures 4.481:1 on #cf3972, under the 4.5 a label owes, so the chalk end won by arithmetic and the docstring said so correctly. On lime, black clears at 16.22:1, and the solver returned neither black nor anything near it. It returned the first step down that reaches 4.51:1, a mid-olive, which on a hi-vis fill is not a label punched through the colour. It is a smudge, and it passes. The two candidates are now the palette ENDS — the two declared page grounds, tried darkest first — so the arithmetic still decides WHICH end while the solver can no longer wander into the middle. The measured pair is now 14.69:1.

5. The dark ground and the accent share a hue; the light ground must not. The first version of that assertion required the property of both palettes and failed, which is the test working. Draining a hi-vis colour towards black gives a believable near-black that still belongs to the brand; draining the same colour towards white gives a tint, and a tinted page is a different design. The reference's own cream sits sixteen degrees off its brand hue for exactly this reason. Both directions are now asserted.

6. copy_lint.py took a chart apart. The splits note explained the diverging scale with left and right. The sign already carries it, so the sentence now reads "Every mark starts at the line. Time she gained carries a minus sign and time she lost carries a plus" — shorter, and true at any width. It also caught the hero's next-round block as three unlabeled values on middots; the fix it names is a definition list, and three labelled cells is better hero furniture than three fragments. That change removed a name-drift finding at the same time, because the block had been a button that jumped to a section with a different name, promising an action it did not perform.

7. The grain ladder could not survive being told no. grain.py exits non-zero both for a real failure and for a grained frame landing outside render_audit's band, and encode_images.mjs treated both as fatal. The track frame is a pine forest at dusk and reads 5.793 levels sigma with no grain added at all, because dense high-frequency detail is what the auditor measures; the ladder's first rung took it to 8.201, grain.py refused, and the whole encode died on its third frame. The ladder now stops at the strongest rung that landed and records a rendition that never did. track-960 is one: avif 7.900, webp 8.080, against a ceiling of 8.0.

Measured

python3 tools/apex_tokens.py --check — 42 pairs across both palettes, 0 failing. The pairs the page leans on hardest:

The first two rows are the same pair read in both directions, which is the "ink of one palette is the ground of the other" mechanism showing up as arithmetic.

Decorations, held deliberately below the 3:1 a control boundary owes, so substituting one for stroke has to be somebody's decision: rule 1.84:1, bar-track 2.22:1, both against the page. --self-test asserts both, and asserts the track is quieter than the bar that sits in it.

The hero scrim: over the region the masthead and the lede occupy, the worst pixel in the frame is a lit dust patch reading 1.67:1 against chalk, and the smallest scrim reaching 4.5 is 0.49 of the ground colour. The gradient carries at least 0.88 there. The browser probe confirms the rendered pair, which is the only measurement that accounts for the gradient rather than for a flat alpha.

Imagery: 9 renditions, 689 kB of AVIF. Every frame is generated rather than photographed — see CREDITS.md.

Deviations, and their reasons

• The display face is not the reference's. Brier is a licensed commercial webfont and cannot ship here. Bodoni Moda is open-licensed and is the same species — a high-contrast Didone display serif — chosen by setting the two side by side rather than from a description; see §The substitution. Mona Sans is the reference's own text face and is OFL, so it is carried unchanged, from the same Google Fonts entry.
• The motion is built without the reference's libraries. The reference drives everything from GSAP with ScrollTrigger, Lenis and Rive — about 165 kB over five scripts. CONTRACT.md §2 allows no bundler, no npm and no remote scripts, so every mechanism here is CSS transitions plus about sixty lines of inline script toggling a class from an IntersectionObserver. The timings, the staggers and the easing curves are the reference's own, read out of its shipped bundle; only the machinery differs. The award circuit's own developer rubric weights performance at 0.20 against animation at 0.15, so the library would have been the larger cost buying the smaller score.
• The easings are bezier approximations of GSAP's polynomials. power2.out and its family are analytic curves, not beziers. The published Penner approximations are used, and the worst vertical deviation over the whole travel was measured rather than assumed: 2.22% for power2.out, 2.47% for power2.inOut, 4.43% for power3.out, 3.16% for power2.in, 1.92% for power1.inOut. CSS linear() would be exact and is not used, because an unsupported linear() invalidates the whole declaration rather than degrading — trading a 2% error for no easing at all on an older engine.
• The reference has no prefers-reduced-motion path and this page does. Measured: absent from all 186,727 bytes of the reference's stylesheet. Here the wipe, the character hover and the hero entrance are all switched OFF rather than shortened under reduce — a bar sweeping across a line of text is not a gesture to make faster — and the text is simply in place. The circuit's own developer guideline asks for this in writing, so it is the reference that is deviating.
• The eyebrow is 0.75rem, not the reference's 0.578125rem. That is 9.25px in tracked capitals, which is below anything this template should ship: capitals at 9px lose the ascender and descender cues a reader distinguishes letters by, and tracking them out makes each glyph lonelier rather than larger.
• Tracking is declared in em, not rem. The reference sets it in rem, which is a fixed number of pixels at every size — so its −0.25rem is −3.15% of the masthead and −20.8% of a 1.2rem heading, and only one of those was a decision. The measured ratios are carried; the unit is not.
• Four literal colours, in the two places a var() cannot reach. The two theme-color metas and the favicon's data: URI are parsed outside CSS, so each is transcribed from tokens.css and the comment above them says which token it is. Worth writing down because one of them was wrong: the light theme-color was a near-white this system never emitted, and nothing on the page could contradict it — a literal in a tokenized page is invisible by construction, which is the argument for §1 rather than an exception to it.

• audience is now a family of seven. It held six, and the ledger's own note said two to six. Seven is a real cost and it is named in tools/build-index.mjs rather than rounded over: audience is now the family a reader has to scan hardest, and it is the one to split if anything else lands in it.

What I am least sure about

Whether chart-first is the honest label for this page, or an ambition for it. The ladder and the splits are genuinely the spine, and they are the reason this page is not the third prose-first editorial spread in the portfolio. But the first thing a reader meets is a masthead over a photograph, and a masthead is a masthead whatever is under it. The defence is that the hero's only other content is three labelled values and a date, and that the band immediately below it is a table — but somebody could reasonably read the whole page as tile-first with a long table in it, and I would not have a strong argument against them.