Nothing design system

What font does Nothing use?

Nothing’s website uses NType82 Regular for headings and Helvetica Neue for body text. NType82 Regular is not on Google Fonts; the closest free match is Figtree; Helvetica Neue is not on Google Fonts; the closest free match is Inter Tight.

Nothing colour palette

Nothing’s home page is light (#F4F4F4 background, #040404 text) and uses #040404 for its main actions. Its palette: #F4F4F4, #040404, #D8D9D9, #FFFFFF, #595A5A, #3C3C3C.

• #F4F4F4
  70.4% · backgrounds
• #040404
  14.8% · backgrounds
• #D8D9D9
  9.5% · backgrounds
• #FFFFFF
  4.5% · backgrounds, text
• #595A5A
  0.3% · text
• #3C3C3C
  0.2% · backgrounds, text
• #FFC700
  0.1% · backgrounds

Type scale

Each size the page sets text in, with its weight and line height. Nothing’s largest type is 48px at weight 400.

Spacing and shape

Spacing sits on a 4px grid: 4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 40px, 56px, 64px, 80px.

Corner radii: 1px, 3px, 4px, 5px, 6px, 8px, 10px, pill. 1 shadow level measured.

What makes Nothing look like Nothing

Almost entirely neutral: 99% of the page is painted in #F4F4F4 and #040404.

#FFC700 is an accent: 0.1% of the page, as small fills such as buttons and badges. Keep it to small areas.

The largest type (48px NType82-Regular) is regular weight, not bold (400).

Very airy: text covers 3% of the page. Sections sit about 32px apart.

Nothing DESIGN.md for Claude Code, Cursor and Lovable

A DESIGN.md is the brief an AI coding tool reads before it writes UI. This one carries everything on this page as rules a model follows: the allowed colours and what each is for, the fonts with free stand-ins, the type scale, spacing, corners, and the things Nothing’s design never does.

Put it in your project root and ask your tool to follow it: “Read DESIGN.md and build [your product] in this design language.” It describes a style, not Nothing’s product, so use your own name, words and images.

Download Nothing DESIGN.md · View it as text

As CSS variables

The measured values as CSS custom properties, with free fonts standing in for licensed ones. Use them to learn from or to start a project in a similar style; Nothing’s name, logo, words and images are theirs.

@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@300;400&display=swap");

:root {
  --color-background: #F4F4F4; /* Background */
  --color-surface: #FFFFFF; /* Surface */
  --color-text: #040404; /* Text */
  --color-text-muted: #595A5A; /* Text muted */
  --color-action: #040404; /* Action */
  --color-on-action: #FFFFFF; /* On action */
  --color-warning: #FFC700; /* Warning */
  --color-d8d9d9: #D8D9D9; /* 9.5% of the page, as fills */
  --font-body: "helvetica neue", "Inter Tight", sans-serif; /* helvetica neue on the site; Inter Tight renders */
  --font-interface: "Arial", sans-serif; /* Arial */
  --font-code: "LatteraMonoLL", "JetBrains Mono", monospace; /* LatteraMonoLL on the site; JetBrains Mono renders */
  --font-display: "NType82-Regular", "Figtree", sans-serif; /* NType82-Regular on the site; Figtree renders */
  --type-display-large: 48px; /* Display Large, weight 400 */
  --type-display-large-leading: 48px;
  --type-display-small: 40px; /* Display Small, weight 400 */
  --type-display-small-leading: 40px;
  --type-headline-large: 32px; /* Headline Large, weight 400 */
  --type-headline-large-leading: 32px;
  --type-headline-small: 24px; /* Headline Small, weight 400 */
  --type-headline-small-leading: 26.4px;
  --type-title-large: 20px; /* Title Large, weight 57 */
  --type-title-large-leading: 20px;
  --type-title-small: 18px; /* Title Small, weight 400 */
  --type-title-small-leading: 25.2px;
  --type-body: 16px; /* Body, weight 400 */
  --type-body-leading: 20.8px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-25: 100px;
  --space-28: 112px;
  --space-36: 144px;
  --radius-xs: 1px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 5px;
  --radius-xl: 6px;
  --radius-2xl: 8px;
  --radius-3xl: 10px;
  --radius-full: 9999px;
}

How this was measured

PikSpec’s scanner read the nothing.tech home page in Chrome at 1440px wide on 15 October 2026: the computed styles of its elements, the fonts that rendered and how much of the page each colour covers. Websites change; capture the page yourself with PikSpec for today’s values, any page, and exports in five formats.

Nothing is a trademark of its owner. This page is an independent measurement and is not affiliated with or endorsed by Nothing.

Similar light designs: Airbnb · Airtable · Allbirds · Anthropic · Apple · Arc

Contact PikSpec

Email support@pikspec.com for support, privacy requests or content reports.