This page documents the Heat & Glo brand as rendered by the production design system. All typography, color tokens, and layout behavior shown here use the same Tailwind variants and CSS custom properties used across the live Heat & Glo site.
Heat & Glo uses a vibrant orange as its primary brand color, supported by a warm, light tint for backgrounds and accents.
Primary Brand
Used for CTAs, separators, highlights, and emphasis
--brand
Brand Tint (25%)
Used for soft backgrounds and supporting accents
--brand25
Primary Font
Source Sans 3 (sans-serif)
Used for body text, UI, and general content
Fallback Stack
system-ui, sans-serif
Used when primary font is unavailable
Each text style reflects its responsiveness across breakpoints.
breakpoint → font size / line-height / tracking
Primary Button
Secondary Button
Outline Button
Mobile Button