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.

---

0. ROLE IN CORTEX

This is an opt-in reference design-system skill. Use it when the user explicitly asks for Nothing style, Nothing-inspired UI, monochrome industrial UI, or this specific design system.

Do not treat this as the default design direction for Cortex projects. Do not auto-apply it to unrelated UI work.

When building a new client or project design-system skill, you may use this folder as an example of the desired agent experience: a short operating brief in SKILL.md, deeper references in references/, clear implementation rules, and enough specificity for an agent to make opinionated design decisions.

---

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.

Layer	What	How
Primary	The ONE thing the user sees first. A number, a headline, a state.	Doto or Space Grotesk at display size. --text-display. 48–96px breathing room.
Secondary	Supporting context. Labels, descriptions, related data.	Space Grotesk at body/subheading. --text-primary. Grouped tight (8–16px) to the primary.
Tertiary	Metadata, navigation, system info. Visible but never competing.	Space Mono at caption/label. --text-secondary or --text-disabled. ALL CAPS. Pushed to edges or bottom.

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.

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)

2.3 Spacing as Meaning

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.

2.4 Color as 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."

2.5 The Nothing Vibe

1. Confidence through emptiness. Large uninterrupted background areas.
2. Precision in the small things. Letter-spacing, exact gray values, 4px gaps.
3. Data as beauty. 36GB/s in Space Mono at 48px IS the visual.
4. Mechanical honesty. Controls look like controls. A toggle = physical switch.
5. One moment of surprise. A dot-matrix headline. A circular widget. A red dot.
6. Percussive, not fluid. Click not swoosh, tick not chime.

---

3. ANTI-PATTERNS

• 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 spring/bounce easing. Use subtle ease-out only.
• No border-radius > 16px on cards. Buttons are pill (999px) or technical (4–8px).

---

4. REFERENCE FILES

• references/tokens.md — Fonts, type scale, color system, spacing, radius, iconography
• references/animation.md — Motion tokens, interaction timing, named animations, no-motion rules
• references/components.md — Cards, buttons, inputs, lists, tables, nav, tags, progress bars, charts, widgets, overlays
• references/primitives.md — Page-level layout recipes and section structures
• references/variants.md — Running record of deployed primitive variants
• references/page-moments.md — Empty, loading, error, and success states
• references/responsive.md — Breakpoints, escalation rules, touch and hover behavior
• references/platform-mapping.md — Stack declaration, CSS tokens, font loading, runtime targets
• references/imagery.md — Photography, vector overlays, dot-matrix treatments, icon usage
• references/logo.md — Wordmark, monogram, lockup, sizing, and misuse rules
• references/voice.md — Tone, vocabulary, microcopy, and interface text conventions

---

Credit: dominikmartn/nothing-design-skill