nothing-design-system

Q: How do I install nothing-design-system?

Run npx skills add https://github.com/reason-machines/design-skills --skill nothing-design-system in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/nothing-design-system/ (personal) or .claude/skills/nothing-design-system/ (project).

by reason-machinesFrontend & Design

Generate UI components in Nothing's monochrome, typographic, industrial design language with full dark/light mode support

Installs: 158
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/reason-machines/design-skills --skill nothing-design-system

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads nothing-design-system automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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

/* 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:

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

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

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:

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:

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

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

<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

// 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

// 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)

<!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>:

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

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

@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.

FAQ

What does the nothing-design-system skill do?

Generate UI components in Nothing's monochrome, typographic, industrial design language with full dark/light mode support

How do I install nothing-design-system?

Run npx skills add https://github.com/reason-machines/design-skills --skill nothing-design-system in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/nothing-design-system/ (personal) or .claude/skills/nothing-design-system/ (project).

Which AI agents can use nothing-design-system?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is nothing-design-system safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains nothing-design-system?

It is published by reason-machines in reason-machines/design-skills. It has 158 recorded installs.

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs

nothing-design-system

Install

Install

Describe the task

Review the result

SKILL.md

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

FAQ

More from reason-machines/design-skills

Popular frontend & design skills