tesla-brand — Nightshift — the record

The overnight charge plan for a last-mile delivery depot: fourteen vans, three bays, one contracted ceiling, read at 17:42 by the supervisor who is about to go home.

tesla-brand is the first of the portfolio's BRAND specimens — a published brand design language rather than a vendor's interface system. The reference is a car maker's own website, which is a showroom; this page is what that language looks like when it has to run a depot.

Where the style comes from

The reference publishes nine colours, four type sizes, two weights, one radius for controls and one duration. Everything below was transcribed from awesome-design-md/design-md/tesla/DESIGN.md, read 2026-09-16, and emitted by:

python3 tools/brand_tokens.py tesla-brand > systems/tesla-brand/tokens.css
python3 tools/brand_tokens.py tesla-brand --check
python3 tools/brand_tokens.py --self-test

What the generator SOLVES is the role assignment, and three findings came out of doing it that way. Each is asserted by --check rather than described.

1. The palette has no legal control boundary that is not already a text colour. Silver Fog #8e8e8e, the value the reference uses for placeholder and disabled text, measures 2.98:1 against Light Ash — 0.02 under the 3:1 SC 1.4.11 asks of anything identifying a control. The next value down is Pewter, so stroke and ink-3 are the same colour here. That is a property of a nine-value palette rather than a mistake, and a tenth value invented to tidy it would be this portfolio writing the design system rather than transcribing it.

1. The brand blue is legal on the canvas and illegal in the band beside it. #3e6ae1 reads 4.82:1 on white and 4.39:1 on Light Ash. Solving every role against the WORST ground rather than against the page is exactly what catches this; accent-text is #3c67de, a fraction darker, at 5.02:1 on the worst ground. The button keeps the published blue, because a fill owes 3:1 and clears it.

1. White on the blue is 4.82:1, so the reference's own primary button is legal as published — unlike claude-brand's clay at 4.05:1. Nothing had to move.

The direction

• Archetype. Canvas. A night runs left to right across every row, so a van is a position in time rather than an entry in a list, and the site's own draw is plotted on the same fourteen hours at the same scale.
• Data stance. Chart-first. The screen leads with the number the supplier bills on — peak draw against the contracted ceiling — because that is the one figure that decides whether tonight cost what it should.
• Density. Comfortable. 14px body, which is the reference's own size for everything that is not a headline.
• The one bold decision. The failure state is not red. The reference's published Don't list forbids more than one chromatic colour besides the blue CTA, and the blue is spent on the action. So the three vans that will not reach their departure charge are carried by ground, form and number: a move to the alternate surface with a rule above it, a bar that visibly stops short of the departure mark, a hatched void where the missing charge would be, and the deficit written out. It is also, incidentally, WCAG 1.4.1 satisfied by construction — there is no hue to depend on.

The second state

The three short vans. It is the state the archetype makes hardest: a gantt draws what WILL happen, and the interesting row is the one where what will happen is not enough. Showing it required the whole colour argument above.

Deviations from CONTRACT.md

• §1, one invented value. accent-text #3c67de is not published by the reference. It is the brand blue at its own hue and chroma with lightness moved until it clears 4.5:1 on the worst ground — finding 2. Every other colour in tokens.css is a published value.
• §5, the duration cap. The reference publishes ONE duration, 0.33s, and says in its own guidance to keep every transition there. CONTRACT.md §5 caps an exit at 250ms. The page keeps 330ms for enters and emits a separate 165ms exit rung for anything leaving, which is the smaller departure: the alternative was overriding the one motion decision this language makes.
• §2, the typeface. Universal Sans Display and Universal Sans Text are proprietary and self-hosted. Inter is substituted — the closest open-licensed geometric-humanist grotesque at 400 and 500 — and is not passed off as the original.
• §5, one theme. Light only, because the reference publishes light only. Its one dark value is described as a surface for text over photography, not as a theme, and the other seven values a dark palette needs are published nowhere. The design-notes panel says so on the page.
• The reference is photography-led and this page has no photographs. CONTRACT.md §2 permits inline SVG and data: URIs only, and a depot plan is not a surface that carries a hero image anyway. What is carried across is the reason the photography works there: everything that is not the subject is white space, and the UI gets out of the way.

Findings kept, with reasons

• slop_scan · repeating-stripes ×3 — the hour rules the bars are positioned on, and the hatch that marks a charge deficit. The rule's own text says "if the grid is real, lay content on it instead of drawing it"; the grid here is real and the bars are laid on it in the same percentages, so the drawn rule and the content agree by construction. The hatch is the one way this palette can mark a failure without a second colour.
• craft_lint · disabled-unstyled — the rule looks for class-based disabled: variants. The disabled control here is styled by .btn[disabled] in the page's own stylesheet, with a changed background, a changed label colour and cursor: not-allowed, and it carries aria-describedby naming what would make it live.
• audit_page · apple-touch-icon-missing, manifest-missing — portfolio-wide. These specimens are documents in a portfolio, not installable applications.
• copy_lint · name-drift — see copy-lint.ignore.