Spacious design skill for AI agents

Overview

Spacious is a whitespace-first design system skill for AI-powered development. It's built on a single conviction: the most important element in any interface is the space between elements. Generous padding, consistent margins, and an 8pt grid that gives every component room to breathe — Spacious produces interfaces where clarity comes from what's absent, not what's present.

When you add this skill file to your AI coding tool, every component it generates prioritizes openness. Layouts feel unhurried. Content blocks float in clean fields of white. The interface never crowds the user, never competes for attention, and never sacrifices readability for density.

Design tokens

Color palette

Spacious uses a clean, conventional palette that stays out of the way — the visual interest comes from layout and whitespace, not from bold color choices:

The familiar blue-violet palette is deliberate: color is intentionally unremarkable so whitespace can be the hero. In a Spacious layout, the eye doesn't travel to a bold accent — it travels along the breathing room between elements, reading the structure of the page through its negative space. The white surface (#FFFFFF) isn't a default here; it's the most important design element in the system.

Typography

Spacious uses a dual-typeface system optimized for different reading contexts:

• Open Sans — Primary/body font. A humanist sans-serif with excellent readability across all sizes and devices. Open Sans' open apertures and generous letter-spacing make it naturally comfortable for reading in spacious layouts where body text needs to hold its own across wide columns with ample line-height.

• Montserrat — Display font. A geometric sans-serif with more visual weight and personality than Open Sans. Montserrat gives headings structural presence — important in a whitespace-heavy layout where headings need to anchor large areas of empty space without being overwhelmed by them.

• IBM Plex Mono — Monospaced font for code blocks, technical data, and tabular content.

The type scale uses seven sizes with the tighter upper increments of a refined system:

• 12px — Fine print, tertiary metadata
• 14px — Captions, helper text, secondary labels
• 16px — Body text (default)
• 18px — Large body, lead text
• 24px — Section headings (h3)
• 30px — Page headings (h2)
• 36px — Hero headings (h1)

Font weights span 100 (thin) to 900 (black). The spacious aesthetic favors moderate weights — 400 for body text, 600 for headings — because in layouts with generous whitespace, heavy type can feel like it's shouting into an empty room. The AI agent learns to let the space do the work and the type stay measured.

Spacing

Spacious uses an 8pt baseline grid — and this is where the entire system earns its name. Every margin, padding, and gap aligns to multiples of 8px, but the critical difference is how much space the AI agent applies:

• Component internal padding runs larger than most systems — 16-24px where other skills use 8-12px
• Section separation uses 32-48px+ where other skills use 16-24px
• Card padding, form field margins, and navigation gaps are all scaled up to create the open, airy feel
• Line-height runs generous to give body text vertical breathing room

The 8pt grid isn't just a measurement system here — it's a philosophy. Every space decision defaults to the more generous option. When the AI agent is uncertain between tighter or wider spacing, the skill instructs it to choose wider.

Component coverage

The skill file covers 40+ component families grouped by function:

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

For each component, the skill defines required interaction states (default, hover, focus-visible, active, disabled, loading, error), keyboard and touch behavior, spacing and typography token usage, and responsive edge cases. The skill additionally requires explicit designs for empty, loading, and error states, and mandates documented accessibility rationale for every component decision.

Design philosophy

Spacious operates on the principle that white space is not empty space — it's functional space that improves comprehension, reduces cognitive load, and makes interfaces feel calm:

• Whitespace as the primary design element — other systems use color, typography, or borders to create hierarchy. Spacious uses the distance between elements. Wider gaps signal separation. Tighter gaps signal grouping. The AI agent communicates structure through spatial relationships before reaching for any other visual tool
• Default to generous — when uncertain about spacing, the skill instructs the AI to choose more space, not less. This systematic bias toward openness is what prevents the layouts from ever feeling cramped, even in data-dense contexts
• Headings that anchor space — in a layout with generous whitespace, headings need structural presence to hold the composition together. Montserrat at 600 weight provides enough visual mass to anchor large areas of white without the heading floating or feeling disconnected
• Single visual metaphor — the skill prohibits mixing styles. Clean, minimal, and spacious from top to bottom. No dense data grids next to airy hero sections. The generous spacing applies uniformly, creating a consistent rhythm throughout
• Purposeful motion only — the skill blocks decorative animation. In a whitespace-driven layout, unnecessary motion in the empty areas would draw the eye and undermine the calm that the space creates

This makes Spacious a strong fit for:

• Content-focused websites and blogs
• Enterprise SaaS products and admin dashboards
• Health, wellness, and meditation applications
• Financial services and banking interfaces
• Education platforms and learning management systems
• Government and institutional web services
• Accessibility-first products
• Any interface where reducing cognitive load is a priority

Accessibility

Spacious has the most comprehensive accessibility spec of any typeui.sh design skill, tied with Editorial, enforcing WCAG 2.2 AA plus the full set of additional requirements:

• Keyboard-first interactions for all interactive elements
• Visible focus states on every focusable component — generous spacing makes focus rings unambiguous because elements have clear boundaries with nothing crowding them
• Semantic HTML before ARIA — native elements first, ARIA only when semantics aren't natively available
• Screen-reader tested labels — every interactive element gets a label that communicates meaning when read aloud
• Reduced-motion support — all transitions respect prefers-reduced-motion
• 44px+ touch targets — all interactive elements meet minimum tap size, naturally supported by the generous spacing that gives every component more room
• High-contrast support — OS-level high-contrast modes are respected
• Documented accessibility rationale — every component decision includes an explanation of why its accessibility approach was chosen

Generous spacing is inherently accessibility-friendly. Larger touch targets, clearer element boundaries, less visual crowding, and more room for focus indicators — the spacious aesthetic provides accessibility benefits that denser systems must engineer around.

Every accessibility rule is written to be testable in code review.

How to use with Claude AI

In Cursor IDE

1. Pull the skill file into your project:

npx typeui.sh pull spacious

2. The file is saved to .cursor/skills/spacious/SKILL.md by default. Cursor automatically picks up skill files from this directory and makes them available to Claude.

3. Start prompting — Claude will generate open, airy interfaces with generous padding, Open Sans + Montserrat typography, the 8pt grid with spacious defaults, and clear visual hierarchy through whitespace.

In Claude Desktop or API

1. Copy the skill file content from the typeui.sh page (use the Copy button in the sidebar).

2. Paste it into your system prompt or as a reference document at the start of your conversation.

3. Ask Claude to build components or pages. It will follow the Spacious guidelines — using generous 8pt-grid spacing, the Open Sans + Montserrat type system, conventional blue-violet tokens, and whitespace as the primary hierarchy tool.

In other AI tools

The skill file is standard markdown and works with any AI tool that accepts system-level instructions:

• Windsurf — place the file in your project's .windsurf/rules/ directory
• GitHub Copilot — add it to .github/copilot-instructions.md or reference it in your prompt
• OpenAI GPTs — upload it as a knowledge file in the GPT configuration
• Any LLM API — include the file content in the system message

What sets Spacious apart

Every other typeui.sh design skill defines its identity through color, typography, or visual technique. Spacious defines its identity through empty space:

• Whitespace as hero — the most important design element isn't a color, a font, or a pattern. It's the gap between elements. No other skill makes negative space the defining characteristic of the system
• Default-to-generous bias — the only skill that explicitly instructs the AI to choose more space when uncertain. This systematic bias is what prevents spacious layouts from gradually drifting toward density over time
• Conventional palette, unconventional impact — the same blue-violet tokens used by Simple and several other skills produce completely different interfaces when wrapped in double the whitespace. Spacious proves that spacing transforms design more than color does
• Spacing as accessibility — generous padding naturally creates larger touch targets, clearer boundaries, and more room for focus indicators. The aesthetic choice and the accessibility choice are the same choice
• Seven-step type scale — the extra 18px and 30px stops provide finer-grained size control, important in spacious layouts where type size differences are more visible with more whitespace around them
• Full accessibility spec — eight explicit requirements including documented rationale, matching the most comprehensive spec on the platform
• Quality gates — every rule is anchored to a token or measurable threshold, keeping the generous spacing consistent whether the AI generates a single form field or an entire enterprise dashboard