Spacing System

owl-listener/designer-skills/ui-design/skills/spacing-system

by owl-listener9a6930cf84a8No license2.8K starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 4 weeks ago

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`.

Instructions onlyDesign & Creative
AI-generated overview

Defines a systematic spacing scale with base units, spacing types, density modes and application rules for UI layouts.

What it does
This skill guides the creation of a systematic spacing scale built from a base unit, typically 4px or 8px, with named steps from 2xs to 3xl. It defines spacing types such as inset, stack, inline and grid gap, and gives rules for when each step applies. It also covers density modes (compact, comfortable, spacious) and best practices for consistent spacing. The output is guidance for standardising padding and margins in interfaces.
When to use it
Use it when standardising padding and margins across an interface, or when establishing a consistent spacing rhythm in a design system. It is intended for decisions about spacing values and their application, not for page-level columns and gutters.
Requirements
No tools, packages, runtimes, credentials or network access are required; it is instructions only and ships no scripts.

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

Source and attribution

Source:owl-listener/designer-skillsinui-design/skills/spacing-systemat commit9a6930c

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

More from owl-listener/designer-skills

Zeigarnik Effect

owl-listener

Applies the Zeigarnik Effect to design progress indicators, saved drafts, interruption handling and re-engagement prompts.

Design & Creative2.8Kupdated 4 weeks ago

Teslers Law

owl-listener

Applies Tesler's Law to decide whether product or user should absorb irreducible complexity in a design.

Design & Creative2.8Kupdated 4 weeks ago

Von Restorff Effect

owl-listener

Applies the Von Restorff (isolation) effect to make one key element visually distinct in a UI or layout.

Design & Creative2.8Kupdated 4 weeks ago

State Machine

owl-listener

Models UI component behavior as finite state machines with states, events, transitions, guards, and actions.

Design & Creative2.8Kupdated 4 weeks ago

Visual Hierarchy

owl-listener

Guidance for establishing visual hierarchy in interface layouts using size, weight, colour, spacing and position.

Design & Creative2.8Kupdated 4 weeks ago

Serial Position Effect

owl-listener

Applies the Serial Position Effect to order menus, lists, and step sequences so key items land where users recall them best.

Design & Creative2.8Kupdated 4 weeks ago

More in Design & Creative

Theme Factory

anthropics

Featured

Offers 10 preset color-and-font themes, plus custom theme generation, for styling slide decks, documents, reports and HTML pages.

Design & Creative179Kupdated today

Slack Gif Creator

anthropics

Featured

Creates animated GIFs sized and optimized for Slack, with PIL drawing helpers, easing and validation utilities.

Includes scripts
Design & Creative179Kupdated today

Frontend Design

anthropics

Featured

Guidance for distinctive, intentional visual design when building or reshaping a user interface.

Design & Creative179Kupdated today

Canvas Design

anthropics

Featured

Creates original visual art as PNG or PDF from a written design philosophy, for posters, artworks and other static pieces.

Design & Creative179Kupdated today

Brand Guidelines

anthropics

Featured

Applies Anthropic's official brand colors and typography to artifacts that should carry the Anthropic look-and-feel.

Design & Creative179Kupdated today

Frontend Design

anthropics

Featured

Guides an agent through distinctive, intentional visual design for new or redesigned user interfaces.

Design & Creative149Kupdated today