Rad Spacing

• spacing/xs → 4px
• spacing/sm → 8px
• spacing/md → 12px
• spacing/lg → 16px
• spacing/xl → 24px
• spacing/2xl → 32px
• spacing/3xl → 48px
• Adapt the naming if the library already has a pattern for other variable types.

Examples

Input request: "Create a settings page with a sidebar and content area containing form sections."

Hierarchy and spacing calculation (base = 8px, working outward):

Result: A settings page where the tightest spacing (8px) groups labels with their inputs, slightly wider spacing (12px) separates fields, wider still (16px) distinguishes form sections, and the largest spacing (24–32px) frames the overall page and content area. The eye naturally parses the groupings without explicit dividers.

Common edge cases

• No library variables exist: Create the semantic spacing variables as described in step 3. Confirm the naming convention with the designer or adapt to any existing variable patterns in the file.
• Deeply nested structures (4+ levels): The 40% rule may push the outermost spacing very large. Cap the maximum at a reasonable value (e.g., 48px or 64px) and compress the inner levels to fit, maintaining the relative progression.
• Hitting the 4px minimum: If the innermost level calculates below 4px, floor it at 4px and recalculate outward from there.
• Ambiguous nesting depth: When it's unclear whether elements are siblings or parent-child, default to treating visually distinct groups as separate hierarchy levels.
• Mixed component reuse: A component used at different nesting depths may need spacing overrides via instance properties. Apply the spacing appropriate to its context, not its definition.
• Existing designs with inconsistent spacing: Audit the current values first, then remap systematically from the innermost level outward rather than adjusting individual values in isolation.