rad-spacing

What problem does it solve?

Spacing inconsistencies across screens and components lead to messy layouts and a confusing visual hierarchy; this guide provides a structured method to create and maintain cohesive spacing using a scalable system.

Core Features & Use Cases

• Use 8px/4px increments sourced from the design library to establish a consistent spacing scale across pages, sections, cards, and nested elements.
• Bind spacing values to existing library variables when available, or create semantic variables (spacing/xs to spacing/3xl) to enable predictable, reusable layouts.
• Apply padding on auto-layout frames for container-level spacing and gap for inter-element spacing to reinforce the visual hierarchy and improve readability.
• Example: a deeply nested card with outer padding larger than inner gaps to clearly distinguish hierarchy levels.

Quick Start

Identify the nesting depth of the design, map the hierarchy spacing using 8px/4px increments, and apply the library variables to implement consistent spacing across layers.