Nothing Design System

Overview

Nothing's marketing site is the most typographically distinct consumer electronics brand in the directory. Dot-Matrix as Identity. Every product name — phone(2a), phone(4s) pro, headphone(1), ear(open) — renders in Ndot, a proprietary custom font where each character is constructed from a grid of circular dots resembling a transit departure board or a pocket calculator display. The parenthetical model numbers are intentional naming convention, not afterthought punctuation. This single typographic move makes Nothing's hardware look more "considered" than any color palette or illustration could — Samsung and Apple use bespoke display sans-serifs optimized for marketing legibility, and Nothing uses a dot-matrix display font optimized for industrial readability.

The chromatic system is the most restrained in the directory: pure black, pure white, a mid-gray for secondary text, and a light-gray hairline. No accent, no brand voltage, no interactive highlight color. The only CSS custom properties declared are --color-dark (#000000) and --color-light (#ffffff). Where OnePlus (Nothing's spiritual predecessor) leans on a red voltage and Samsung leans on a gradient mesh, Nothing gives the hardware photography the entire chromatic job. Editorial fashion-style product photography — close-cropped, high-contrast, often with model wearing the product — carries all the visual energy the palette deliberately withholds.

Key Characteristics:

• Zero brand color — ink ({colors.ink}) and canvas ({colors.canvas}) are the only fill colors in the system; {colors.ink-muted} and {colors.hairline} add two structural neutrals.
• Ndot dot-matrix product names at 20-40px uppercase — the single most distinctive typographic element, appearing wherever a product model is identified.
• NType82 ultra-light (weight 100) at 24-32px for editorial headlines — one of the lowest display weights in the consumer electronics category.
• LatteraMonoLL uppercase monospace at 11-14px for every button, label, nav link, and CTA — no mixed-case utility text anywhere.
• Fashion-editorial product photography: model + device, dramatically cropped, high contrast, gray/dark backgrounds.
• 6px contained rounding on buttons; 8px on cards — no pill treatment, no sharp zero-radius flat surfaces.
• Store-locator dialog visible in the screenshot: a white floating card with the same ink/canvas palette, Ndot for the destination label, LatteraMonoLL for actions.

Colors

Text

• Ink ({colors.ink} — #000000): frequency 236 — 228 as text, 8 as background fill. The dominant text color and the primary button fill. Wired in CSS as --color-dark. Used for every heading, label, body text instance, and the primary CTA button background.
• Ink Muted ({colors.ink-muted} — #585a5a): frequency 4 — used as secondary text, specifically the product-description sub-paragraphs below editorial headlines. Not wired as a CSS variable on the captured surface; appears as a computed value.

Surface

• Canvas ({colors.canvas} — #ffffff): frequency 78 — 58 as text, 20 as background. The page background for below-hero content sections and the secondary button fill. Wired as --color-light and --tw-ring-offset-color. Also used as white text on dark photography panels.

Hairline

• Hairline ({colors.hairline} — #e5e7eb): frequency 287 as border — the dominant border tone, used on every card outline, dialog border, input border, and structural divider. This is the system's single-hairline approach: one neutral gray handles all border work.

Typography

Font Families

The system runs three distinct proprietary typefaces with zero overlap in their roles:

1. Ndot — a dot-matrix display font for product names and model identifiers. Appears at 20-40px in uppercase. No other brand in the electronics category uses a dot-matrix font for product naming.
2. NType82 — an ultra-light editorial sans (weight 100 for headlines, weight 400 for body paragraphs) used for section editorial framing. Not for labels or buttons.
3. LatteraMonoLL — an uppercase monospace for every label, button, CTA, nav link, product tag, and caption. Always rendered in uppercase via CSS text-transform.

The fallback for all three is sans-serif — there is no system-ui safety stack, suggesting the fonts are loaded as custom web fonts and the brand is willing to have a degraded fallback on miss.

Hierarchy

Principles

The display weight in NType82 (weight 100) is among the lowest in any consumer brand system. Ultra-light type at 24-32px recedes visually — it frames the photography without competing. Every label and button is uppercase mono at 11px. The dot-matrix product name is the single bold typographic moment, which is also the product name. The system is saying: the product is the headline; the editorial text is the caption; the labels are the utility.

Note on Font Substitutes

Ndot is proprietary with no direct open-source equivalent. Silkscreen or Press Start 2P approximate the dot-matrix aesthetic at display sizes. NType82 (ultra-light editorial sans) substitutes with Helvetica Neue Thin (weight 100) or Aktiv Grotesk Thin. LatteraMonoLL (uppercase mono utility) substitutes cleanly with Space Mono, IBM Plex Mono, or JetBrains Mono at the same sizes, rendered uppercase via text-transform: uppercase.

Layout

Spacing System

• Base unit: 8px.
• Tokens: {spacing.xs} 2px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.base} 16px · {spacing.lg} 32px · {spacing.xl} 40px · {spacing.2xl} 56px.
• Product section internal: 16px horizontal padding; the device photograph bleeds edge-to-edge above the text row.
• Nav height: 64px (captured as --header-height CSS variable).
• Grid cell width: 355px (captured as --grid-item-width); the product grid uses this fixed-width cell for each product card.

Grid & Container

• Max content width: full-bleed — each product section runs edge-to-edge at the viewport width.
• Product grid: fixed-width 355px cells (--grid-item-width), variable number of columns by viewport. Each cell holds one product photograph and its label stack.
• Hero: full-bleed photography (store locator dialog appears as a centered overlay panel on first visit).
• Below-fold product sections: alternating full-bleed photography bands, one per product line (headphone, phone, ear).

Rhythm

The page scrolls through a sequence of product photography bands — one per product — with no interstitial content sections. Each band is full-viewport height with the product photograph as the surface and a text label stack at the bottom. There are no editorial content sections between products.

Elevation

The system has one documented elevation tier — the store-locator dialog. The floating white dialog card with a {colors.hairline} border appears centered over the photography as a modal-style panel. No shadow is visible; the border alone provides the boundary. All other surfaces are flat with hairline borders.

• Flat (no shadow): all product photography panels, the nav, the footer.
• Dialog elevation: the store-locator card uses a hairline border only — no shadow, no backdrop.

Shapes

The radius scale is minimal contained:

• {rounded.none} 0px — photography panels; all full-bleed images are square-edged.
• {rounded.sm} 6px — primary and secondary buttons, the "Discover" CTA, and most interactive surfaces.
• {rounded.md} 8px — product cards, the store-locator dialog, input fields.

There is no pill treatment. Nothing's buttons are slightly rounded rectangles — 6px — rather than the full-pill CTAs used by community and social products. The minimal rounding is consistent with the industrial precision of the brand's hardware aesthetic.

Components

button-primary — Ink {colors.ink} fill, white text, {rounded.sm} 6px radius, 16px padding, 40px height. LatteraMonoLL 11px uppercase. "Discover" is the canonical instance on every product section. No border.

button-secondary — White {colors.canvas} fill, ink text, 1px ink border, {rounded.sm} 6px radius, 16px padding. Used for "Stay on United Kingdom" in the store-locator dialog.

top-nav — White {colors.canvas} surface, 64px height. "Nothing" wordmark flush left, product navigation links in LatteraMonoLL 11px uppercase, right-aligned shopping/account icons.

nav-link — Transparent background, white text (on dark photography hero) in {typography.nav-link} (11px uppercase mono), 8px top padding, right padding. No hover fill captured.

hero-heading — Ink text, NType82 24px / weight 100. The product section caption headline (e.g., "Our new campaign for Headphone (a)").

product-label — Transparent background, ink text, Ndot 20px / weight 55. The product model identifier (e.g., "headphone(1)", "phone(4s)pro"). Always uppercase, always Ndot.

body-paragraph — White text on photography panels, NType82 24px / 400. The editorial copy below the product label.

body-paragraph-muted — Ink-muted {colors.ink-muted} text, NType82 16px / 400. Product description sub-copy at the bottom of each section.

card — White fill, {rounded.md} 8px radius, 16px padding, 1px hairline border. The default container for product listing items.

product-section — Full-bleed photography panel, no border-radius, 0 padding. Each product occupies one of these bands. Text overlays position at the bottom of the panel.

text-input — White fill, ink text, {rounded.sm} 6px radius, 12×16px padding, 40px height, hairline border.

category-tag — Transparent fill, ink text, LatteraMonoLL 14px uppercase, {rounded.sm} 6px radius, 8×16px padding, hairline border. Used for product category chips above product headlines.

footer — Ink {colors.ink} fill, white text, LatteraMonoLL 11px uppercase, 32×16px padding. Monochrome reversal from the canvas body.

locator-dialog — White fill, {rounded.md} 8px radius, 16px padding, hairline border. The store-selection modal overlay showing destination country in Ndot with LatteraMonoLL action buttons.

Do's and Don'ts

Do use Ndot exclusively for product model labels. The dot-matrix font is the single most recognizable element in the Nothing system; applying it to section headings, CTA buttons, or body copy would collapse the signal into noise.

Do render all labels, buttons, nav links, and captions in uppercase. LatteraMonoLL lowercase is not used anywhere on the captured surface — text-transform: uppercase is structural, not decorative.

Do let the photography carry all chromatic work. The page has no color in its UI layer; the photography provides the only warm tones, skin tones, and material textures. Replacing full-bleed product photography with illustrations or gradients would expose the palette's deliberate emptiness as a deficit rather than a statement.

Do hold the button radius at {rounded.sm} (6px). The slightly-rounded rectangle is the shape language; introducing pill buttons would borrow from a social or lifestyle brand register and conflict with the industrial hardware positioning.

Don't use NType82 (the editorial ultra-light sans) for labels, buttons, or navigation. It is strictly the editorial voice — section headings and product editorial paragraphs only. Utility text belongs to LatteraMonoLL.

Don't introduce any color to the UI layer, even as a hover state or focus ring. The Nothing system declares only --color-dark and --color-light. Adding even a subtle blue focus ring or green hover tint would be the loudest chromatic element on the page and would break the monochrome discipline.

Don't use LatteraMonoLL at mixed case. The font appears in uppercase across all 30 captured instances. Setting it to sentence case or title case reads as a system error rather than a typographic choice.

Don't apply {rounded.md} (8px) to buttons. Cards and dialogs use 8px; buttons use 6px. The differentiation is subtle but consistent and distinguishes the "interactive" tier from the "container" tier.

Known Gaps

• Hover and active states: only resting states are captured. Nothing's site appears to use subtle scale transforms on product photography on hover, but these are not reflected in the token spec.
• Cart and checkout surfaces: the --aside-width (400px) and --cart-aside-summary-height (250px / 300px) CSS variables are captured but the cart panel itself is not visible in the marketing screenshot.
• Color product variants: some Nothing devices come in colored variants (the dot-matrix display on the phone glows yellow/amber). These product-specific accent colors do not appear in the marketing token set.
• Mobile layout: the screenshot captures a desktop breakpoint. The 355px fixed grid cell and the 400px aside panel suggest careful mobile breakpoints that are not reflected here.
• Dark mode: the page does not appear to have a declared dark mode; the footer reversal (ink fill, white text) is the only dark-surface moment.
• Animation: Nothing's marketing site is known for subtle animated reveals on scroll. End-state values only are captured here.