This page documents the Stellar 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.
Stellar uses a restrained palette anchored in deep navy tones and warm neutrals. Accent gold is used sparingly to elevate key moments.
Primary Brand (Stellar Navy)
Used for typography and key accents
--brand
Brand Tint (Stellar Cream)
Used for subtle surfaces and backgrounds
--brand25
Stellar Gold
Accent color
--stellar-gold
Stellar Slate Gray
Accent color
--stellar-slate-gray
Heading Font
Bodoni Moda (serif)
Used for headings and editorial moments
Primary Font
Lato (sans-serif)
Used for body text and UI
Fallback Stack
system-ui, sans-serif
Used when primary font is unavailable
Heading Style
The quick brown fox jumps over the lazy dog
Body Style
The quick brown fox jumps over the lazy dog
Each text style reflects its responsiveness across breakpoints.
breakpoint → font size / line-height / tracking
Primary Button
Secondary Button
Outline Button
Mobile Button