Clean design skill for AI agents

Overview

Clean is a minimal, whitespace-driven design system skill file built for interfaces where clarity is the product. When you give this skill file to an AI coding assistant, it generates UIs that strip away visual noise — no gratuitous decoration, no competing colors, no unnecessary motion — leaving only what the user needs to see and do.

This skill is ideal for SaaS dashboards, documentation sites, admin panels, productivity tools, and any product where users spend extended time in the interface. Clean design reduces cognitive load by making every pixel earn its place.

Design Tokens

Color Palette

Clean uses a focused blue-and-violet palette — familiar, trustworthy, and universally readable:

The palette is deliberately restrained. The primary blue (#3B82F6) provides a single, clear signal for interactivity, while the violet secondary (#8B5CF6) is reserved for moments that need differentiation without competing with the primary. Everything else stays neutral. In a clean design system, color is information — not decoration.

Typography

Clean uses a three-font system that balances warmth with precision:

• Primary font: Roboto — a highly legible, mechanically precise typeface for body text, labels, and UI content. Its neutral character disappears into the interface, letting content speak
• Display font: Poppins — geometric, slightly rounded letterforms that add warmth to headings and hero text without sacrificing clarity
• Monospace font: Inconsolata — a clean, readable monospace for code blocks, data values, and technical content

The type scale follows: 12 / 14 / 16 / 20 / 24 / 32px, with weights from 100 through 900. The scale is compact and practical — the 12px floor supports dense data displays, while the 32px ceiling keeps headings proportional in whitespace-heavy layouts. The Roboto-to-Poppins shift between body and display creates a subtle typographic contrast that reinforces hierarchy without visual disruption.

Spacing

All spacing is built on an 8pt baseline grid. Every margin, padding, gap, and offset aligns to multiples of 8px. The 8pt grid is the backbone of the Clean system — it's what makes whitespace feel intentional rather than accidental.

In a minimal design, spacing does the heavy lifting that color and decoration handle in busier systems. Consistent 8pt-aligned whitespace creates visual rhythm, groups related content, and separates distinct sections without needing borders or dividers.

Component Coverage

Clean includes guidance for over 40 component families, each designed to be visually quiet while remaining fully functional:

• Inputs and forms — buttons, text inputs, selects, checkboxes, radios, switches, textareas, date/time pickers, file uploaders
• Data display — cards, tables, data lists, data grids, charts, stats/metrics, badges, avatars
• Navigation — breadcrumbs, pagination, steppers, sidebars, top bars, tabs, command palette
• Overlays and feedback — modals, drawers, tooltips, popovers, alerts, toasts, notifications, progress indicators, skeletons
• Page-level patterns — search, empty states, onboarding, authentication screens, settings pages, documentation layouts, pricing blocks

Each component defines required states (default, hover, focus-visible, active, disabled, loading, error) and explicit guidance for empty, loading, and error states — because a clean interface must look intentional even when there's no data to show. Interaction behavior covers keyboard, pointer, and touch, with token-specific rules for spacing, typography, and color usage.

Accessibility

Clean goes beyond the baseline with an extended accessibility specification:

• WCAG 2.2 AA compliance as a non-negotiable requirement
• Keyboard-first interactions with visible focus states on every interactive element
• Semantic HTML before ARIA — use native elements first, ARIA only when semantic HTML falls short
• Screen-reader tested labels — every interactive element must have a programmatically associated label that has been verified with a screen reader
• Reduced-motion support — all animations must respect prefers-reduced-motion, and no motion should be purely decorative
• 44px+ touch targets — interactive elements must meet the minimum 44x44px touch target size for mobile usability

The minimal visual style naturally supports accessibility — high contrast between pure white surfaces and near-black text, clear visual hierarchy through whitespace, and no distracting decoration that competes with focus indicators. When any design decision conflicts with these accessibility requirements, accessibility wins.

How to Use with AI Tools

Cursor and Claude

1. Pull the skill file into your project:

npx typeui.sh pull clean

2. The skill file saves as a SKILL.md in your project. Cursor automatically picks up skill files and uses them as context during code generation.

3. Start prompting — ask Cursor to build dashboards, settings pages, or documentation layouts, and the output will follow the Clean system's minimal palette, 8pt grid, and whitespace-first approach.

Claude (Anthropic)

Use Clean directly with Claude by adding the skill file as context:

1. Copy or download the skill file from the design skill page
2. Paste it at the start of a Claude conversation, or add it to a Claude Project as project knowledge
3. Prompt Claude to generate UI code — it will produce minimal, whitespace-driven interfaces following the Clean tokens, spacing grid, and accessibility requirements

Other AI Tools

The skill file is standard markdown compatible with any AI assistant that accepts context or system instructions:

• ChatGPT — paste into Custom Instructions or at the start of a conversation
• Windsurf / Codeium — place the file in your project directory
• GitHub Copilot — add to your repository's context or instruction files
• v0 by Vercel — paste the design tokens and component rules as prompt context

Design Philosophy

Clean is built on the conviction that the best interface is the one you don't notice. The skill file follows three principles:

1. Whitespace is a design element — empty space is not wasted space. Every gap, margin, and padding value is a deliberate decision that creates hierarchy and reduces cognitive load
2. Earn every pixel — no element appears unless it serves the user's current task. Decoration, unnecessary borders, and ambient color are stripped out by default
3. Quiet confidence — the interface should feel effortless and trustworthy. Users should focus on their content, not on the UI around it