{ "spacing": { "$type": "dimension", "$description": "Spacing scale based on 4px base unit. All values are multiples of 4.", "0-5": { "$value": "2px", "$description": "Hairline — icon-to-text tight spacing, fine adjustments" }, "1": { "$value": "4px", "$description": "Tight — inline spacing, minimal gaps between related elements" }, "2": { "$value": "8px", "$description": "Small — related element gaps, compact padding, icon margins" }, "3": { "$value": "12px", "$description": "Component internal padding (small), chip padding" }, "4": { "$value": "16px", "$description": "Default component padding, form field gap, card grid gutter (mobile)" }, "5": { "$value": "20px", "$description": "Medium component spacing" }, "6": { "$value": "24px", "$description": "Card padding, section gap (small), card grid gutter (desktop)" }, "8": { "$value": "32px", "$description": "Section gap (medium), form section separation" }, "10": { "$value": "40px", "$description": "Section gap (large)" }, "12": { "$value": "48px", "$description": "Page section separation, vertical rhythm break" }, "16": { "$value": "64px", "$description": "Hero/banner vertical spacing" }, "20": { "$value": "80px", "$description": "Major page sections, large vertical spacing" } }, "borderRadius": { "$type": "dimension", "$description": "Border radius scale for consistent rounding across components.", "none": { "$value": "0px", "$description": "Square corners — tables, dividers, sharp elements" }, "sm": { "$value": "4px", "$description": "Small radius — inputs, small interactive elements, chips" }, "md": { "$value": "8px", "$description": "Medium radius — cards, buttons, dropdowns (default)" }, "lg": { "$value": "12px", "$description": "Large radius — modals, large cards" }, "xl": { "$value": "16px", "$description": "Extra large — feature cards, hero elements" }, "full": { "$value": "9999px", "$description": "Full/pill — avatars, pill buttons, circular elements" } } }