The classification sheet for race two of a historic motor-racing meeting, stopped by a red flag with four laps to run.
The third brand specimen. The reference is a car maker's own site; this is what its language looks like on a results sheet somebody reads standing up in a paddock, looking for one car.
Where the style comes from
Transcribed from awesome-design-md/design-md/ferrari/DESIGN.md, read 2026-09-16, and emitted by:
python3 tools/brand_tokens.py ferrari-brand > systems/ferrari-brand/tokens.css
python3 tools/brand_tokens.py ferrari-brand --check
python3 tools/brand_tokens.py --self-test
| Decision | Transcribed |
|---|---|
| Ramp | #ffffff #f7f7f7 #ebebeb #d2d2d2 #969696 #8f8f8f #666666 #303030 #181818 |
| Chromatic | one — #da291c, with published hover #9d2211 and active #b01e0a |
| Semantics | info #4c98b9, success #03904a, warning #f13a2c |
| Type | 80 · 56 · 36 · 26 · 18 · 16 · 14 · 13 · 12 · 11 px |
| Tracking | negative on every display step, positive on the 11px label |
| Weights | 400 and 500 |
| Radii | 0 · 2 · 4 · 6 · 8 · 12 · 9999 |
| Spacing | 4 → 128px |
| Nav | 64px, flat |
| Depth | a ground change, canvas to elevated. No shadow ladder |
| Modes | dark first, with a full published light palette beside it |
| Motion | not published |
It is the only DARK-FIRST brand in this family, so dark is declared first and lands on bare :root — the reference's own default rather than this portfolio's convention.
The finding that shaped the page. The brand red reads 4.87:1 under white, so the reference's own primary button is legal as published. As TEXT it is a different story: it reaches 4.55:1 on the light soft surface and only 2.71:1 on the elevated grey in the dark setting, so accent-text is solved a little lighter there. The page carries both — the fill on the button, the solved red on a link — and the design-notes panel says why they differ rather than hoping nobody looks.
The direction
- Archetype. Editorial spread.
- Data stance. Table-first.
- Density. Generous — a row takes twice the height a console would give it.
- The one bold decision. The table carries two orders at once. Every results sheet publishes the classification and lets the crowd work out for themselves why the car they watched lead is third. This one gives what each car was doing when the flag came out its own column, in words — "was second", with an arrow — so the sheet answers the question instead of starting it. It is a column the timekeeper already has and never publishes.
The second state
The red flag. A results table's whole promise is that the order is the order, and this is the case where it is not: the race stopped on lap 22 of 26, the classification reverts to the end of lap 21, and three of twenty-four cars are classified behind cars they had already passed. A table that showed only the final column would be correct and would start a protest.
Nothing about the moved places rests on colour — the words and an arrow glyph carry it, so the sheet survives a photocopier, a grey printout and a screen reader. That constraint came from the brand rather than from taste: this language allows one chromatic colour, and it is spent on the action.
Deviations from CONTRACT.md
- §2, the typeface. FerrariSans is proprietary. Archivo is substituted — the closest open-licensed grotesque that holds at weight 500 across an 80px-to-11px ramp with the negative tracking this language sets on display.
- §5, motion. The reference publishes no duration, easing or transition anywhere. The two rungs in
tokens.cssare the portfolio's, and the emitted file states that on its face. - The reference is photography-led and this page has no photographs. CONTRACT.md §2 admits inline SVG and
data:URIs only. What is carried across is the other half of the identity: the display step at full size with its tracking closed, one red rule under it, and everything else left as space.
Findings kept, with reasons
slop_scan·default-ai-palette— near-black plus one bright accent. The rule allows it where the brief asked for it, and here the brief is the brand.craft_lint·disabled-unstyled— the rule looks for utility-class variants; the disabled control is styled by.btn[disabled]with a changed background, a changed label colour andcursor: not-allowed, and it carriesaria-describedbynaming what would make it live.audit_page·apple-touch-icon-missing,manifest-missing— portfolio-wide.copy_lint·name-drift— seecopy-lint.ignore.