{ "spacing": { "$description": "Greyhaven Design System — Spacing Tokens (derived from component usage patterns)", "0": { "$type": "dimension", "$value": "0", "$description": "None" }, "0.5": { "$type": "dimension", "$value": "0.125rem", "$description": "2px — micro spacing" }, "1": { "$type": "dimension", "$value": "0.25rem", "$description": "4px — tight gaps" }, "1.5": { "$type": "dimension", "$value": "0.375rem", "$description": "6px" }, "2": { "$type": "dimension", "$value": "0.5rem", "$description": "8px — card header gap, form description spacing" }, "3": { "$type": "dimension", "$value": "0.75rem", "$description": "12px" }, "4": { "$type": "dimension", "$value": "1rem", "$description": "16px — form field gap, button padding" }, "5": { "$type": "dimension", "$value": "1.25rem", "$description": "20px" }, "6": { "$type": "dimension", "$value": "1.5rem", "$description": "24px — card padding, card internal gap" }, "8": { "$type": "dimension", "$value": "2rem", "$description": "32px — section margin-bottom" }, "10": { "$type": "dimension", "$value": "2.5rem", "$description": "40px" }, "12": { "$type": "dimension", "$value": "3rem", "$description": "48px" }, "16": { "$type": "dimension", "$value": "4rem", "$description": "64px — major section padding (py-16)" }, "20": { "$type": "dimension", "$value": "5rem", "$description": "80px" }, "24": { "$type": "dimension", "$value": "6rem", "$description": "96px — hero padding" }, "component": { "$description": "Component-specific spacing patterns", "card-padding": { "$type": "dimension", "$value": "1.5rem", "$description": "Card internal padding (px-6)" }, "card-gap": { "$type": "dimension", "$value": "1.5rem", "$description": "Gap between cards (gap-6)" }, "section-padding": { "$type": "dimension", "$value": "4rem", "$description": "Vertical padding between major sections (py-16)" }, "form-gap": { "$type": "dimension", "$value": "1rem", "$description": "Gap between form fields (gap-4)" }, "button-padding-x": { "$type": "dimension", "$value": "1rem", "$description": "Button horizontal padding (px-4)" }, "navbar-height": { "$type": "dimension", "$value": "4rem", "$description": "Navbar height (h-16)" } } } }