Spacing System
Define a 4px or 8px-based spacing scale with inset, stack, inline, and grid rules so layouts stay consistent.
Overview
Spacing System is an agent skill for the Build phase that creates a base-unit spacing scale with inset, stack, inline, and grid rules plus compact, comfortable, and spacious density modes.
Install
npx skills add https://github.com/owl-listener/designer-skills --skill spacing-systemWhat is this skill?
- Eight-step scale from 2xs (2px) through 3xl (64px) anchored on a 4px or 8px base unit
- Four spacing types: inset, stack, inline, and grid gap with contextual application rules
- Three density modes—compact, comfortable, spacious—for data-heavy vs reading-focused views
- Rule to never use arbitrary spacing values outside the documented scale
- 8 named scale steps from 2xs through 3xl
- 3 density modes: compact, comfortable, spacious
- 4 spacing types: inset, stack, inline, grid gap
Adoption & trust: 602 installs on skills.sh; 1.5k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your UI uses inconsistent gaps and padding because every screen picks random pixel values.
Who is it for?
Indie builders starting or tightening a design system while implementing SaaS, mobile, or extension frontends.
Skip if: Pure backend API work or marketing pages where spacing is entirely delegated to a no-code template with fixed theme tokens you cannot change.
When should I use this skill?
Create a consistent spacing system based on a base unit with contextual application rules.
What do I get? / Deliverables
You get a documented spacing scale, application rules, and density modes the agent can apply instead of arbitrary margins and padding.
- Spacing scale table with named steps
- Application rules for inset, stack, inline, and grid
- Density mode guidance per view type
Recommended Skills
Journey fit
Spacing systems are established while designing and implementing UI structure, before you rely on ad-hoc margin values across components. Frontend is the right shelf because spacing tokens directly govern padding, gaps, and responsive layout in components and pages.
How it compares
Use for systematic layout tokens, not as a full design-system generator that also owns color, type, and iconography.
Common Questions / FAQ
Who is spacing-system for?
Solo builders and small teams implementing UI who need a repeatable spacing scale and density rules their coding agent can follow on every component.
When should I use spacing-system?
Use it during Build when defining design tokens, refactoring inconsistent margins, or specifying stack and grid gaps for new feature screens.
Is spacing-system safe to install?
It provides layout documentation only; review the Security Audits panel on this page for the package source and agent permissions in your environment.
SKILL.md
READMESKILL.md - Spacing System
# Spacing System You are an expert in creating systematic spacing for consistent, harmonious interfaces. ## What You Do You create spacing systems that bring consistency and rhythm to layouts. ## Base Unit Choose a base unit (typically 4px or 8px) and build a scale: - 2xs: 2px - xs: 4px - sm: 8px - md: 16px - lg: 24px - xl: 32px - 2xl: 48px - 3xl: 64px ## Spacing Types - **Inset**: Padding inside containers (equal or squish/stretch variants) - **Stack**: Vertical space between stacked elements - **Inline**: Horizontal space between inline elements - **Grid gap**: Space between grid/flex items ## Application Rules - Related items: smaller spacing (sm/md) - Distinct sections: larger spacing (lg/xl) - Page margins: consistent per breakpoint - Component internal: defined per component ## Density Modes - Compact: reduce spacing by one step (for data-heavy views) - Comfortable: default spacing - Spacious: increase spacing by one step (for reading-focused) ## Best Practices - Always use the scale — never arbitrary values - Consistent spacing within components - Larger gaps between unrelated groups - Document spacing intent, not just values - Test spacing at different viewport sizes