skills.rest
reason-machines
reason-machinesOFFICIAL
Explore all skills by this author →
Website𝕏@reasonmachinesGitHub

nothing-design-system

Generate UI components in Nothing's monochrome industrial design language with dark and light mode tokens.

4|Updated May 16, 2026
Search Tags:#typography#design system#tailwind#ui components#dark mode#swiftui#monochrome
One-click install
npx skills add https://github.com/reason-machines/design-skills --skill nothing-design-system-reason-machines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nothing-design-system
Source: https://github.com/reason-machines/design-skills/tree/main/skills/nothing-design-system
Command: npx skills add https://github.com/reason-machines/design-skills --skill nothing-design-system-reason-machines

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Designing interfaces that follow Nothing's distinctive monochrome, typographic, industrial aesthetic requires manually recreating its token system, typography hierarchy, and signature components like segmented progress bars, which is slow and error-prone. ## Core Features & Use Cases - Complete Token System: Predefined color, typography, and spacing tokens for both dark and light modes, including pure black OLED backgrounds and the Nothing red accent. - Signature Component Patterns: Ready-to-use implementations of segmented progress bars, mechanical toggles, dot-matrix displays, and information cards. - Multi-Platform Output: Generates the same components in HTML/CSS, SwiftUI, and React/Tailwind with consistent design language. - Use Case: Ask for a Nothing-style settings page and receive a complete HTML file with Space Grotesk typography, monochrome tokens, segmented indicators, and automatic light/dark mode support. ## Quick Start Ask the AI to generate a Nothing-style dashboard page with a segmented progress bar, mechanical toggles, and a dot-matrix clock using the nothing design system.

Frequently Asked Questions about nothing-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a Nothing-style UI component?▼

Request a component using the Nothing design language and the skill outputs complete code with the monochrome token system, three-layer typography, and industrial styling. It supports HTML/CSS, SwiftUI, and React/Tailwind output formats.

What fonts does the Nothing design system use?▼

The system uses Space Grotesk for display and body text, Space Mono for metadata and technical labels, and Doto for dot-matrix displays. All fonts load from Google Fonts via link tags in the document head.

Does the Nothing design system support light mode?▼

Yes, it includes complete token sets for both dark and light modes. Dark mode uses pure black backgrounds for OLED screens, and light mode tokens activate automatically through the prefers-color-scheme media query.

Can I use Nothing design components in React with Tailwind?▼

Yes, the skill provides a Tailwind configuration extending the theme with Nothing colors and font families, plus ready-made React components like buttons, cards, and segmented progress bars using those tokens.

Why do my Nothing-style components look wrong?▼

Common issues include missing font imports, border-radius values (Nothing uses zero radius), hardcoded colors instead of tokens, and spacing outside the 8px scale. Check that CSS custom properties and the light-mode media query are defined.

Related Skills

Explore More Design & Creative Skills→
AradotsoAradotso
3

nothing-design-skill

Generate Nothing-style UI components with monochrome design tokens across HTML/CSS, SwiftUI, and React/Tailwind.

Official
Intermediate
sugar-cat7sugar-cat7

integration-testing

Run end-to-end integration tests against a real database and application.

Community
Advanced
get-convexget-convex
9

adapt

Plan responsive layouts across mobile, tablet, and desktop breakpoints.

Official
Advanced
tiantangcao1980-webtiantangcao1980-web
4

material-web

Implement Material Design 3 UI with Lit-based @material/web components.

Community
Intermediate