aradotso/skills/nothing-design-skill

---
name: nothing-design-skill
description: Generate UI in the Nothing design language — monochrome, typographic, industrial — using Space Grotesk/Mono/Doto fonts, OLED blacks, segmented components, and strict three-layer visual hierarchy.
triggers:
  - nothing design
  - nothing style UI
  - generate nothing phone UI
  - monochrome industrial design
  - swiss typography UI
  - OLED dark mode components
  - segmented progress bar nothing
  - nothing design system
---

# Nothing Design Skill

> Skill by [ara.so](https://ara.so) — Daily 2026 Skills collection.

A Claude Code skill that encodes Nothing's visual language into reusable design rules. When activated, generate UI that is monochrome, typographic, and industrial — no gradients, no decoration, no noise.

## What this skill does

- Enforces three-layer visual hierarchy: **display → body → metadata**
- Applies the canonical Nothing font stack: Space Grotesk + Space Mono + Doto
- Outputs full dark/light mode token systems
- Generates segmented progress bars, mechanical toggles, instrument-style widgets
- Targets HTML/CSS, SwiftUI, or React/Tailwind output

## Install

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

Restart Claude Code. The skill loads automatically on next session.

Activation

Say any of:

• "Nothing style"
• /nothing-design
• "Generate this in the Nothing design language"
• "Make this monochrome industrial"

Claude will apply the full system without further prompting.

---

Design Principles

Visual Hierarchy (strict — never add layers)

| Layer | Role | Font | Weight | Size | |-------|------|------|--------|------| | Display | Hero numbers, key metric | Doto / Space Mono | 100–300 | 48–96px | | Body | Primary readable content | Space Grotesk | 400 | 14–16px | | Metadata | Labels, timestamps, units | Space Mono | 400 | 10–12px |

Core Rules

1. Black is black — #0A0A0A on dark, never #000000 (OLED bleed)
2. One accent — white on dark, black on light. No color except system alerts
3. No gradients — flat fills only
4. Borders over shadows — 1px solid beats box-shadow
5. Segmentation over continuity — progress is ticked, not smooth
6. Numbers are display elements — treat metrics like type, not data

---

Token System

Color Tokens

/* Dark mode (default) */
:root[data-theme="dark"] {
  --bg-primary:    #0A0A0A;
  --bg-secondary:  #111111;
  --bg-elevated:   #1A1A1A;
  --bg-overlay:    #222222;

  --border-default: #2A2A2A;
  --border-subtle:  #1E1E1E;
  --border-strong:  #3A3A3A;

  --text-primary:   #F5F5F5;
  --text-secondary: #999999;
  --text-disabled:  #444444;
  --text-inverse:   #0A0A0A;

  --accent:         #F5F5F5;
  --accent-inverse: #0A0A0A;

  --signal-error:   #FF3B30;
  --signal-warn:    #FF9500;
  --signal-ok:      #30D158;
}

/* Light mode */
:root[data-theme="light"] {
  --bg-primary:    #F5F5F5;
  --bg-secondary:  #EBEBEB;
  --bg-elevated:   #FFFFFF;
  --bg-overlay:    #E0E0E0;

  --border-default: #D0D0D0;
  --border-subtle:  #DEDEDE;
  --border-strong:  #BEBEBE;

  --text-primary:   #0A0A0A;
  --text-secondary: #666666;
  --text-disabled:  #BBBBBB;
  --text-inverse:   #F5F5F5;

  --accent:         #0A0A0A;
  --accent-inverse: #F5F5F5;
}

Typography Tokens

/* Import */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&family=Doto:wght@100;200;300;400&display=swap');

:root {
  /* Display — Doto for numerics, Space Mono fallback */
  --font-display:  'Doto', 'Space Mono', monospace;
  --font-body:     'Space Grotesk', system-ui, sans-serif;
  --font-meta:     'Space Mono', monospace;

  /* Scale */
  --text-display-xl: 96px;
  --text-display-lg: 64px;
  --text-display-md: 48px;
  --text-display-sm: 32px;

  --text-body-lg:  18px;
  --text-body-md:  16px;
  --text-body-sm:  14px;

  --text-meta-md:  12px;
  --text-meta-sm:  10px;

  /* Tracking — tight for display, wide for meta */
  --tracking-display: -0.04em;
  --tracking-body:    -0.01em;
  --tracking-meta:     0.08em;

  /* Line height */
  --leading-display: 0.95;
  --leading-body:    1.5;
  --leading-meta:    1.4;
}

Spacing & Radius

:root {
  /* 4px base grid */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radius — sharp by default */
  --radius-none: 0px;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;
}

Motion Tokens

:root {
  --duration-instant: 80ms;
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;

  /* Mechanical — ease-out only, no bounce */
  --ease-mechanical: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-snap:       cubic-bezier(0.0, 0, 0.2, 1);
}

---

Components

Button

<!-- Primary -->
<button class="btn-primary">
  <span class="btn-label">CONFIRM</span>
</button>

<!-- Ghost -->
<button class="btn-ghost">
  <span class="btn-label">CANCEL</span>
</button>

.btn-primary,
.btn-ghost {
  font-family: var(--font-meta);
  font-size: var(--text-meta-md);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-mechanical);
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-inverse);
  border: 1px solid var(--accent);
}

.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
}

.btn-primary:hover,
.btn-ghost:hover { opacity: 0.7; }
.btn-primary:active,
.btn-ghost:active { opacity: 0.5; }

---

Segmented Progress Bar

The Nothing signature — ticked, not smooth.

<div class="seg-progress" data-segments="12" data-filled="8" aria-valuenow="67">
  <!-- generated by JS below -->
</div>
<span class="seg-label">08 / 12</span>

.seg-progress {
  display: flex;
  gap: 3px;
  align-items: center;
  height: 16px;
}

.seg-tick {
  flex: 1;
  height: 100%;
  border-radius: var(--radius-none);
  transition: background var(--duration-instant) var(--ease-snap);
}

.seg-tick.filled  { background: var(--accent); }
.seg-tick.empty   { background: var(--border-default); }

.seg-label {
  font-family: var(--font-meta);
  font-size: var(--text-meta-sm);
  color: var(--text-secondary);
  letter-spacing: var(--tracking-meta);
  margin-top: var(--space-1);
  display: block;
}

function renderSegProgress(el) {
  const total  = parseInt(el.dataset.segments, 10);
  const filled = parseInt(el.dataset.filled, 10);
  el.innerHTML = Array.from({ length: total }, (_, i) =>
    `<div class="seg-tick ${i < filled ? 'filled' : 'empty'}"></div>`
  ).join('');
}

document.querySelectorAll('.seg-progress').forEach(renderSegProgress);

---

Card

<article class="card">
  <header class="card-header">
    <span class="card-label">BATTERY</span>
    <span class="card-tag">LIVE</span>
  </header>
  <div class="card-display">87</div>
  <div class="card-unit">PERCENT</div>
</article>

.card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}

.card-label {
  font-family: var(--font-meta);
  font-size: var(--text-meta-sm);
  letter-spacing: var(--tracking-meta);
  color: var(--text-secondary);
  text-transform: uppercase;
}

.card-tag {
  font-family: var(--font-meta);
  font-size: var(--text-meta-sm);
  letter-spacing: var(--tracking-meta);
  color: var(--signal-ok);
  text-transform: uppercase;
}

.card-display {
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
  font-weight: 200;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  color: var(--text-primary);
}

.card-unit {
  font-family: var(--font-meta);
  font-size: var(--text-meta-sm);
  letter-spacing: var(--tracking-meta);
  color: var(--text-secondary);
  text-transform: uppercase;
  margin-top: var(--space-2);
}

---

Mechanical Toggle

<label class="toggle">
  <input type="checkbox" class="toggle-input" />
  <span class="toggle-track">
    <span class="toggle-thumb"></span>
  </span>
  <span class="toggle-label">GLYPH INTERFACE</span>
</label>

.toggle { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; }
.toggle-input { display: none; }

.toggle-track {
  width: 40px;
  height: 20px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-none);
  position: relative;
  transition: background var(--duration-fast) var(--ease-mechanical);
}

.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  background: var(--text-secondary);
  transition: transform var(--duration-fast) var(--ease-mechanical),
              background var(--duration-fast) var(--ease-mechanical);
}

.toggle-input:checked + .toggle-track { background: var(--accent); border-color: var(--accent); }
.toggle-input:checked + .toggle-track .toggle-thumb {
  transform: translateX(20px);
  background: var(--accent-inverse);
}

.toggle-label {
  font-family: var(--font-meta);
  font-size: var(--text-meta-md);
  letter-spacing: var(--tracking-meta);
  color: var(--text-primary);
  text-transform: uppercase;
}

---

Data Table

<table class="data-table">
  <thead>
    <tr>
      <th>DEVICE</th>
      <th>STATUS</th>
      <th>SIGNAL</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>PHONE (2)</td>
      <td class="status-ok">CONNECTED</td>
      <td>–42 dBm</td>
    </tr>
    <tr>
      <td>EAR (1)</td>
      <td class="status-warn">PAIRING</td>
      <td>–</td>
    </tr>
  </tbody>
</table>

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-meta);
  font-size: var(--text-meta-md);
  letter-spacing: var(--tracking-meta);
}

.data-table th {
  text-align: left;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-weight: 400;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-strong);
}

.data-table td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
}

.data-table tr:last-child td { border-bottom: none; }
.status-ok   { color: var(--signal-ok); }
.status-warn { color: var(--signal-warn); }
.status-err  { color: var(--signal-error); }

---

SwiftUI Output Pattern

// Nothing design tokens in SwiftUI
extension Color {
    static let nBgPrimary   = Color(hex: "#0A0A0A")
    static let nBgSecondary = Color(hex: "#111111")
    static let nTextPrimary = Color(hex: "#F5F5F5")
    static let nTextMeta    = Color(hex: "#999999")
    static let nBorder      = Color(hex: "#2A2A2A")
    static let nAccent      = Color(hex: "#F5F5F5")
}

// Segmented progress
struct NothingProgressBar: View {
    let total: Int
    let filled: Int

    var body: some View {
        HStack(spacing: 3) {
            ForEach(0..<total, id: \.self) { i in
                Rectangle()
                    .fill(i < filled ? Color.nAccent : Color.nBorder)
                    .frame(height: 16)
                    .animation(.easeOut(duration: 0.08), value: filled)
            }
        }
    }
}

// Instrument card
struct NothingCard: View {
    let label: String
    let value: String
    let unit: String

    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            Text(label.uppercased())
                .font(.custom("SpaceMono-Regular", size: 10))
                .tracking(4)
                .foregroundColor(.nTextMeta)

            Text(value)
                .font(.custom("Doto-Thin", size: 64))
                .foregroundColor(.nTextPrimary)
                .kerning(-3)

            Text(unit.uppercased())
                .font(.custom("SpaceMono-Regular", size: 10))
                .tracking(4)
                .foregroundColor(.nTextMeta)
        }
        .padding(24)
        .background(Color(hex: "#111111"))
        .overlay(
            Rectangle().stroke(Color.nBorder, lineWidth: 1)
        )
    }
}

---

React/Tailwind Output Pattern

// tailwind.config — extend with Nothing tokens
// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        'n-bg':       '#0A0A0A',
        'n-surface':  '#111111',
        'n-elevated': '#1A1A1A',
        'n-border':   '#2A2A2A',
        'n-text':     '#F5F5F5',
        'n-meta':     '#999999',
        'n-accent':   '#F5F5F5',
      },
      fontFamily: {
        display: ['Doto', 'Space Mono', 'monospace'],
        body:    ['Space Grotesk', 'system-ui', 'sans-serif'],
        mono:    ['Space Mono', 'monospace'],
      },
    },
  },
}

// NothingCard component
export function NothingCard({
  label,
  value,
  unit,
}: {
  label: string;
  value: string;
  unit: string;
}) {
  return (
    <div className="bg-n-surface border border-n-border p-6">
      <p className="font-mono text-[10px] tracking-[0.08em] uppercase text-n-meta mb-4">
        {label}
      </p>
      <p className="font-display text-[64px] font-thin leading-none tracking-[-0.04em] text-n-text">
        {value}
      </p>
      <p className="font-mono text-[10px] tracking-[0.08em] uppercase text-n-meta mt-2">
        {unit}
      </p>
    </div>
  );
}

// SegmentedBar component
export function SegmentedBar({ total, filled }: { total: number; filled: number }) {
  return (
    <div className="flex gap-[3px] h-4">
      {Array.from({ length: total }, (_, i) => (
        <div
          key={i}
          className={`flex-1 transition-colors duration-75 ${
            i < filled ? 'bg-n-accent' : 'bg-n-border'
          }`}
        />
      ))}
    </div>
  );
}

---

Common Patterns

Do

• Display numbers as hero type (font-display, weight 100–300)
• Use text-transform: uppercase on all labels and metadata
• Keep gaps between segments exactly 3px
• Use border not box-shadow for elevation
• Animate with ease-out only — snap in, drift out

Don't

• Add decorative icons or illustrations
• Use more than one accent color per surface
• Round corners beyond 4px (except pills on tags)
• Use font-weight above 500 for display text
• Mix Space Grotesk and Space Mono in the same label

---

Troubleshooting

Doto font not loading Doto is a Google Fonts variable font. Confirm the import URL includes family=Doto and fall back to Space Mono — both read as display.

Segments look uneven Use flex: 1 on each tick inside a display: flex container, not percentage widths. Fixed gaps (gap: 3px) preserve the segmented rhythm.

Dark mode not switching Tokens use [data-theme="dark"] attribute selector. Set document.documentElement.dataset.theme = 'dark' — not a class.

SwiftUI custom fonts missing Add font files to the Xcode project bundle and declare them in Info.plist under UIAppFonts. Space Grotesk and Space Mono are available via Swift Package Manager through the GoogleFonts package.

Too many hierarchy levels requested Refuse politely. The system has exactly three: display, body, metadata. Push back and map the extra levels to one of the three.