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"