skills.rest
Aradotso
AradotsoOFFICIAL
Explore all skills by this author →
Website𝕏@aradotsoGitHub

nothing-design-system

Generate monochrome UI components with token-based typography, spacing, and theming.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It solves the problem of creating consistent Nothing-inspired monochrome UI by providing a ready-to-use design system with typography, color, spacing, and component patterns.

Core Features & Use Cases

  • Tokenized theming: Monochrome palette with full dark/light mode support using CSS custom properties.
  • Typography hierarchy: Enforces a strict three-layer system (Display, Body, Metadata) with Space Grotesk and Space Mono.
  • Reusable component patterns: Generates industrial UI elements like segmented progress bars, mechanical toggles, and dot-matrix displays, plus structured cards.
  • Multi-platform output: Provides guidance and mappings for HTML/CSS, SwiftUI, and React/Tailwind for consistent UI across targets.
  • Use case example: Build a complete settings page with mechanical toggles, segmented indicators, and status cards that match Nothing’s industrial monochrome style.

Quick Start

Generate a Nothing monochrome settings screen in HTML/CSS and React that uses the three-layer typography system, includes a segmented progress bar and a mechanical toggle, and supports both dark and light mode.

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 Nothing-style UI components with a strict monochrome design system?▼

To generate Nothing-style UI components, apply a predefined monochrome design system with tokens for typography, spacing, and dark/light theming. This enforces industrial zero border-radius styling, consistent component patterns, and a strict three-layer type hierarchy using Space Grotesk and Space Mono fonts.

Can I build Nothing-inspired interfaces using SwiftUI and React Tailwind?▼

Yes, you can build Nothing-inspired interfaces using SwiftUI and React Tailwind. The design system provides mappings for HTML/CSS, SwiftUI, and React/Tailwind, ensuring consistent industrial monochrome UI output across these platforms.

What is the typography hierarchy for Nothing-style dark mode interfaces?▼

The typography hierarchy for Nothing-style interfaces is a strict three-layer system: Display, Body, and Metadata. It uses Space Grotesk and Space Mono fonts to maintain visual consistency and monochrome aesthetics across all generated components.

How do I apply dark and light mode tokens to monochrome UI components?▼

You apply dark and light mode tokens to monochrome UI components using CSS custom properties. This token-only approach for color and spacing ensures seamless theme switching while maintaining the industrial monochrome aesthetic.

What are the limitations when generating industrial UI elements with a design system?▼

Limitations include strict adherence to zero border-radius industrial styling and a token-only color and spacing usage policy. You must use predefined component patterns like segmented progress bars and mechanical toggles, restricting custom styling outside the monochrome design system.

Does the Nothing design system support dot-matrix displays and mechanical toggles?▼

Yes, the Nothing design system supports dot-matrix displays and mechanical toggles. It generates these reusable industrial UI elements alongside structured cards and segmented progress bars, adhering to the strict monochrome component pattern consistency.

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

nothing-design

Generate Nothing-style UI/UX design guidance for screens with hierarchy, typography, spacing, and monochrome colors.

Community
Intermediate
dylantarredylantarre
38

responsive-typography

Generate fluid typography scales using CSS clamp() and custom properties.

Community
Basic
TheBlueBear02TheBlueBear02

minimalist-monochrome

Generate a monochrome design system with Tailwind tokens and zero border radius.

Community
Advanced