Layout & Spacing Rules (STRICT)

Installation

pnpm dlx shadcn@latest add @aura/rule-fundations-layout-spacing

The Golden Rule

You are working in a Tailwind v4 environment where --spacing is globally set to 13px. STOP AND CALCULATE: Before writing any utility class ((^|[\s"'])((?:[^"'\s]*:)?)(m|p|mt|mb|mr|ml|mx|my|pt|pb|pr|pl|px|py|gap|space-x|space-y|h|min-h|max-h|w|min-w|max-w|size)-((?:\d+.)?\d+|auto)(?=$|[\s"'])/g), perform this mental check: Value * 13px = Final Pixel Result.

Spacing Reference Table

Spacing System

• MUST: Use 13px as the base spacing unit (NOT 4px like Tailwind default).
• MUST: Define spacing in increments of 0.5 units (1, 1.5, 2, 2.5, 3, 3.5, etc.).
• NEVER: Use partial increments (0.2, 0.4, 0.6, etc.).
• MUST: Calculate spacing as unit * 13px (e.g., 1 = 13px, 2 = 26px, 2.5 = 32.5px).

Tailwind Spacing Warning

• CRITICAL: Tailwind defaults to 4px spacing units. Aura uses 13px.
• MUST: When using Tailwind size classes, understand that values are multiplied by 13px, NOT 4px.
• AFFECTED CLASSES: All size-related Tailwind utilities use 13px base:
  • Margin: m, mt, mb, mr, ml, mx, my
  • Padding: p, pt, pb, pr, pl, px, py
  • Gap: gap, space-x, space-y
  • Dimensions: h, min-h, max-h, w, min-w, max-w, size
• EXAMPLE: p-4 in Aura = 52px (4 × 13px), NOT 16px (4 × 4px).
• SHOULD: Use the spacing CLI command to convert Tailwind classes: dlx @aura-design/cli@latest [target].

Containers

• MUST: All sections must use containers (no sections without containers allowed).
• MUST: Each container has padding, margins, and max-width defined.
• MUST: Maximum of 5 container types per project.
• SHOULD: Avoid varying container configurations unless there's valid justification.
• MUST: Containers follow CSS box model principles.

Integration with pnpm dlx @aura-design/cli@latest

We have a custom CLI tool to handle this translation.

• NEVER use standard Tailwind numeric increments (1, 2, 3, 4) if you are aiming for their default pixel values.
• ALWAYS check if your generated code aligns with the pnpm dlx @aura-design/cli@latest logic.
• IF UNSURE: Use the spacing you think is correct, then self-correct by running: pnpm dlx @aura-design/cli@latest spacing [filename].

Critical Instructions

• NO ARBITRARY VALUES: Never use p-[16px] or m-[20px] unless explicitly asked. Use the 13px scale.
• FORBIDDEN INCREMENTS: Do not use 0.2, 0.4, or any non-0.5 increment (e.g., p-1.2 is BANNED).
• CONVERSION LOGIC: If a requirement asks for "roughly 20px", you MUST use 1.5 (19.5px). Do not use 2 (26px).