Nothing Design

Nothing-Inspired UI/UX Design System

A senior product designer's toolkit trained in Swiss typography, industrial design (Braun, Teenage Engineering), and modern interface craft. Monochromatic, typographically driven, information-dense without clutter. Dark and light mode with equal rigor.

Before starting any design work, declare which Google Fonts are required and how to load them (see references/tokens.md Section 1). Never assume fonts are already available.

---

1. DESIGN PHILOSOPHY

• Subtract, don't add. Every element must earn its pixel. Default to removal.
• Structure is ornament. Expose the grid, the data, the hierarchy itself.
• Monochrome is the canvas. Color is an event, not a default — except when encoding data status (see Section 3).
• Type does the heavy lifting. Scale, weight, and spacing create hierarchy — not color, not icons, not borders.
• Both modes are first-class. Dark mode: OLED black. Light mode: warm off-white. Neither is "derived" — both get full design attention. Ask the user which mode to start with.
• Industrial warmth. Technical and precise, but never cold. A human hand should be felt.

---

2. CRAFT RULES — HOW TO COMPOSE

2.1 Visual Hierarchy: The Three-Layer Rule

Every screen has exactly three layers of importance. Not two, not five. Three.

The test: Squint at the screen. Can you still tell what's most important? If two things compete, one needs to shrink, fade, or move.

Common mistake: Making everything "secondary." Evenly-sized elements with even spacing = visual flatness. Be brave — make the primary absurdly large and the tertiary absurdly small. The contrast IS the hierarchy.

2.2 Font Discipline

Per screen, use maximum:

• 2 font families (Space Grotesk + Space Mono. Doto only for hero moments.)
• 3 font sizes (one large, one medium, one small)
• 2 font weights (Regular + one other — usually Light or Medium, rarely Bold)

Think of it as a budget. Every additional size/weight costs visual coherence. Before adding a new size, ask: can I create this distinction with spacing or color instead?

Rule of thumb: If reaching for a new font-size, it's probably a spacing problem. Add distance instead.

2.3 Spacing as Meaning

Spacing is the primary tool for communicating relationships.

Tight (4–8px)   = "These belong together" (icon + label, number + unit)
Medium (16px)    = "Same group, different items" (list items, form fields)
Wide (32–48px)   = "New group starts here" (section breaks)
Vast (64–96px)   = "This is a new context" (hero to content, major divisions)

If a divider line is needed, the spacing is probably wrong. Dividers are a symptom of insufficient spacing contrast. Use them only in data-dense lists where items are structurally identical.

2.4 Container Strategy (prefer top)

1. Spacing alone (proximity groups items) 2. A single divider line 3. A subtle border outline 4. A surface card with background change

Each step down adds visual weight. Use the lightest tool that works. Never box the most important element — let it float on the background.

2.5 Color as Hierarchy

In a monochrome system, the gray scale IS the hierarchy. Max 4 levels per screen:

--text-display (100%) → Hero numbers. One per screen.
--text-primary (90%)  → Body text, primary content.
--text-secondary (60%) → Labels, captions, metadata.
--text-disabled (40%) → Disabled, timestamps, hints.

Red (#D71921) is not part of the hierarchy. It's an interrupt — "look HERE, NOW." If nothing is urgent, no red on the screen.

Data status colors (success green, warning amber, accent red) are exempt from the "one accent" rule when encoding data values. Apply color to the value itself, not labels or row backgrounds. See references/tokens.md for the full color system.

2.6 Consistency vs. Variance

Be consistent in: Font families, label treatment (always Space Mono ALL CAPS), spacing rhythm, color roles, component shapes, alignment.

Break the pattern in exactly ONE place per screen: An oversized number, a circular widget among rectangles, a red accent among grays, a Doto headline, a vast gap where everything else is tight.

This single break IS the design. Without it: sterile grid. With more than one: visual chaos.

2.7 Compositional Balance

Asymmetry > symmetry. Centered layouts feel generic. Favor deliberately unbalanced composition:

• Large left, small right: Hero metric + metadata stack.
• Top-heavy: Big headline near top, sparse content below.
• Edge-anchored: Important elements pinned to screen edges, negative space in center.

Balance heavy elements with more empty space, not with more heavy elements.

2.8 The Nothing Vibe

1. Confidence through emptiness. Large uninterrupted background areas. Resist filling space. 2. Precision in the small things. Letter-spacing, exact gray values, 4px gaps. Micro-decisions compound into craft. 3. Data as beauty. 36GB/s in Space Mono at 48px IS the visual. No illustrations needed. 4. Mechanical honesty. Controls look like controls. A toggle = physical switch. A gauge = instrument. 5. One moment of surprise. A dot-matrix headline. A circular widget. A red dot. Restraint makes the one expressive moment powerful. 6. Percussive, not fluid. Imagine UI sounds: click not swoosh, tick not chime. Design transitions that feel mechanical and precise.

2.9 Visual Variety in Data-Dense Screens

When 3+ data sections appear on one screen, vary the visual form:

Lead section → heaviest treatment. Secondary → different form. Tertiary → lightest. The FORM varies, the VOICE stays the same.

---

3. ANTI-PATTERNS — WHAT TO NEVER DO

• No gradients in UI chrome
• No shadows. No blur. Flat surfaces, border separation.
• No skeleton loading screens. Use [LOADING...] text or segmented spinner.
• No toast popups. Use inline status text: [SAVED], [ERROR: ...]
• No sad-face illustrations, cute mascots, or multi-paragraph empty states
• No zebra striping in tables
• No filled icons, multi-color icons, or emoji as UI
• No parallax, scroll-jacking, or gratuitous animation
• No spring/bounce easing. Use subtle ease-out only.
• No border-radius > 16px on cards. Buttons are pill (999px) or technical (4–8px).
• Data visualization: differentiate with opacity (100%/60%/30%) or pattern (solid/striped/dotted) before introducing color.

---

4. WORKFLOW

1. Declare fonts — tell the user which Google Fonts to load (see references/tokens.md) 2. Ask mode — dark or light? Neither is default. 3. Sketch hierarchy — identify the 3 layers before writing any code 4. Compose — apply craft rules (Sections 2.1–2.9) 5. Check tokens — consult references/tokens.md for exact values 6. Build components — consult references/components.md for patterns 7. Adapt to platform — consult references/platform-mapping.md for output conventions

---

5. REFERENCE FILES

For detailed token values, component specs, and platform-specific guidance:

• `references/tokens.md` — Fonts, type scale, color system (dark + light), spacing scale, grid, motion, iconography, dot-matrix motif
• `references/components.md` — Cards, buttons, inputs, lists, tables, nav, tags, segmented controls, progress bars, charts, widgets, overlays, state patterns
• `references/platform-mapping.md` — HTML/CSS, SwiftUI, React/Tailwind, Paper output conventions

Nothing Design System — Components

1. CARDS / SURFACES

• Background: --surface or --surface-raised
• Border: 1px solid --border, or none. Radius: 12–16px cards, 8px compact, 4px technical
• Padding: 16–24px. No shadows. Flat surfaces, border separation.

---

2. BUTTONS

All buttons: Space Mono, 13px, ALL CAPS, letter-spacing 0.06em, padding 12px 24px. Min height 44px.

---

3. INPUTS

• Underline preferred (1px solid --border-visible bottom) or full border 8px radius
• Label above: --label style (Space Mono, ALL CAPS, --text-secondary)
• Focus: border → --text-primary. Error: border → --accent, message below in --accent
• Data-entry fields: Space Mono for input text

---

4. LISTS / DATA ROWS

• Dividers: 1px solid --border, full-width. Row padding: 12–16px vertical
• Left: label (Space Mono caps, --text-secondary). Right: value (--text-primary)
• Never alternating row backgrounds. Use dividers.

Stat rows: Label left (Space Mono, ALL CAPS, --text-secondary), value right (color = status color), unit adjacent in --label size. Trend arrow same color as value.

Hierarchical rows: Sub-items indented 16–24px, same divider treatment. No tree lines or expand/collapse — indentation IS the hierarchy.

---

5. TABLES / DATA GRIDS

• Header: --label style, bottom border --border-visible
• Cell text: Space Mono numeric, Space Grotesk text. Cell padding: 12px 16px
• Numbers right, text left. No zebra striping, no cell backgrounds.
• Active row: --surface-raised background, left 2px solid --accent indicator

---

6. NAVIGATION

• Bottom bar mobile, horizontal text bar desktop
• Labels: Space Mono, ALL CAPS. Active: --text-display + dot/underline. Inactive: --text-disabled
• Bracket [ HOME ] GALLERY INFO or pipe HOME | GALLERY | INFO
• Back button: Circular 40–44px, --surface bg, thin chevron <, top-left 16px from edges

---

7. TAGS / CHIPS

• Border: 1px solid --border-visible, no fill. Text: Space Mono, --caption, ALL CAPS
• Radius: 999px (pill) or 4px (technical). Padding: 4px 12px. Active: --text-display border+text

---

8. SEGMENTED CONTROL

• Container: 1px solid --border-visible, pill or 8px rounded
• Active: --text-display bg, --black text (inverted). Inactive: transparent, --text-secondary
• Text: Space Mono, ALL CAPS, --label size. Height: 36–44px. Transition: 200ms ease-out
• Max 2–4 segments

---

9. DATE / PERIOD NAVIGATION

• Layout: < LABEL > — back arrow, label, forward arrow
• Label: Space Mono/Grotesk, ALL CAPS. Arrows: thin chevrons, --text-secondary, 44px touch
• No calendar popovers — linear stepping IS the interaction

---

10. TOGGLES / SWITCHES

• Pill track, circle thumb. Off: --border-visible track, --text-disabled thumb
• On: --text-display track, --black thumb. Min touch target: 44px

---

11. SEGMENTED PROGRESS BARS

The signature data visualization. Discrete blocks — mechanical, instrument-like.

Anatomy: Label + value above, full-width bar of discrete rectangular segments with 2px gaps below.

Segments: Square-ended blocks, no border-radius. Filled = solid status color. Empty = --border (dark) / #E0E0E0 (light).

Overflow: Filled segments continue past "full" mark in status color (typically red).

Sizes: Hero 16–20px, Standard 8–12px, Compact 4–6px height.

Always pair with numeric readout. Bar = proportion, number = precision.

---

12. OTHER DATA VISUALIZATION

• Bar charts: Vertical, white fill, --border remainder. Square ends.
• Gauges: Thin stroke circles + tick marks, numeric readout centered/adjacent.
• Dot grids: Vary opacity/size for heat maps. Uniform spacing.
• Category differentiation: Opacity → pattern → line style → color (last resort).
• Always show numeric value alongside any visual.

Charts: Line 1.5–2px --text-display, average dashed 1px --text-secondary. Axis labels: Space Mono, --caption. Grid: --border, horizontal only. No area fill, no legend boxes — label lines directly.

---

13. WIDGETS (DASHBOARD CARDS)

• --surface bg, 16px radius. Hero metric: large Doto/Space Mono, left-aligned
• Unit: --label size, adjacent. Category: ALL CAPS Space Mono top-left
• Instrument gauges: compass, thermometer, dial motifs

---

14. OVERLAYS & LAYERING

No shadows. Layering through background contrast and borders.

• Modals: Backdrop rgba(0,0,0,0.8), dialog --surface + 1px solid --border-visible + 16px radius, centered max 480px. Close: [ X ] top-right ghost button.
• Bottom sheets: --surface, 2px handle bar centered, 16px top radius, drag-to-dismiss. Full-page sheets: title centered + dismiss button right, sections with --text-secondary headings.
• Dropdowns: --surface-raised, 1px solid --border-visible 8px radius, 44px items. Selected: left 2px accent bar. No shadow.
• Toasts: None. Use inline status text: [SAVED], [ERROR: ...]. Space Mono, --caption, near trigger.

---

15. STATE PATTERNS

• Error: Input border → --accent + message below. Form-level: summary box 1px solid --accent. Inline: [ERROR] prefix. Never red backgrounds or alert banners.
• Empty: Centered, 96px+ padding. Headline --text-secondary, 1 sentence description --text-disabled. Optional dot-matrix illustration. No mascots.
• Loading: Segmented spinner (hardware-style), or segmented bar + percentage. No skeletons — use [LOADING] bracket text.
• Disabled: Opacity 0.4 or --text-disabled. Borders fade to --border.

Nothing Design System — Platform Mapping

1. HTML / CSS / WEB

Load fonts via Google Fonts <link> or @import. Use CSS custom properties, rem for type, px for spacing/borders. Dark/light via prefers-color-scheme or class toggle.

:root {
  --black: #000000;
  --surface: #111111;
  --surface-raised: #1A1A1A;
  --border: #222222;
  --border-visible: #333333;
  --text-disabled: #666666;
  --text-secondary: #999999;
  --text-primary: #E8E8E8;
  --text-display: #FFFFFF;
  --accent: #D71921;
  --accent-subtle: rgba(215,25,33,0.15);
  --success: #4A9E5C;
  --warning: #D4A843;
  --interactive: #5B9BF6;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
}

---

2. SWIFTUI / iOS

Register fonts in Info.plist, bundle .ttf files. Use @Environment(\.colorScheme) for mode switching.

extension Color {
    static let ndBlack = Color(hex: "000000")
    static let ndSurface = Color(hex: "111111")
    static let ndSurfaceRaised = Color(hex: "1A1A1A")
    static let ndBorder = Color(hex: "222222")
    static let ndBorderVisible = Color(hex: "333333")
    static let ndTextDisabled = Color(hex: "666666")
    static let ndTextSecondary = Color(hex: "999999")
    static let ndTextPrimary = Color(hex: "E8E8E8")
    static let ndTextDisplay = Color.white
    static let ndAccent = Color(hex: "D71921")
    static let ndSuccess = Color(hex: "4A9E5C")
    static let ndWarning = Color(hex: "D4A843")
    static let ndInteractive = Color(hex: "5B9BF6")
}

Light mode values in tokens.md Dark/Light table. Derive Font extension from font stack table (trivial: .custom("Doto"/"SpaceGrotesk-Regular"/"SpaceMono-Regular", size:)).

---

3. PAPER (DESIGN TOOL)

Use get_font_family_info to verify fonts before writing styles. Direct hex values (no CSS variables). Dark mode as default canvas, light mode as separate artboard.

Nothing Design System — Tokens

1. TYPOGRAPHY

Font Stack

Why these fonts: Doto = variable dot-matrix (closest to NDot 57). Space Grotesk + Space Mono by Colophon Foundry — same foundry as Nothing's actual typefaces. Shared design DNA.

Type Scale

Typographic Rules

• Doto: 36px+ only, tight tracking, never for body text
• Labels: Always Space Mono, ALL CAPS, 0.06–0.1em spacing, 11–12px ("instrument panel" labels)
• Data/Numbers: Always Space Mono. Units as --label size, slightly raised, adjacent
• Hierarchy: display (Doto) > heading (Space Grotesk) > label (Space Mono caps) > body (Space Grotesk). Four levels max.

---

2. COLOR SYSTEM

Primary Palette (Dark Mode)

Accent & Status Colors

Data status colors: --success = good/in range, --warning = moderate/attention, --accent = bad/over limit, --text-primary = neutral. Apply color to value, not label or background. Labels stay --text-secondary. Trend arrows inherit value color.

Dark / Light Mode

Identical across modes: Accent red, status colors, ALL CAPS labels, fonts, type scale, spacing, component shapes.

Dark feel: Instrument panel in a dark room. OLED black, white data glowing. Light feel: Printed technical manual. Off-white paper (#F5F5F5), black ink. Cards = #FFFFFF on off-white page = subtle elevation without shadows.

---

3. SPACING

Spacing Scale (8px base)

---

4. MOTION & INTERACTION

• Duration: 150–250ms micro, 300–400ms transitions
• Easing: cubic-bezier(0.25, 0.1, 0.25, 1) — subtle ease-out. No spring/bounce.
• Prefer opacity over position. Elements fade, don't slide.
• Hover: border/text brightens. No scale, no shadows.
• No parallax, scroll-jacking, gratuitous animation.

---

5. ICONOGRAPHY

• Monoline, 1.5px stroke, no fill. 24x24 base, 20x20 live area. Round caps/joins.
• Color inherits text color. Max 5–6 strokes.
• Preferred: Lucide (thin), Phosphor (thin). Never filled or multi-color.

---

6. DOT-MATRIX MOTIF

When to use: Hero typography (Doto), decorative grid backgrounds, dot-grid data viz, loading indicators, empty state illustrations.

CSS Implementation

.dot-grid {
  background-image: radial-gradient(circle, var(--border-visible) 1px, transparent 1px);
  background-size: 16px 16px;
}
.dot-grid-subtle {
  background-image: radial-gradient(circle, var(--border) 0.5px, transparent 0.5px);
  background-size: 12px 12px;
}

Dots 1–2px, uniform 12–16px grid. Opacity 0.1–0.2 for backgrounds, full for data. Never as container border or button style.