Skip to content
UI Aesthetics

Nothing Design

Tool coverage — filled cells are supported. Full names under “Works with” below.

A named, numbered visual system — Swiss typography plus Nothing's dot-matrix industrial cool, budgeted down to exactly three type layers.

A named, numbered design system rather than a loose set of preferences: exactly three visual layers per screen (primary/secondary/tertiary, each locked to a specific type role), a font budget (two families max, three sizes max, two weights max, treated as a spending limit, not a suggestion), and Nothing’s actual visual signature — OLED-black dark mode, warm off-white light mode, dot-matrix Doto for hero moments, monochrome as the default canvas with color reserved for status.

The “three-layer rule” squint test is the sharpest single idea in it: if two elements still compete for attention after squinting at the screen, one has to shrink, fade, or move. That’s a genuinely testable design principle, not just taste dressed up as one.

Install: git clone the repo, then copy the nothing-design/ folder into ~/.claude/skills/ — no plugin manifest, manual copy only.

Gotcha: it’s explicitly narrow by design — the frontmatter tells the model to “NEVER trigger automatically for generic UI or design tasks,” only when someone explicitly asks for “Nothing style.” Don’t expect it to volunteer opinions on a brief that isn’t asking for this specific aesthetic.

File & content map

SKILL.md

Nothing Design

A named, numbered visual system — Swiss typography plus Nothing's dot-matrix industrial cool, budgeted down to exactly three type layers.

Contents — 5 sections

1. DESIGN PHILOSOPHY
2. CRAFT RULES — HOW TO COMPOSE
2.1 Visual Hierarchy: The Three-Layer Rule
2.2 Font Discipline
2.3 Spacing as Meaning
2.4 Container Strategy (prefer top)
+ 5 more
3. ANTI-PATTERNS — WHAT TO NEVER DO
4. WORKFLOW
5. REFERENCE FILES
content section file folder