Spacious

Name: Spacious
Availability: InStock
Author: superpollo02

Define spacing, typography, color, and accessibility rules for UI design systems.

Updated May 13, 2026

Search Tags:#typography #accessibility #design system #UI components #spacing #tokenization #responsive layout

Ready to run

npx skills add https://github.com/superpollo02/awesome-design-skill --skill spacious-superpollo02

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Spacious
Source: https://github.com/superpollo02/awesome-design-skill/tree/main/skills/spacious
Command: npx skills add https://github.com/superpollo02/awesome-design-skill --skill spacious-superpollo02

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Spacious helps teams avoid cramped, inconsistent interfaces by standardizing spacing rhythm, typography, and layout structure so screens feel readable and intentional.

Core Features & Use Cases

Grid-based layout guidance: Uses an 8pt/baseline-grid mindset to keep spacing consistent across components.
Tokenized typography and color system: Defines clear font roles (Open Sans, Montserrat, IBM Plex Mono) plus primary/semantic colors for reliable visual hierarchy.
Accessibility-forward rules: Enforces WCAG 2.2 AA principles like keyboard-first interaction and visible focus states to prevent common UI accessibility regressions.

Quick Start

Use the Spacious skill to generate design-system rules for spacing, typography, color tokens, and accessibility requirements for a new UI or component set.

Frequently Asked Questions about Spacious

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

FAQPage Schema

How do I create a consistent spacing system for UI components?▼

To create a consistent spacing system for UI components, apply an 8pt baseline grid alongside tokenized typography and color definitions to ensure readable, intentional layout rhythm across buttons, forms, and cards.

What are the WCAG 2.2 AA requirements for UI component design?▼

WCAG 2.2 AA requirements for UI component design mandate keyboard-first interaction, visible focus states, and semantic ARIA-safe patterns to prevent accessibility regressions and ensure usable navigation and forms.

How do I use design tokens for typography and color in a responsive layout?▼

Use design tokens for typography and color by assigning explicit font roles like Open Sans or IBM Plex Mono and semantic colors, applying them consistently across responsive layout structures for reliable visual hierarchy.

Can I generate accessibility acceptance criteria for my design system?▼

Yes, you can generate testable QA acceptance criteria for your design system by defining explicit token usage, ARIA-safe patterns, and WCAG 2.2 AA-aligned interaction states for components like buttons and navigation.

Why do my UI layouts look inconsistent across different screen sizes?▼

UI layouts look inconsistent across screen sizes when they lack a standardized spacing rhythm and tokenized typography, issues solvable by enforcing an 8pt baseline grid and explicit color tokens for responsive page structures.

Does the Spacious skill work for building responsive navigation and forms?▼

Yes, the Spacious skill works for building responsive navigation and forms by providing grid-based layout guidance, tokenized font roles, and keyboard-first accessibility rules specifically tailored for product interfaces.