A dot-matrix world rendered in strict black/white/gray monochrome. The whole page sits on a pale #f5f5f5 canvas under a page-wide fine dotted grid overlay — the same 5×7 pixel motif that drives the custom Ndot display face (weight 55, UPPERCASE) used for the wordmark, product names and giant footer links. Three typefaces each get one job: Ndot for dot-matrix headers, the NType82 grotesque for headlines (unusually LIGHT at weight 100, 24/30) and body (16/22.4), and LatteraMono for every button and UI label (UPPERCASE, 11px). Buttons are solid black #000 with white mono labels at radius 6px, 40px tall (60px large). Cards are frosted rgba(255,255,255,.8) at radius 8px with NO shadows and no borders — they float over full-bleed product photography via backdrop-blur, so depth is translucency, never elevation. The signature acid yellow lives only inside the hero imagery, never in the chrome, and the footer inverts to pure black with #fff/.05 mono list rows.
Browse Nothing in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: nothing.tech (live DOM, computed styles), 2026-07-24 (desktop 1512px, UK store). Coverage: home. Dashboard/account: behind login (needs-dashboard). Responsive: breakpoints not captured. Motion: not captured in detail.
Nothing's design is a dot-matrix world rendered in strict monochrome. The whole page is set on a pale gray canvas under a page-wide fine dotted grid overlay (the "5×7 pixel" motif that also drives the custom Ndot display face and the phones' Glyph screens). Chrome is black, white and gray only — the brand's signature acid yellow appears exclusively inside full-bleed product photography, never as a UI token. Elevation is achieved with frosted translucent cards (backdrop-blur, no shadows at all) floating over photographic heroes, and every label, button and footer link is set in either the dot-matrix Ndot face or an uppercase monospace. It reads like a piece of industrial hardware UI: technical, transparent, playfully retro-futuristic. Feels: monochrome, dot-matrix, engineered, playful.
| Token | Hex | Role / usage |
|---|---|---|
| ink | #000000 | Primary text, headlines, buttons, footer field |
| gray-600 | #585a5a | Secondary text, muted labels |
| gray-800 | #333333 | Strong secondary text |
| slate | #526e7a | Rare blue-tinted UI text |
| slate-deep | #265974 | Rare blue-tinted accent (1 use) |
| white | #ffffff | Text on black / on photography |
| Token | Value | Role / usage |
|---|---|---|
| canvas | #f5f5f5 | Page background |
| surface | #ffffff | Solid white panels |
| surface-2 | #eeeeee | Insets, ghost-button fill |
| card-frost | rgba(255,255,255,.8) | Floating product cards + pill nav (backdrop-blur) |
| ink-panel | #000000 | Inverted footer / dark hero cards |
| dark-row | rgba(255,255,255,.05) | Footer list-row surface on black |
| border | rgba(0,0,0,.3) | 1px hairline (rare) |
| Token | Value | Role / usage |
|---|---|---|
| Nothing yellow | not captured (photographic) | Signature acid yellow — appears only in hero imagery, not as a CSS token |
Rule: chrome is monochrome; colour lives only inside product photography. Rule: no shadows — depth comes from frosted translucency over photography.
Three loaded families, each with a strict job:
Ndot-Regular (weight 55) / Ndot-Bold (57) — 5×7 dot-matrix display; wordmark, product names, section + footer headers; UPPERCASE.NType82-Regular / NType82-Headline — Nothing's custom grotesque; headlines and body copy.LatteraMonoLL (400) — monospace; buttons, UI labels, footer nav; UPPERCASE.| Role | Family | Size/Line | Weight | Case |
|---|---|---|---|---|
| Footer / section display | Ndot-Regular | 48px+ | 55 | UPPER |
| Product / eyebrow label | Ndot-Regular | 20 / 20–21.6 | 55 | UPPER |
| Headline (h2) | NType82-Regular | 24 / 30 | 100 | none |
| Body | NType82-Regular | 16 / 22.4 | 400 | none |
| Button / UI label | LatteraMonoLL | 11 | 400 | UPPER |
| Button (large) | LatteraMonoLL | 14 | 400 | UPPER |
Patterns: headlines run unusually LIGHT (weight 100); chrome and labels are always uppercase mono or dot-matrix. No tracking manipulation observed (normal throughout).
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.