Style Guide
Comprehensive design system documentation for the Subourbon admin portal
Typography
Font families, sizes, weights, and usage guidelines
H1 - Display Heading
Font: Gastromond | Size: 2.333rem | Weight: 400
className="sb-h1 text-foreground"H2 - Section Heading
Font: Miller Headline | Size: 2rem | Weight: 500 | Letter Spacing: 0.005em
className="sb-h2 text-primary"H3 - Card Title
Font: Miller Headline | Size: 1.5rem | Weight: 500 | Letter Spacing: 0.01em
className="sb-h3 text-primary"H4 - Subtitle
Font: Bodoni Moda | Size: 1.3rem | Weight: 600 | Italic
className="sb-h4"H5 - Small Heading
Font: Barlow Condensed | Size: 1.2rem | Weight: 400 | Uppercase
className="sb-h5"Menu Item Title
Font: Bodoni Moda | Size: 18px (1.125rem) | Weight: 600 | Optical Size: 18 | Normal (Not Italic)
className="font-['var(--font-bodoni)'] text-[1.125rem] font-semibold not-italic" style={{ fontOpticalSizing: 'auto' }}Body Text - Main content with optimal readability. Use for all body content and paragraphs throughout the application.
Font: Gotham Narrow | Size: 1rem | Weight: 400 | Color: White (text-foreground)
Same font as Secondary Text - only color differs (white vs gray)
className="sb-body text-foreground"Secondary Text - Use for descriptions, helper text, and less important information.
Font: Gotham Narrow | Size: 1rem | Weight: 400 | Color: Gray 64% (text-secondary)
Same font as Body Text - only color differs (gray vs white)
className="sb-body text-secondary"Pricing Text
$2,850.00
Font: Barlow Condensed | Size: 1.25rem | Weight: 500 | Tabular
className="sb-price text-primary"“Elegant simplicity in every sip.”
Font: Scotch Display | Size: 1.5rem | Weight: 900 (Black) | Italic | Leading: Relaxed
className="sb-quote text-foreground"