feat: Nothing design redesign (spec 028) — design system foundation

.claude/skills/nothing-design/SKILL.md

@@ -0,0 +1,177 @@
+---
+name: nothing-design
+description: 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.
+version: 3.0.0
+allowed-tools: [Read, Write, Edit, Glob, Grep]
+---
+
+# 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.
+
+| 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.
+
+### 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?
+
+| 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.
+
+### 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:
+
+| 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.
+
+---
+
+## 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

.claude/skills/nothing-design/references/components.md

@@ -0,0 +1,153 @@
+# 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
+
+| Variant | Background | Border | Text | Radius |
+|---------|-----------|--------|------|--------|
+| Primary | `--text-display` (#FFF) | none | `--black` | 999px (pill) |
+| Secondary | transparent | `1px solid --border-visible` | `--text-primary` | 999px |
+| Ghost | transparent | none | `--text-secondary` | 0 |
+| Destructive | transparent | `1px solid --accent` | `--accent` | 999px |
+
+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).
+
+| State | Fill | When |
+|-------|------|------|
+| Neutral | `--text-display` | Within normal range |
+| Over limit | `--accent` | Exceeds target |
+| Good | `--success` | Healthy range |
+| Moderate | `--warning` | Caution zone |
+
+**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`.

.claude/skills/nothing-design/references/platform-mapping.md

@@ -0,0 +1,64 @@
+# 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.
+
+```css
+: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.
+
+```swift
+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.