This page documents the Heatilator 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 Heatilator digital experiences.
Heatilator uses a strong red as its primary brand color. A muted tint supports secondary surfaces and subtle emphasis without distraction.
Primary Brand
Used for CTAs, separators, emphasis, and key indicators
--brand
Brand Tint (25%)
Used for background accents and secondary surfaces
--brand25
Primary Font
Arimo (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