Nothing DESIGN.md

Monochrome, industrial, dot-matrix design built around stark black-and-white surfaces, a single signal red, and pixel-grid typography. Nothing's public brand feels like transparent hardware turned into UI — raw, technical, and deliberately minimal, with a retro-futurist edge.

1. Visual Theme & Atmosphere

Overall Aesthetic

Nothing feels like a technical spec sheet designed by an art school. Pure black and white canvases, dot-matrix headlines, and monospaced details echo the brand's Glyph lighting and transparent-back hardware.

Mood & Feeling

• Minimal, raw, and industrial
• Retro-futurist and playful in restraint
• Confident and editorial
• Technical and precise
• Anti-glossy, anti-gradient

Design Density

Low density. Large product shots and oversized dot-matrix type dominate; supporting details are small, monospaced, and sparse.

Visual Character

• Pure black (#000000) and white (#FFFFFF) as the only surfaces
• Signal red (#D71921) used sparingly for dots, recording indicators, and highlights
• Dot-matrix display font for headlines and numbers
• Monospace/grotesque for body and technical specs
• Thin hairline rules, no gradients, no soft shadows

2. Color Palette & Roles

Core Foundation

Support Palette

3. Typography Rules

Font Stack

css--font-display: "NDot", "NDot 57", "Doto", monospace;
--font-sans: "NType 82", "Helvetica Neue", Arial, sans-serif;
--font-mono: "Lettera Mono", "Space Mono", ui-monospace, monospace;

Type Scale

Typography Philosophy

Type is the brand's signature. The dot-matrix display face is reserved for large moments; everything else stays neutral and technical, often uppercase monospace for labels.

4. Component Stylings

Buttons

css.button-primary {
  background: #000000;
  color: #ffffff;
  border: 1px solid #000000;
  border-radius: 999px;
  min-height: 44px;
  padding: 0 24px;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.button-primary:hover {
  background: #ffffff;
  color: #000000;
}

.button-secondary {
  background: transparent;
  color: #000000;
  border: 1px solid #000000;
  border-radius: 999px;
  min-height: 44px;
  padding: 0 24px;
}

Spec Card

css.spec-card {
  background: #f2f2f2;
  border-radius: 16px;
  padding: 24px;
}

.spec-label {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8a8a8a;
}

.spec-value {
  font-family: var(--font-display);
  font-size: 40px;
}

Indicator Dot

css.indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d71921;
}

Component Notes

• Red appears as a single dot or tiny accent, never as a fill
• Buttons invert black/white on hover instead of shifting hue
• Dot-grid patterns can be used as subtle background texture
• Product imagery is shot on pure white or pure black with no props

5. Layout Principles

Spacing Scale

Layout Behavior

• Hero sections center a single product image with a dot-matrix headline
• Spec sections use asymmetric grids with mono labels and large values
• Store pages use simple product grids on light gray tiles

Whitespace Philosophy

Whitespace is deliberate emptiness — the brand name taken literally. Let objects and type breathe in vast, uncluttered space.

6. Depth & Elevation

Elevation Strategy

Nothing is completely flat. Hierarchy comes from contrast, scale, and hairline rules, not shadows.

css--shadow-none: none;
--rule-light: 1px solid #cccccc;
--rule-dark: 1px solid #333333;

Surface Hierarchy

• Pure black or white canvas
• Light/dark gray tiles for cards
• Hairline rules to separate spec rows

7. Do's and Don'ts

Do

• Stay monochrome with a single red signal accent
• Use dot-matrix type for large headlines and numbers
• Use uppercase monospace for small labels and specs
• Keep surfaces flat and imagery isolated on solid backgrounds

Don't

• Do not use gradients, glows, or soft drop shadows
• Do not introduce additional brand colors
• Do not set body copy in the dot-matrix face
• Do not clutter layouts with decorative imagery

8. Responsive Behavior

Breakpoints

Responsive Rules

• Dot-matrix headlines scale fluidly with clamp() but stay at least 40px
• Pill buttons keep a 44px minimum height
• Spec grids collapse to single-column label/value lists

9. Agent Prompt Guide

Quick Reference

• Pure black and white, one red signal dot
• Dot-matrix display headlines
• Uppercase monospace labels
• Flat, shadowless, industrial minimalism

Prompt Template

textDesign this like Nothing's current public brand style:
- strictly monochrome black and white with a single red (#D71921) indicator accent
- dot-matrix display font for large headlines and numbers
- uppercase monospace for small labels and specs
- pill-shaped black buttons that invert on hover
- flat surfaces with hairline rules, no gradients or shadows
- minimal, industrial, retro-futurist atmosphere with lots of empty space