---

name: nothing-design description: Use when the user explicitly asks for Nothing style, Nothing design, /nothing-design, or a monochrome industrial interface in the Nothing design language. Do not trigger for generic UI work, and do not override an established product design system unless the user asks for that restyle.

Nothing-Inspired UI/UX Design System

Use this skill only on explicit request. It defines a monochrome, typographically driven, industrial visual language inspired by Nothing.

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

Codex Adaptation

• Trigger only when the user explicitly asks for Nothing style or a direct Nothing-inspired restyle.
• If the request targets an existing product or repo, keep the current information architecture, functional behavior, and page boundaries unless the user explicitly asks for structural changes.
• Apply the visual language to the requested scope only. Do not silently restyle the whole app.
• If the user did not specify dark or light mode, ask which mode to start with before implementation.

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.
• Type does the heavy lifting. Scale, weight, and spacing create hierarchy, not color, icons, or borders.
• Both modes are first-class. Dark mode is OLED black. Light mode is warm off-white. Neither is derived from the other.
• Industrial warmth. Technical and precise, but never cold.

2. Craft Rules

2.1 Visual Hierarchy: The Three-Layer Rule

Every screen has exactly three layers of importance.

The test: Squint at the screen. If two things compete, one must shrink, fade, or move.

2.2 Font Discipline

Per screen, use at most:

• 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 plus one other, usually Light or Medium.

2.3 Spacing as Meaning

Spacing is the primary tool for relationships.

• Tight 4-8px: these belong together
• Medium 16px: same group, different items
• Wide 32-48px: new group
• Vast 64-96px: new context

If a divider line is needed, spacing is probably wrong. Use dividers only in dense, repetitive data views.

2.4 Container Strategy

Prefer visual weight in this order:

1. Spacing alone
2. A single divider line
3. A subtle border outline
4. A surface card with a background change

Never box the most important element if spacing can carry it.

2.5 Color as Hierarchy

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

• --text-display for hero numbers
• --text-primary for body text
• --text-secondary for labels and captions
• --text-disabled for disabled or background metadata

#D71921 is an interrupt, not a default accent.

2.6 Consistency vs. Variance

Be consistent in fonts, spacing rhythm, color roles, component shapes, and alignment.

Break the pattern in exactly one place per screen: an oversized number, a circular widget, a red accent, a Doto headline, or a deliberate void.

2.7 Compositional Balance

Favor deliberate asymmetry over centered generic layouts:

• Large left, small right
• Top-heavy
• Edge-anchored

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

2.8 The Nothing Vibe

1. Confidence through emptiness
2. Precision in the small things
3. Data as beauty
4. Mechanical honesty
5. One moment of surprise
6. Percussive, not fluid

2.9 Visual Variety in Data-Dense Screens

When multiple data sections coexist, vary the form:

• Hero number
• Segmented progress bar
• Concentric rings or arcs
• Inline compact bar
• Number-only with status color
• Sparkline
• Stat row

Vary the form, keep the voice.

3. Anti-Patterns

• No gradients in UI chrome
• No shadows or blur
• No skeleton loading screens
• No toast popups
• No mascots or decorative illustrations
• No zebra striping in tables
• No filled or multi-color icons
• No parallax or gratuitous animation
• No spring or bounce easing
• No oversized border radii on cards

4. Workflow

1. Declare fonts from references/tokens.md
2. Confirm dark or light mode
3. Sketch the three hierarchy layers
4. Compose with the craft rules above
5. Check exact tokens in references/tokens.md
6. Check component patterns in references/components.md
7. Check output conventions in references/platform-mapping.md

5. Reference Files

• references/tokens.md: fonts, type scale, colors, spacing, motion, iconography, dot-matrix motif
• references/components.md: cards, buttons, inputs, lists, tables, nav, tags, progress, charts, overlays, states
• references/platform-mapping.md: HTML/CSS, SwiftUI, React/Tailwind, and paper output conventions