nothing-design-system-skill

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

Run npx skills add https://github.com/reason-machines/design-skills --skill nothing-design-system-skill 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-skill/ (personal) or .claude/skills/nothing-design-system-skill/ (project).

by reason-machinesFrontend & Design

Generate UI components in Nothing's design language — monochrome, typographic, industrial aesthetic with Swiss typography and mechanical interface elements

Installs: 159
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-skill

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

# 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

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

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

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

<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

<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

<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

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

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

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

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

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

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

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

<table class="nothing-table">
  <thead>
    <tr>
      <th>PARAMETER</th>
      <th>VALUE</th>
      <th>STATUS</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Core Temp</td>
      <td class="mono">42°C</td>
      <td>OK</td>
    </tr>
  </tbody>
</table>

<style>
.nothing-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Space Grotesk', sans-serif;
}

.nothing-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #666666;
  padding: 12px 16px;
  border-bottom: 1px solid #333333;
}

.nothing-table td {
  font-size: 14px;
  color: #FFFFFF;
  padding: 16px;
  border-bottom: 1px solid #1A1A1A;
}

.nothing-table .mono {
  font-family: 'Space Mono', monospace;
}
</style>

Toggle Switch

<label class="nothing-toggle">
  <input type="checkbox">
  <span class="nothing-toggle-track">
    <span class="nothing-toggle-thumb"></span>
  </span>
  <span class="nothing-toggle-label">NOTIFICATIONS</span>
</label>

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

.nothing-toggle input {
  display: none;
}

.nothing-toggle-track {
  position: relative;
  width: 48px;
  height: 24px;
  background: #1A1A1A;
  border: 1px solid #333333;
  transition: background 200ms;
}

.nothing-toggle-thumb {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 18px;
  height: 18px;
  background: #666666;
  transition: all 200ms;
}

.nothing-toggle input:checked ~ .nothing-toggle-track {
  background: #000000;
  border-color: #FFFFFF;
}

.nothing-toggle input:checked ~ .nothing-toggle-track .nothing-toggle-thumb {
  left: 26px;
  background: #FFFFFF;
}

.nothing-toggle-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #FFFFFF;
}
</style>

Troubleshooting

Fonts not loading

Ensure fonts are properly imported:

<!-- HTML -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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 */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap');

OLED blacks not working

Ensure root background is true black:

:root, body, html {
  background: #000000;
  color: #FFFFFF;
}

Components look too rounded

Nothing design uses zero border radius. Remove all border-radius declarations:

/* ❌ Wrong */
border-radius: 8px;

/* ✅ Correct */
border-radius: 0;

Text hierarchy unclear

Stick to the three-layer system:

/* Display - 24px+, bold, uppercase, tight spacing */
.display { font-size: 24px; font-weight: 700; text-transform: uppercase; }

/* Body - 14-16px, normal weight */
.body { font-size: 16px; font-weight: 400; }

/* Metadata - 12px, mono, muted color */
.meta { font-size: 12px; font-family: 'Space Mono'; color: #666666; }

Usage with Claude Code

Trigger the skill naturally:

"Create a nothing-style dashboard"
"Generate a progress bar in nothing design"
"Apply nothing design tokens to this component"
"Make this button look industrial like nothing phone"

The skill will automatically apply the design system principles and generate code in your requested format (HTML/CSS, SwiftUI, or React).

FAQ

What does the nothing-design-system-skill skill do?

Generate UI components in Nothing's design language — monochrome, typographic, industrial aesthetic with Swiss typography and mechanical interface elements

How do I install nothing-design-system-skill?

Run npx skills add https://github.com/reason-machines/design-skills --skill nothing-design-system-skill 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-skill/ (personal) or .claude/skills/nothing-design-system-skill/ (project).

Which AI agents can use nothing-design-system-skill?

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-skill 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-skill?

It is published by reason-machines in reason-machines/design-skills. It has 159 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-skill

Install

Install

Describe the task

Review the result

SKILL.md

Nothing Design System Skill

What It Does

Installation

Core Design Tokens

Color System

Typography Scale

Spacing System

Component Patterns

HTML/CSS Examples

Button

Segmented Progress Bar

Card Component

SwiftUI Examples

Button

Progress Bar

React/Tailwind Examples

Setup Tailwind Config

Button Component

Card Component

Key Design Principles

1. Visual Hierarchy (Three Layers Only)

2. Motion & Transitions

3. Borders & Dividers

4. Interactive States

Common Patterns

Data Table

Toggle Switch

Troubleshooting

Fonts not loading

OLED blacks not working

Components look too rounded

Text hierarchy unclear

Usage with Claude Code

FAQ

More from reason-machines/design-skills

Popular frontend & design skills