Nothing Design System Skill

Skill by 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:

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:

Display (Space Grotesk): Headlines, primary actions, hero content
Body (Space Grotesk): Readable text, descriptions, interface labels
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:

Start with the base HTML structure including font imports
Apply the CSS token system
Build components using the three-layer hierarchy
Add mechanical/industrial details (segmented bars, borders, monospace labels)

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nothing Interface</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --bg-primary: #000000;
      --bg-secondary: #0A0A0A;
      --fg-primary: #FFFFFF;
      --fg-secondary: #8C8C8C;
      --border: #1F1F1F;
      --accent: #FF0000;
    }
    
    @media (prefers-color-scheme: light) {
      :root {
        --bg-primary: #FFFFFF;
        --bg-secondary: #F5F5F5;
        --fg-primary: #000000;
        --fg-secondary: #737373;
        --border: #E0E0E0;
      }
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      background: var(--bg-primary);
      color: var(--fg-primary);
      font-family: 'Space Grotesk', sans-serif;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <!-- Component markup here -->
</body>
</html>

Creating Custom Components

Follow this pattern for any new component:

Structure: Minimal, semantic HTML
Typography: Use display/body/metadata layers
Colors: Only token variables, never hardcoded
Spacing: Multiples of 8px base unit
Motion: Cubic bezier easing, 200-300ms duration
States: Clear visual feedback (borders, fills, transforms)

Troubleshooting

Fonts Not Loading

Ensure font imports are in the

<head>

html

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

For Doto (dot matrix font), use:

html

<link href="https://fonts.googleapis.com/css2?family=Doto:wght@400&display=swap" rel="stylesheet">

Dark Mode Not Working

Check that CSS custom properties use the media query:

css

@media (prefers-color-scheme: light) {
  :root {
    --bg-primary: #FFFFFF;
    /* ...other light mode tokens */
  }
}

Components Look Too Rounded

Nothing design uses zero border radius (perfectly square). Remove any

border-radius

properties.

Spacing Feels Off

Stick to the 8px spacing scale strictly. Use

--space-*

variables or multiples of 8px. No arbitrary values.

Text Hierarchy Unclear

Review the three-layer system:

Display (32px+, bold, Space Grotesk): One per screen
Body (14-16px, regular, Space Grotesk): Main content
Metadata (10-12px, uppercase, Space Mono): Labels and technical info

Reference Files

The skill includes three reference documents in the

references/

folder:

```
tokens.md
```
: Complete color, typography, spacing, and motion token system
```
components.md
```
: Full component library with variants and states
```
platform-mapping.md
```
: CSS, SwiftUI, and React implementation patterns

When generating UI, consult these references to maintain design system consistency.

nothing-design-system

NPX Install

Tags

SKILL.md Content

Nothing Design System Skill

What This Skill Does

Installation

Core Design Principles

Typography Hierarchy

Color Tokens

Spacing System

Component Patterns

Segmented Progress Bar

Mechanical Toggle

Dot Matrix Display

Information Card

Platform-Specific Mappings

SwiftUI Components

React/Tailwind Components

Common Workflows

Generating a Complete Page

Creating Custom Components

Troubleshooting

Fonts Not Loading

Dark Mode Not Working

Components Look Too Rounded

Spacing Feels Off

Text Hierarchy Unclear

Reference Files