← Back to the screen

Design system portfolio

ferrari-brand — Brackenhill — the record

The four direction lines behind this page, the generator command that produced its tokens, and the pairs it was measured against.

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
DecisionTranscribed
Ramp#ffffff #f7f7f7 #ebebeb #d2d2d2 #969696 #8f8f8f #666666 #303030 #181818
Chromaticone — #da291c, with published hover #9d2211 and active #b01e0a
Semanticsinfo #4c98b9, success #03904a, warning #f13a2c
Type80 · 56 · 36 · 26 · 18 · 16 · 14 · 13 · 12 · 11 px
Trackingnegative on every display step, positive on the 11px label
Weights400 and 500
Radii0 · 2 · 4 · 6 · 8 · 12 · 9999
Spacing4 → 128px
Nav64px, flat
Deptha ground change, canvas to elevated. No shadow ladder
Modesdark first, with a full published light palette beside it
Motionnot 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

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

Findings kept, with reasons