spacious

Generate design-system guidance for spacious UI layouts using tokenized spacing and typography.

2.3k|211|Updated Mar 9, 2026
One-click install
npx skills add https://github.com/bergside/awesome-design-skills --skill spacious-bergside
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: spacious
Source: https://github.com/bergside/awesome-design-skills/tree/main/skills/spacious
Command: npx skills add https://github.com/bergside/awesome-design-skills --skill spacious-bergside

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Spacious eliminates cramped, inconsistent UI spacing that makes interfaces harder to scan, operate, and maintain.

Core Features & Use Cases

It provides an opinionated spacing rhythm (8pt baseline grid), typographic foundations (12/14/16/18/24/30/36 with specified font families and weights), and a cohesive color-token set to keep layouts clean and readable; use it when building dashboards, settings pages, content-heavy screens, or any product UI that benefits from clear hierarchy and comfortable padding.

Quick Start

Use the Spacious skill to generate design-system guidance for an AI-assisted UI implementation that follows the 8pt grid, tokenized typography, and accessibility-first interaction rules.

Frequently Asked Questions about spacious

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

FAQPage Schema
How do I implement consistent UI spacing and typography for a design system?

Implement consistent UI spacing by applying an 8pt baseline grid alongside tokenized typography and color sets. This approach enforces readable hierarchy and comfortable padding across product screens, eliminating cramped and inconsistent layouts.

What's the best way to ensure my dashboard UI meets WCAG 2.2 AA accessibility standards?

Ensure dashboard UI accessibility by applying design-system guidance that mandates WCAG 2.2 AA compliance, keyboard-first interaction rules, and explicit component states. This creates interfaces that are operable via keyboard and readable for users.

Can I use tokenized spacing rules for content-heavy forms and settings pages?

Yes, tokenized spacing rules are explicitly designed for content-heavy forms, settings pages, and dashboards. The spacing rhythm applies an 8pt grid to control visual rhythm and maintain clear hierarchy across complex product screens.

How does an 8pt baseline grid improve UI component states and visual rhythm?

An 8pt baseline grid improves visual rhythm by standardizing padding and spacing across component states. It anchors concrete QA-friendly rules to spacing and typography tokens, ensuring layouts remain clean and readable.

Do I need specific font families to follow design system typography tokens?

The design system typography tokens specify exact font families and weights across a 12 to 36 size range. Using these specified families ensures your interface maintains the intended readable hierarchy and controlled visual rhythm.

Why does my UI layout look cramped despite using standard component spacing?

UI layouts look cramped when spacing lacks an opinionated rhythm or tokenized foundation. Applying a cohesive color-token set with an 8pt baseline grid and specified typographic foundations eliminates inconsistent padding and improves scannability.