Spacing
An 8px base grid system for consistent, harmonious layouts.
Spacing Scale
Monarch uses an 8px base unit. All spacing values are multiples or fractions of 8px, creating rhythm and consistency across every component.
Border Radius
Rounded corners at consistent scales — from subtle rounding to full pills.
Usage Guidelines
• Use space-2 (8px) as the base padding for tight elements like badges and inline items
• Use space-4 (16px) for standard component padding — inputs, small cards
• Use space-6 (24px) for card padding and content area gutters
• Use space-8 (32px) or space-10 (40px) for section spacing within a page
• Use space-16+ (64px+) for major section breaks between content blocks
• radius-lg (12px) is the default for cards and containers
• radius-md (8px) for buttons, inputs, and smaller elements
• radius-full for avatars, pills, and badges