spacing-system
owl-listener/designer-skills
Create a systematic spacing scale from a base unit with clear application rules for consistent layouts.
What is spacing-system?
A spacing system skill that helps you build harmonious interfaces by establishing a base unit (typically 4px or 8px) and scaling it across inset, stack, inline, and grid-gap spacing types. Use this when standardizing padding and margins throughout a design; for page-level columns and gutters, use the layout-grid skill instead.
- Define a base unit and generate a complete spacing scale (2xs through 3xl)
- Categorize spacing into inset (padding), stack (vertical), inline (horizontal), and grid-gap types
- Apply context-aware rules: smaller spacing for related items, larger spacing for distinct sections
- Support density modes (compact, comfortable, spacious) to adapt spacing for different use cases
- Document spacing intent and test across viewport sizes
How to install spacing-system
npx skills add https://github.com/owl-listener/designer-skills --skill spacing-systemHow to use spacing-system
- 1.Choose a base unit (4px or 8px) for your scale
- 2.Generate the full spacing scale using the provided steps (2xs: 2px through 3xl: 64px)
- 3.Define application rules for your context: which spacing steps apply to related vs. distinct items
- 4.Implement spacing types for your components: inset for padding, stack for vertical gaps, inline for horizontal gaps, grid-gap for flex/grid layouts
- 5.Test spacing at different viewport sizes and adjust density modes (compact/comfortable/spacious) as needed
- 6.Document the spacing intent behind each choice, not just the numeric values
Use cases
- Standardizing padding and margins across a component library
- Creating visual hierarchy by using larger gaps between unrelated content sections
- Adapting spacing density for data-heavy dashboards versus reading-focused layouts
- Ensuring consistent page margins and component internal spacing across breakpoints
- Building a design system foundation that scales from mobile to desktop
- Design system creators
- UI/UX designers building component libraries
- Product designers standardizing layouts
- Frontend developers implementing design systems
spacing-system FAQ
Typically 4px or 8px. 8px is more common for web and scales well across devices; 4px offers finer control but requires more discipline.
Use smaller spacing (sm/md) for related items that belong together; use larger spacing (lg/xl) to create visual separation between distinct sections or unrelated content groups.
Compact reduces spacing by one step for data-heavy views, comfortable is your default, and spacious increases spacing by one step for reading-focused layouts.
No. Always use the defined scale to maintain consistency and rhythm. If no step fits your need, it signals the scale may need adjustment.
Use layout-grid for page-level columns and gutters; use spacing-system for component-level padding, margins, and internal element spacing.
Full instructions (SKILL.md)
Source of truth, from owl-listener/designer-skills.
name: spacing-system
description: Create a spacing scale from a base unit with rules for when each step applies. Use when standardising padding and margins. For page-level columns and gutters, use layout-grid.
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
Related skills
More from owl-listener/designer-skills and the wider catalog.
stakeholder-alignment
Build responsibility matrices, decision rights, and communication plans to unblock stakeholder alignment.
state-machine
Model UI behavior as explicit states, events, and transitions to eliminate impossible states.
summarize-interview
Turn interview transcripts into structured themes, quotes, and action items for immediate research insights.
survey-design
Design unbiased surveys to measure attitudes and prevalence at scale with sound methodology.
team-workflow
Design your team's operating rhythm—task management, rituals, and collaboration tooling.
test-scenario
Write realistic usability test scenarios with success criteria and observation guides.