nothing-design

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

330|47|Updated Aug 30, 2020

Search Tags:#typography #design system #ui design #component specs #ux hierarchy #data-dense layouts #monochrome system

Ready to run

npx skills add https://github.com/harperreed/dotfiles --skill nothing-design-harperreed

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: nothing-design
Source: https://github.com/harperreed/dotfiles/tree/main/.claude/skills-archive/nothing-design
Command: npx skills add https://github.com/harperreed/dotfiles --skill nothing-design-harperreed

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It helps you rapidly produce UI/UX designs that feel “Nothing”-inspired—typographically disciplined, monochrome-first, and data-dense—without the usual clutter and inconsistency.

Core Features & Use Cases

Design system guidance: Enforces the Nothing-inspired hierarchy (exactly three layers of importance) and composition rules so screens don’t become visually flat or noisy.
Type, spacing, and tokens: Directs font usage (Doto/Space Grotesk/Space Mono), spacing rhythm, and color roles (gray-scale hierarchy with accent reserved for real signals).
Component and workflow alignment: Guides implementation decisions for common UI parts (cards, buttons, inputs, tables, nav, toggles, overlays) and a repeatable workflow that starts with declaring Google Fonts.

Quick Start

Use the nothing-design skill when the user explicitly requests “Nothing style” and tell it which UI mode (dark or light) you want to start with.

Frequently Asked Questions about nothing-design

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

FAQPage Schema

How do I apply a Nothing-style design system to data-dense UI layouts?▼

To apply a Nothing-style design system, enforce a three-layer importance hierarchy, monochrome color usage, and typographic discipline using Doto, Space Grotesk, and Space Mono fonts to compose data-dense interfaces without visual clutter.

What typography and spacing rules define the Nothing-inspired UI hierarchy?▼

The Nothing-inspired UI hierarchy uses exactly three layers of importance, directing font usage with Doto, Space Grotesk, and Space Mono, spacing rhythm, and gray-scale color roles with accents reserved only for real signals.

How do I build common UI components like cards and tables for a monochrome design system?▼

Build monochrome UI components by following token and component references for cards, buttons, inputs, tables, navigation, toggles, and overlays, ensuring deterministic output across dark and light modes.

Can I use this approach for both dark and light mode interfaces?▼

Yes, the Nothing-style UI approach applies to both dark and light modes, guiding state patterns and component specs while maintaining the monochrome system and three-layer importance rule across both themes.

What anti-patterns should I avoid when designing data-dense monochrome interfaces?▼

Avoid anti-patterns in data-dense monochrome interfaces by adhering to the three-layer importance rule, preventing visual flatness or noise, and reserving accent colors exclusively for real signals rather than decoration.