nothing-design-skill

Nothing Design Skill

Skill by ara.so — Design Skills collection.

A design system skill for Claude Code that generates UI components following Nothing's visual language: monochrome, typographic, industrial. Provides reusable design tokens, component patterns, and multi-platform output (HTML/CSS, SwiftUI, React/Tailwind).

What It Does

Nothing Design Skill codifies Nothing's design principles into a reusable system:

• Three-layer visual hierarchy: Display, body, metadata — strict information architecture
• Monochrome palette: OLED blacks (#000000), pure whites (#FFFFFF), precise grays
• Typography: Space Grotesk (display), Space Mono (monospace), Doto (dot-matrix accents)
• Industrial components: Segmented progress bars, mechanical toggles, instrument-style widgets
• Full dark/light modes: Complete token system with semantic color mapping

Installation

Clone the repository and copy the skill folder to your Claude Code skills directory:

git clone https://github.com/dominikmartn/nothing-design-skill.git
cp -r nothing-design-skill/nothing-design ~/.claude/skills/

Restart Claude Code to activate the skill.

Core Design Tokens

Color System

Dark Mode (Primary)

--color-background: #000000;    /* Pure black (OLED) */
--color-surface: #0A0A0A;       /* Elevated surface */
--color-border: #1A1A1A;        /* Subtle dividers */
--color-text-primary: #FFFFFF;  /* Pure white */
--color-text-secondary: #999999; /* Mid gray */
--color-text-tertiary: #666666; /* Dim gray */
--color-accent: #FF0000;        /* Nothing red (sparingly) */

Light Mode

--color-background: #FFFFFF;
--color-surface: #F5F5F5;
--color-border: #E5E5E5;
--color-text-primary: #000000;
--color-text-secondary: #666666;
--color-text-tertiary: #999999;
--color-accent: #FF0000;

Typography Scale

--font-display: 'Space Grotesk', sans-serif;
--font-body: 'Space Grotesk', sans-serif;
--font-mono: 'Space Mono', monospace;
--font-dot: 'Doto', monospace;

--text-display-xl: 48px / 1.1;    /* Hero headlines */
--text-display-lg: 36px / 1.2;    /* Section titles */
--text-display-md: 24px / 1.3;    /* Card headers */
--text-body-lg: 16px / 1.5;       /* Primary text */
--text-body-md: 14px / 1.5;       /* Secondary text */
--text-mono-md: 14px / 1.4;       /* Code, data */
--text-label-sm: 11px / 1.3;      /* Labels, metadata */

Spacing System

--space-2xs: 4px;   /* Tight padding */
--space-xs: 8px;    /* Compact spacing */
--space-sm: 12px;   /* Small gaps */
--space-md: 16px;   /* Default spacing */
--space-lg: 24px;   /* Section spacing */
--space-xl: 32px;   /* Large gaps */
--space-2xl: 48px;  /* Major sections */

Component Patterns

Button (HTML/CSS)

<button class="nothing-btn nothing-btn-primary">
  <span class="nothing-btn-label">Continue</span>
</button>

<style>
.nothing-btn {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 12px 24px;
  text-transform: uppercase;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.nothing-btn:hover {
  background: var(--color-surface);
  border-color: var(--color-text-primary);
}

.nothing-btn-primary {
  background: var(--color-text-primary);
  border-color: var(--color-text-primary);
  color: var(--color-background);
}

.nothing-btn-primary:hover {
  background: var(--color-text-secondary);
  border-color: var(--color-text-secondary);
}
</style>

Segmented Progress Bar

<div class="nothing-progress">
  <div class="nothing-progress-track">
    <div class="nothing-progress-segment"></div>
    <div class="nothing-progress-segment"></div>
    <div class="nothing-progress-segment"></div>
    <div class="nothing-progress-segment"></div>
    <div class="nothing-progress-segment filled"></div>
    <div class="nothing-progress-segment filled"></div>
    <div class="nothing-progress-segment filled"></div>
  </div>
  <span class="nothing-progress-label">70%</span>
</div>

<style>
.nothing-progress {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nothing-progress-track {
  display: flex;
  gap: 4px;
  flex: 1;
}

.nothing-progress-segment {
  height: 4px;
  flex: 1;
  background: var(--color-border);
  transition: background 0.2s ease;
}

.nothing-progress-segment.filled {
  background: var(--color-text-primary);
}

.nothing-progress-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-secondary);
  min-width: 40px;
  text-align: right;
}
</style>

Card Component (React/Tailwind)

export function NothingCard({ title, metadata, children }) {
  return (
    <div className="border border-zinc-900 bg-black p-6">
      {/* Header */}
      <div className="mb-6 border-b border-zinc-900 pb-4">
        <h3 className="font-display text-2xl font-medium tracking-tight text-white">
          {title}
        </h3>
        {metadata && (
          <p className="font-mono text-xs uppercase tracking-wider text-zinc-600 mt-2">
            {metadata}
          </p>
        )}
      </div>
      
      {/* Content */}
      <div className="space-y-4 text-zinc-400">
        {children}
      </div>
    </div>
  );
}

// Usage
<NothingCard title="System Status" metadata="Updated 14:32">
  <div className="flex justify-between items-center">
    <span className="text-sm">Battery</span>
    <span className="font-mono text-white">87%</span>
  </div>
</NothingCard>

Toggle Switch (SwiftUI)

struct NothingToggle: View {
    @Binding var isOn: Bool
    
    var body: some View {
        Button(action: { isOn.toggle() }) {
            HStack(spacing: 2) {
                Rectangle()
                    .fill(isOn ? Color.white : Color(hex: "1A1A1A"))
                    .frame(width: 20, height: 32)
                
                Rectangle()
                    .fill(isOn ? Color(hex: "1A1A1A") : Color.white)
                    .frame(width: 20, height: 32)
            }
            .overlay(
                Rectangle()
                    .strokeBorder(Color(hex: "333333"), lineWidth: 1)
            )
        }
        .animation(.easeInOut(duration: 0.15), value: isOn)
    }
}

// Usage
@State private var notificationsEnabled = true

NothingToggle(isOn: $notificationsEnabled)

Data Table

<table class="nothing-table">
  <thead>
    <tr>
      <th>Device</th>
      <th>Status</th>
      <th>Updated</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Phone (2)</td>
      <td><span class="status-dot active"></span> Online</td>
      <td>2m ago</td>
    </tr>
    <tr>
      <td>Ear (stick)</td>
      <td><span class="status-dot"></span> Offline</td>
      <td>1h ago</td>
    </tr>
  </tbody>
</table>

<style>
.nothing-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-display);
}

.nothing-table th {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
  text-align: left;
  padding: 8px 16px;
  border-bottom: 1px solid var(--color-border);
}

.nothing-table td {
  font-size: 14px;
  color: var(--color-text-primary);
  padding: 16px;
  border-bottom: 1px solid var(--color-border);
}

.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-tertiary);
  margin-right: 8px;
}

.status-dot.active {
  background: #00FF00;
}
</style>

Design Principles

Visual Hierarchy (Three Layers Only)

1. Display: Headlines, primary actions, key metrics
2. Body: Descriptive text, secondary actions, content
3. Metadata: Labels, timestamps, auxiliary information

Never use more than three levels in a single view.

Typography Rules

• Space Grotesk: All UI text, headlines, buttons
• Space Mono: Data, codes, timestamps, technical info
• Doto: Decorative accents only (sparingly)
• Letter spacing: 0.02em for buttons/labels, tighter for display
• Line height: 1.1-1.3 for display, 1.5 for body text

Motion & Transitions

/* Standard easing */
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);

/* Mechanical snap */
transition: all 0.1s cubic-bezier(0.4, 0, 1, 1);

/* Smooth fade */
transition: opacity 0.2s ease;

Spacing Consistency

• Use 4px grid system
• Default gap: 16px
• Section spacing: 24px or 32px
• Never arbitrary values

Platform-Specific Output

Generating HTML/CSS

User: "Create a nothing-style settings panel with toggles"

AI generates:
- Semantic HTML structure
- Inline <style> with CSS variables
- Self-contained component

Generating SwiftUI

User: "Make a nothing design stats card in SwiftUI"

AI generates:
- SwiftUI View struct
- Color extensions for hex values
- Proper spacing/font modifiers

Generating React/Tailwind

User: "Build a nothing-inspired navigation bar with React"

AI generates:
- Functional component
- Tailwind classes matching token values
- TypeScript types if requested

Common Patterns

Status Indicators

<!-- Dot indicator -->
<div class="status-indicator">
  <span class="status-dot active"></span>
  <span class="status-label">Connected</span>
</div>

<!-- Segmented bar -->
<div class="signal-strength">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar active"></div>
  <div class="bar active"></div>
</div>

Dot-Matrix Numerals (Doto Font)

<span class="dot-display">88:88</span>

<style>
.dot-display {
  font-family: var(--font-dot);
  font-size: 48px;
  letter-spacing: 0.1em;
  color: var(--color-text-primary);
}
</style>

Loading States

<div class="nothing-loader">
  <div class="loader-segment"></div>
  <div class="loader-segment"></div>
  <div class="loader-segment"></div>
</div>

<style>
@keyframes loadPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.nothing-loader {
  display: flex;
  gap: 4px;
}

.loader-segment {
  width: 4px;
  height: 16px;
  background: var(--color-text-primary);
  animation: loadPulse 1.2s ease-in-out infinite;
}

.loader-segment:nth-child(2) { animation-delay: 0.2s; }
.loader-segment:nth-child(3) { animation-delay: 0.4s; }
</style>

Troubleshooting

Fonts Not Loading

Include Google Fonts in your HTML head or use system fallbacks:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">

CSS fallback:

--font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;

OLED Black Not Pure Black

Ensure you're using hex #000000, not #000 or rgb values. Some design tools auto-adjust to #0A0A0A.

Components Look Too Dense

Nothing design is intentionally compact. If needed for accessibility:

• Increase touch targets to 44px minimum
• Add --space-md (16px) padding to interactive elements
• Maintain visual density through borders, not spacing

Dark/Light Mode Switching

Use CSS custom properties and data attributes:

<html data-theme="dark">

:root[data-theme="dark"] {
  --color-background: #000000;
  --color-text-primary: #FFFFFF;
}

:root[data-theme="light"] {
  --color-background: #FFFFFF;
  --color-text-primary: #000000;
}

Toggle with JavaScript:

document.documentElement.dataset.theme = isDark ? 'dark' : 'light';

Advanced Techniques

Glitch Effect (Brand Element)

@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

.glitch-text {
  animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

Grid Overlay Pattern

.nothing-grid-bg {
  background-image: 
    linear-gradient(var(--color-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
  background-size: 20px 20px;
}

This skill provides everything needed to generate consistent, authentic Nothing-style UI across platforms. Focus on clarity, restraint, and mechanical precision.