nothing-design-system

# Nothing Design System Skill > Skill by [ara.so](https://ara.so) — Design Skills collection. A reusable design system for generating UI components inspired by Nothing's visual language: monochrome, typographic, industrial, and mechanical. This skill provides a complete token system, component library, and platform-specific output formats. ## What This Skill Does The Nothing Design Skill encodes a complete design system with: - **Three-layer visual hierarchy**: Display, body, and metadata typography - **Monochrome palette**: Pure blacks (#000000), whites (#FFFFFF), and precise grays - **Industrial components**: Segmented progress bars, mechanical toggles, dot-matrix patterns - **Complete theming**: Full dark and light mode token systems - **Multi-platform output**: HTML/CSS, SwiftUI, React/Tailwind ## Installation Install the skill into your Claude Code skills directory: ```sh git clone https://github.com/dominikmartn/nothing-design-skill.git cp -r nothing-design-skill/nothing-design ~/.claude/skills/ ``` Or manually create `~/.claude/skills/nothing-design/` and copy the skill files. ## Core Design Principles ### Typography Hierarchy The Nothing design system uses exactly three typographic layers: 1. **Display** (Space Grotesk): Headlines, primary actions, hero content 2. **Body** (Space Grotesk): Readable text, descriptions, interface labels 3. **Metadata** (Space Mono): Technical data, timestamps, system info, code ```css /* Display */ font-family: 'Space Grotesk', -apple-system, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; /* Body */ font-family: 'Space Grotesk', -apple-system, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; /* Metadata */ font-family: 'Space Mono', 'SF Mono', monospace; font-size: 12px; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; ``` ### Color Tokens **Dark Mode (Primary)**: - `--bg-primary`: #000000 (pure black for OLED) - `--bg-secondary`: #0A0A0A (raised surfaces) - `--fg-primary`: #FFFFFF (high contrast text) - `--fg-secondary`: #8C8C8C (subdued text) - `--border`: #1F1F1F (subtle dividers) - `--accent`: #FF0000 (Nothing red for critical actions) **Light Mode**: - `--bg-primary`: #FFFFFF - `--bg-secondary`: #F5F5F5 - `--fg-primary`: #000000 - `--fg-secondary`: #737373 - `--border`: #E0E0E0 - `--accent`: #FF0000 ### Spacing System Uses an 8px base unit with a strict scale: ```css --space-1: 4px; /* 0.5 unit */ --space-2: 8px; /* 1 unit */ --space-3: 16px; /* 2 units */ --space-4: 24px; /* 3 units */ --space-5: 32px; /* 4 units */ --space-6: 48px; /* 6 units */ --space-7: 64px; /* 8 units */ ``` ## Component Patterns ### Segmented Progress Bar The signature Nothing component — progress shown as discrete segments: **HTML/CSS**: ```html <div class="segmented-progress"> <div class="segment"></div> <div class="segment"></div> <div class="segment active"></div> <div class="segment active"></div> <div class="segment active"></div> </div> <style> .segmented-progress { display: flex; gap: 4px; height: 4px; } .segment { flex: 1; background: var(--border); transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1); } .segment.active { background: var(--fg-primary); } </style> ``` **SwiftUI**: ```swift struct SegmentedProgress: View { let segments: Int let filled: Int var body: some View { HStack(spacing: 4) { ForEach(0..<segments, id: \.self) { index in Rectangle() .fill(index < filled ? Color.primary : Color.gray.opacity(0.2)) .frame(height: 4) } } } } ``` **React/Tailwind**: ```jsx export function SegmentedProgress({ segments = 5, filled = 3 }) { return ( <div className="flex gap-1 h-1"> {Array.from({ length: segments }).map((_, i) => ( <div key={i} className={`flex-1 transition-colors duration-200 ${ i < filled ? 'bg-black dark:bg-white' : 'bg-gray-200 dark:bg-gray-800' }`} /> ))} </div> ); } ``` ### Mechanical Toggle Industrial-style toggle with precise state indication: **HTML/CSS**: ```html <button class="mechanical-toggle" data-state="off"> <span class="toggle-track"> <span class="toggle-indicator"></span> </span> <span class="toggle-label">OFF</span> </button> <style> .mechanical-toggle { display: flex; align-items: center; gap: 12px; background: transparent; border: none; cursor: pointer; padding: 8px; } .toggle-track { position: relative; width: 48px; height: 24px; border: 1px solid var(--border); display: flex; align-items: center; padding: 2px; } .toggle-indicator { width: 18px; height: 18px; background: var(--fg-primary); transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); } .mechanical-toggle[data-state="on"] .toggle-indicator { transform: translateX(24px); } .toggle-label { font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.1em; } </style> ``` ### Dot Matrix Display Retro digital display aesthetic: **HTML/CSS**: ```html <div class="dot-matrix"> <span class="matrix-text">23:45</span> </div> <style> .dot-matrix { background: var(--bg-secondary); padding: 16px 24px; border: 1px solid var(--border); } .matrix-text { font-family: 'Doto', 'Space Mono', monospace; font-size: 48px; font-weight: 400; letter-spacing: 0.1em; color: var(--fg-primary); text-shadow: 0 0 8px currentColor; } </style> ``` ### Information Card Clean, hierarchical card layout: **HTML/CSS**: ```html <div class="nothing-card"> <div class="card-metadata">SYSTEM STATUS</div> <h3 class="card-title">All Systems Operational</h3> <p class="card-body">Last checked 2 minutes ago. No issues detected.</p> <div class="card-footer"> <span class="footer-label">UPTIME</span> <span class="footer-value">99.97%</span> </div> </div> <style> .nothing-card { background: var(--bg-secondary); border: 1px solid var(--border); padding: 24px; display: flex; flex-direction: column; gap: 12px; } .card-metadata { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.1em; color: var(--fg-secondary); text-transform: uppercase; } .card-title { font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--fg-primary); } .card-body { font-family: 'Space Grotesk', sans-serif; font-size: 14px; line-height: 1.5; color: var(--fg-secondary); } .card-footer { display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--border); font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.05em; } .footer-label { color: var(--fg-secondary); } .footer-value { color: var(--fg-primary); } </style> ``` ## Platform-Specific Mappings ### SwiftUI Components ```swift // Nothing Button struct NothingButton: View { let label: String let action: () -> Void var body: some View { Button(action: action) { Text(label.uppercased()) .font(.custom("SpaceMono", size: 12)) .tracking(1.2) .padding(.horizontal, 24) .padding(.vertical, 12) } .foregroundColor(.primary) .background(Color.clear) .overlay( RoundedRectangle(cornerRadius: 0) .stroke(Color.primary, lineWidth: 1) ) } } // Nothing Card struct NothingCard<Content: View>: View { let content: Content init(@ViewBuilder content: () -> Content) { self.content = content() } var body: some View { VStack(alignment: .leading, spacing: 12) { content } .padding(24) .background(Color(.systemGray6)) .overlay( Rectangle() .stroke(Color(.separator), lineWidth: 1) ) } } ``` ### React/Tailwind Components ```jsx // Base configuration // tailwind.config.js module.exports = { theme: { extend: { fontFamily: { grotesk: ['Space Grotesk', 'sans-serif'], mono: ['Space Mono', 'monospace'], }, colors: { nothing: { bg: '#000000', surface: '#0A0A0A', border: '#1F1F1F', text: '#FFFFFF', muted: '#8C8C8C', accent: '#FF0000', } } } } } // Button component export function NothingButton({ children, onClick, variant = 'primary' }) { return ( <button onClick={onClick} className="px-6 py-3 font-mono text-xs tracking-widest uppercase border border-nothing-border bg-transparent text-nothing-text hover:bg-nothing-surface transition-colors" > {children} </button> ); } // Card component export function NothingCard({ metadata, title, children }) { return ( <div className="p-6 bg-nothing-surface border border-nothing-border flex flex-col gap-3"> {metadata && ( <div className="font-mono text-[10px] tracking-wider uppercase text-nothing-muted"> {metadata} </div> )} {title && ( <h3 className="font-grotesk text-2xl font-bold leading-tight"> {title} </h3> )} <div className="font-grotesk text-sm text-nothing-muted leading-relaxed"> {children} </div> </div> ); } ``` ## Common Workflows ### Generating a Complete Page When asked to create a Nothing-style page: 1. Start with the base HTML structure including font imports 2. Apply the CSS token system 3. Build components using the three-layer hierarchy 4. Add mechanical/industrial details (segmented bars, borders, monospace labels) ```html <!DOCTYPE html> <html lang="en"> <head>