This skill should be used when the user explicitly says "Nothing style", "Nothing design", "/nothing-design", or directly asks to use/apply the Nothing design system. NEVER trigger automatically for generic UI or design tasks.
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.
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.
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.
Per screen, use maximum:
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?
| Decision | Size | Weight | Color |
|---|---|---|---|
| Heading vs. body | Yes | No | No |
| Label vs. value | No | No | Yes |
| Active vs. inactive nav | No | No | Yes |
| Hero number vs. unit | Yes | No | No |
| Section title vs. content | Yes | Optional | No |
Rule of thumb: If reaching for a new font-size, it's probably a spacing problem. Add distance instead.
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.
Each step down adds visual weight. Use the lightest tool that works. Never box the most important element — let it float on the background.
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.
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.
Asymmetry > symmetry. Centered layouts feel generic. Favor deliberately unbalanced composition:
Balance heavy elements with more empty space, not with more heavy elements.
36GB/s in Space Mono at 48px IS the visual. No illustrations needed.When 3+ data sections appear on one screen, vary the visual form:
| Form | Best for | Weight |
|---|---|---|
| Hero number (large Doto/Space Mono) | Single key metric | Heavy — use once |
| Segmented progress bar | Progress toward goal | Medium |
| Concentric rings / arcs | Multiple related percentages | Medium |
| Inline compact bar | Secondary metrics in rows | Light |
| Number-only with status color | Values without proportion | Lightest |
| Sparkline | Trends over time | Medium |
| Stat row (label + value) | Simple data points | Light |
Lead section → heaviest treatment. Secondary → different form. Tertiary → lightest. The FORM varies, the VOICE stays the same.
[LOADING...] text or segmented spinner.[SAVED], [ERROR: ...]references/tokens.md)references/tokens.md for exact valuesreferences/components.md for patternsreferences/platform-mapping.md for output conventionsFor 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 motifreferences/components.md — Cards, buttons, inputs, lists, tables, nav, tags, segmented controls, progress bars, charts, widgets, overlays, state patternsreferences/platform-mapping.md — HTML/CSS, SwiftUI, React/Tailwind, Paper output conventions