nothing-design-system-skill
Generate UI components in Nothing's design language — monochrome, typographic, industrial aesthetic with Swiss typography and mechanical interface elements
Source facts
- Repository
- reason-machines/design-skills
- Last source activity
- May 16, 2026 at 21:47
- Detected SKILL.md language
- English
- Stars
- 4
- Forks
- 0
Install options
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Review the source files
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Showing SKILL.md
SKILL.md
Source instructions · Read-only preview- name
- nothing-design-system-skill
- description
- Generate UI components in Nothing's design language — monochrome, typographic, industrial aesthetic with Swiss typography and mechanical interface elements
- triggers
- ["use nothing design style","create a nothing-style component","generate UI in nothing design language","apply nothing design system","make this look like nothing phone UI","design with nothing aesthetic","build with nothing design principles","nothing design tokens"]
# Nothing Design System Skill
> Skill by [ara.so](https://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
```sh
# 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
```css
/* 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
```css
/* 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
```css
--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
```html
<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
```html
<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
```html
<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
```swift
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
```swift
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
```javascript
// 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
```jsx
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
```jsx
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
```css
/* 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
```css
/* 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
```html
<table class="nothing-table">
<thead>
<tr>
<th>PARAMETER</th>
<th>VALUE</th>
View on GitHubThis SKILL.md is very large, so SkillsMP previews the first section here. View on GitHub
