OpenClaw LaunchOpenClaw Launch
📏

Spacing System Guide

Verified

by Community

Creates systematic spacing scales using base unit multiplication. Covers margin, padding, gap patterns, component spacing, and layout spacing to maintain visual rhythm and consistency across your product.

spacingsystemlayoutconsistency

Spacing System Guide

Build a consistent spacing system that creates visual rhythm throughout your product.

Usage

Provide your base unit to get a complete spacing system.

Examples

  • "Create a 4px-based spacing system with named tokens"
  • "Define component-level and layout-level spacing rules"
  • "Audit our spacing for consistency issues"

Guidelines

  • Use a 4px or 8px base unit for the spacing scale
  • Define named spacing tokens (xs, sm, md, lg, xl)
  • Apply consistent spacing between related and unrelated elements
  • Use tighter spacing within components, looser between them
  • Document spacing rules with visual examples

More Design Tools Skills

🎨
Figma Auto Layout

Master Figma auto layout for responsive designs.

💎
Sketch Symbol Organizer

Organize Sketch symbols and shared styles efficiently.

🎯
Design Token Manager

Create and manage design tokens for consistency.

🔣
Icon Set Generator

Create consistent icon sets for your product.