nothing-design-system-skill

# Nothing Design System Skill > Skill by [ara.so](https://ara.so) — Design Skills collection. A Claude Code skill for generating UI components inspired by Nothing's visual language. Creates monochrome, typographic, industrial interfaces with Swiss typography, OLED blacks, segmented progress bars, and dot-matrix motifs. ## What It Does This skill provides a complete design system that enforces: - **Three-layer visual hierarchy**: Display, body, metadata (nothing more) - **Monochrome palette**: True blacks (#000000) for OLED, pure whites, controlled grays - **Typography stack**: Space Grotesk (display), Space Mono (mono), Doto (dot-matrix) - **Mechanical components**: Segmented progress bars, industrial toggles, instrument-style widgets - **Multi-platform output**: HTML/CSS, SwiftUI, or React/Tailwind ## Installation ```sh # Clone the repository git clone https://github.com/dominikmartn/nothing-design-skill.git # Copy to Claude Code skills directory cp -r nothing-design-skill/nothing-design ~/.claude/skills/ # Restart Claude Code to load the skill ``` Verify installation by typing `/nothing-design` in Claude Code. ## Core Design Tokens ### Color System ```css /* Dark Mode (Primary) */ --nothing-black: #000000; /* OLED black, backgrounds */ --nothing-white: #FFFFFF; /* Text, borders, icons */ --nothing-gray-10: #1A1A1A; /* Subtle elevation */ --nothing-gray-20: #333333; /* Component backgrounds */ --nothing-gray-40: #666666; /* Secondary text */ --nothing-gray-60: #999999; /* Tertiary text */ --nothing-red: #FF0000; /* Accent, alerts */ /* Light Mode */ --nothing-bg-light: #FFFFFF; --nothing-text-light: #000000; --nothing-gray-light-80: #CCCCCC; --nothing-gray-light-90: #E5E5E5; ``` ### Typography Scale ```css /* Display - Space Grotesk */ --font-display: 'Space Grotesk', -apple-system, system-ui, sans-serif; --text-xl: 48px / 1.1; /* Hero */ --text-lg: 32px / 1.2; /* Section headers */ --text-md: 24px / 1.3; /* Card titles */ /* Body - Space Grotesk */ --text-base: 16px / 1.5; /* Body text */ --text-sm: 14px / 1.4; /* Secondary */ --text-xs: 12px / 1.3; /* Metadata */ /* Mono - Space Mono */ --font-mono: 'Space Mono', 'SF Mono', monospace; /* Dot Matrix - Doto */ --font-dot: 'Doto', monospace; ``` ### Spacing System ```css --space-1: 4px; /* Micro */ --space-2: 8px; /* Small */ --space-3: 12px; /* Base */ --space-4: 16px; /* Medium */ --space-6: 24px; /* Large */ --space-8: 32px; /* XL */ --space-12: 48px; /* XXL */ ``` ## Component Patterns ### HTML/CSS Examples #### Button ```html <button class="nothing-btn"> <span class="nothing-btn-label">CONTINUE</span> </button> <style> .nothing-btn { background: #000000; border: 1px solid #FFFFFF; color: #FFFFFF; font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; padding: 12px 24px; cursor: pointer; transition: all 120ms cubic-bezier(0.4, 0, 0.2, 1); } .nothing-btn:hover { background: #FFFFFF; color: #000000; } .nothing-btn:active { transform: scale(0.98); } </style> ``` #### Segmented Progress Bar ```html <div class="nothing-progress"> <div class="nothing-progress-segments"> <div class="segment active"></div> <div class="segment active"></div> <div class="segment active"></div> <div class="segment"></div> <div class="segment"></div> </div> <span class="nothing-progress-label">60%</span> </div> <style> .nothing-progress { display: flex; align-items: center; gap: 12px; } .nothing-progress-segments { display: flex; gap: 4px; flex: 1; } .segment { height: 4px; background: #333333; flex: 1; transition: background 200ms; } .segment.active { background: #FFFFFF; } .nothing-progress-label { font-family: 'Space Mono', monospace; font-size: 12px; color: #999999; min-width: 40px; } </style> ``` #### Card Component ```html <div class="nothing-card"> <div class="nothing-card-header"> <h3 class="nothing-card-title">SYSTEM STATUS</h3> <span class="nothing-card-meta">14:32:05</span> </div> <div class="nothing-card-body"> <p>All systems operational. No alerts detected.</p> </div> </div> <style> .nothing-card { background: #000000; border: 1px solid #333333; padding: 24px; } .nothing-card-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #1A1A1A; } .nothing-card-title { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #FFFFFF; margin: 0; } .nothing-card-meta { font-family: 'Space Mono', monospace; font-size: 12px; color: #666666; } .nothing-card-body { font-family: 'Space Grotesk', sans-serif; font-size: 16px; line-height: 1.5; color: #FFFFFF; } </style> ``` ### SwiftUI Examples #### Button ```swift struct NothingButton: View { let label: String let action: () -> Void var body: some View { Button(action: action) { Text(label.uppercased()) .font(.custom("SpaceGrotesk-Medium", size: 14)) .tracking(0.7) .foregroundColor(.white) .padding(.horizontal, 24) .padding(.vertical, 12) .background(Color.black) .overlay( RoundedRectangle(cornerRadius: 0) .stroke(Color.white, lineWidth: 1) ) } .buttonStyle(NothingButtonStyle()) } } struct NothingButtonStyle: ButtonStyle { func makeBody(configuration: Configuration) -> some View { configuration.label .background(configuration.isPressed ? Color.white : Color.black) .foregroundColor(configuration.isPressed ? Color.black : Color.white) .scaleEffect(configuration.isPressed ? 0.98 : 1.0) .animation(.easeInOut(duration: 0.12), value: configuration.isPressed) } } ``` #### Progress Bar ```swift struct NothingProgress: View { let progress: Double // 0.0 to 1.0 let segments: Int = 5 var body: some View { HStack(spacing: 4) { ForEach(0..<segments, id: \.self) { index in Rectangle() .fill(index < Int(progress * Double(segments)) ? Color.white : Color(hex: "#333333")) .frame(height: 4) } Text("\(Int(progress * 100))%") .font(.custom("SpaceMono-Regular", size: 12)) .foregroundColor(Color(hex: "#999999")) .frame(width: 40) } } } ``` ### React/Tailwind Examples #### Setup Tailwind Config ```javascript // tailwind.config.js module.exports = { theme: { extend: { colors: { 'nothing-black': '#000000', 'nothing-white': '#FFFFFF', 'nothing-gray-10': '#1A1A1A', 'nothing-gray-20': '#333333', 'nothing-gray-40': '#666666', 'nothing-gray-60': '#999999', 'nothing-red': '#FF0000', }, fontFamily: { 'display': ['Space Grotesk', 'sans-serif'], 'mono': ['Space Mono', 'monospace'], 'dot': ['Doto', 'monospace'], }, letterSpacing: { 'nothing': '0.05em', 'nothing-wide': '0.08em', }, }, }, } ``` #### Button Component ```jsx export function NothingButton({ children, onClick, variant = 'primary' }) { return ( <button onClick={onClick} className=" bg-nothing-black border border-nothing-white text-nothing-white hover:bg-nothing-white hover:text-nothing-black active:scale-[0.98] font-display text-sm font-medium tracking-nothing uppercase px-6 py-3 transition-all duration-[120ms] ease-out " > {children} </button> ); } ``` #### Card Component ```jsx export function NothingCard({ title, meta, children }) { return ( <div className="bg-nothing-black border border-nothing-gray-20 p-6"> <div className="flex justify-between items-baseline mb-4 pb-3 border-b border-nothing-gray-10"> <h3 className="font-display text-sm font-medium tracking-nothing-wide uppercase text-nothing-white"> {title} </h3> {meta && ( <span className="font-mono text-xs text-nothing-gray-40"> {meta} </span> )} </div> <div className="font-display text-base leading-relaxed text-nothing-white"> {children} </div> </div> ); } ``` ## Key Design Principles ### 1. Visual Hierarchy (Three Layers Only) ``` DISPLAY → Headers, titles, key actions BODY → Primary content, readable text METADATA → Timestamps, labels, secondary info ``` ### 2. Motion & Transitions ```css /* Fast, mechanical transitions */ --timing-fast: 120ms; --timing-base: 200ms; --timing-slow: 300ms; --easing: cubic-bezier(0.4, 0, 0.2, 1); ``` ### 3. Borders & Dividers - Always 1px solid - Use `#333333` for subtle dividers - Use `#FFFFFF` for strong emphasis - Never rounded corners (stay industrial) ### 4. Interactive States ```css /* Hover */ element:hover { background: invert; color: invert; } /* Active */ element:active { transform: scale(0.98); } /* Focus */ element:focus { outline: 1px solid #FFFFFF; outline-offset: 2px; } ``` ## Common Patterns ### Data Table ```html <table class="nothing-table"> <thead> <tr> <th>PARAMETER</th> <th>VALUE</th>