# Nothing — Marketing Site Design Spec

> 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Text
| 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 |

### Surfaces & borders
| 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) |

### Brand
| 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.

## 3. Typography Rules

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).

## 4. Component Stylings

### Buttons
- **Primary**: bg `#000000`, text `#ffffff`, `LatteraMonoLL` 11px UPPERCASE, radius `6px`, padding `16px`, height `40px`.
- **Primary (large)**: same, height `60px`, padding `20px 40px`, 14px.
- **Ghost / secondary** (cookie modal): bg `#eeeeee`, ink text, radius `8px`, 700 Arial fallback.
- **Region CTA**: black fill, radius `8px`, 14px mono uppercase.

### Cards / panels
- Product card: bg `rgba(255,255,255,.8)` frosted, radius `8px`, **no shadow, no border** — floats on photographic hero via backdrop-blur. Anatomy: Ndot label → NType82 headline → product PNG → black DISCOVER button.

### Nav
- Floating centered pill, frosted `rgba(255,255,255,.8)` + backdrop-blur, wordmark "NOTHING (R)" in Ndot dot-matrix, hamburger left + bag icon right, height ~64–80px.

### Footer list rows
- Stacked full-width rows on black, surface `rgba(255,255,255,.05)`, `LatteraMonoLL` UPPERCASE label left + pixel/dot icon right (SUPPORT, NEWSLETTER, STORE, LANGUAGE…).

### Inputs
- Not captured in detail.

## 5. Layout Principles

- Full-bleed photographic hero sections; content cards ~480px wide anchored bottom-left, floating over the photo.
- Page-wide fine **dotted grid overlay** (~40px pitch) sits over every section — dark dots on light canvas, white dots on the black footer.
- Section rhythm: photo hero → light product sections on `#f5f5f5` → inverted black footer with giant Ndot links.
- Floating pill nav centered at the top, detached from the page edges.

## 6. Depth & Elevation

- Radii: `3px` (tiny), `6px` (buttons/controls), `8px` (cards / region CTA), `9999px` (icon buttons / pills — heavily used).
- Elevation: **no box-shadows anywhere** (computed `box-shadow: none` throughout). Depth is frosted translucency + backdrop-blur over photography.
- Borders: rare 1px `rgba(0,0,0,.3)`.

## 7. Motion

- Not captured in detail. Observed: minimal micro-transitions on hover; heroes are static photography, no scroll-driven animation library detected on this pass.

## 8. Backgrounds, Effects & WebGL

- Full-bleed product **photography** as hero backdrops (people wearing product on the brand yellow set).
- Signature page-wide **dotted-grid overlay** (dot-matrix motif) adapting to light/dark sections.
- **Frosted translucent** cards + pill nav via `backdrop-filter` blur.
- No CSS gradients, canvas or WebGL observed. Flat, image-led surfaces.

## 9. Do's and Don'ts

### Do
- Keep all chrome black / white / gray; let colour appear only inside product photography.
- Set the wordmark, product names and section headers in the dot-matrix Ndot face, UPPERCASE.
- Label every button and UI control in uppercase monospace (`LatteraMonoLL`), 11px.
- Run headlines LIGHT — NType82 at weight 100, 24/30.
- Float frosted `rgba(255,255,255,.8)` cards over full-bleed photography; use backdrop-blur, never a shadow.
- Overlay the fine dotted grid across the whole page as the connective motif.
- Invert to a pure-black footer with giant Ndot links and `rgba(255,255,255,.05)` list rows.
- Keep buttons black at radius 6px, cards at 8px.

### Don't
- Don't introduce colour into the chrome — no coloured buttons, links or accents (yellow stays in photography).
- Don't add box-shadows; depth is translucency only.
- Don't set headlines bold — the display weight is 100, not 700.
- Don't use a generic sans for labels — chrome is mono or dot-matrix.
- Don't drop the dotted grid or the dot-matrix wordmark; they are the brand.

## 10. Responsive Behavior

- Not captured (desktop 1512px only). A hamburger menu is present in the pill nav for mobile.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#f5f5f5` · Text `#000000` · Muted `#585a5a` · Card `rgba(255,255,255,.8)` · Border `rgba(0,0,0,.3)` · Footer `#000000`
- Fonts: `Ndot-Regular` (dot-matrix display) / `NType82-Regular` (grotesque) / `LatteraMonoLL` (mono UI) · Body 16px · Radius 6px control / 8px card · Button height 40px
- Buttons: black `#000` fill, white mono UPPERCASE 11px, radius 6px · No shadows anywhere · Depth = frosted translucency

<nothing_design_language>
Use the Nothing design language: a strict black/white/gray monochrome world on a pale `#f5f5f5` canvas under a page-wide fine dotted grid overlay. Three typefaces, each with a job: the dot-matrix Ndot face (weight 55, UPPERCASE) for the wordmark, product names and section headers; NType82 grotesque for headlines (weight 100, 24/30) and body (16/22.4, 400); LatteraMono monospace (UPPERCASE, 11px) for every button and UI label. Buttons are solid black `#000` with white mono uppercase text at radius 6px, 40px tall. 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; depth is translucency, never elevation. The signature acid yellow lives only inside the hero photography, never in the chrome. Invert to a pure-black footer with giant Ndot links and `rgba(255,255,255,.05)` list rows. Feels: monochrome, dot-matrix, engineered, playful. Avoid: coloured chrome or accents, box-shadows, bold headlines, generic sans labels, and dropping the dotted grid.
</nothing_design_language>