← Back to the screen

Design system portfolio

nvidia-brand — Cinder — the record

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

The job queue for a research GPU cluster: sixty-four accelerators across eight nodes, eleven jobs running, nine waiting, and one that will never start.

The second brand specimen, and the opposite end of the corpus from tesla-brand. Where that reference publishes nine colours and four type sizes, this one publishes thirty-one colours and an eighteen-step ramp with front matter naming every token.

Where the style comes from

Transcribed from awesome-design-md/design-md/nvidia/DESIGN.md, read 2026-09-16, and emitted by:

python3 tools/brand_tokens.py nvidia-brand > systems/nvidia-brand/tokens.css
python3 tools/brand_tokens.py nvidia-brand --check
python3 tools/brand_tokens.py --self-test
DecisionTranscribed
Ramp#ffffff #f7f7f7 #cccccc #a7a7a7 #898989 #757575 #5e5e5e #1a1a1a #000000
Chromaticone — NVIDIA Green #76b900, pressed #5a8d00
Link#0046a4 on the white canvas, the brand green on the black one
Error#e52020
Type48 · 36 · 24 · 20 · 17 · 16 · 15 · 14 · 12 · 11 px
Weights400 and 700, and hierarchy is built from those two plus size
Radius2px, everywhere. "Never go to 0, never go past 4"
Spacing8px base, 64px section rhythm
Hold~1280px
Depthno shadow on any card or content surface
Modesa black canvas and a white one, alternating down one page
Motionnot published — hover states are a stated known gap

Three findings, each asserted by --check rather than described.

  1. The reference already solved the link problem, and differently in each mode. An inline link is #0046a4 on the white canvas and the brand green on the black one, and its Don't list then forbids that blue anywhere else — "not a button color, not a chrome color" — and forbids substituting any other green for the brand green in a CTA. Solving accent-text would have invented a dark green for the light theme, which is exactly the substitution the brand rules out by name. Both values are pinned per theme and both were measured against the worst ground in their own.
  1. The brand red cannot quite carry a sentence on the recessed band. #e52020 reads 4.61:1 on white and 4.30:1 on the soft surface, so the page emits error-text solved at the same hue — #e1181b in light, #f5352f in dark. The fill keeps the published red; only the text value moves. This is the general case the generator's semantics mechanism was added for.
  1. Black text on the brand green reads 8.71:1; white on it reads 2.4:1. The reference's own on-primary is #000000, and the solver independently picks it. A specimen that put a white label on that green would be unreadable and would look, at a glance, like every other product.

The direction

The second state

The unplaceable job. It is the state a table-first console makes hardest, because a table's whole promise is that the rows are comparable, and this row is not comparable to the eight above it — it is in a different category wearing the same word.

This specimen is allowed red and the Tesla one is not, which is the most useful thing the two of them say side by side. Same family, same problem, opposite palettes: this reference publishes an error colour and a semantic layer, so the band uses it — and still does not rest on it, because the heading names the cause and the row carries the words "Cannot be placed".

Deviations from CONTRACT.md

Findings kept, with reasons

What the gates changed

Three findings were fixed rather than kept, and two of them improved the page: