This page documents the Simplifire 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 Simplifire site.
Simplifire uses a bold blue as its primary brand color, paired with a deeper blue tint for backgrounds and supporting elements. Neutral system colors are used for the majority of layout and content, allowing the brand color to drive emphasis and interaction.
Primary Brand
Primary blue used for CTAs, links, and key interactions
--brand
Brand Tint
Deeper blue used for backgrounds and supporting UI
--brand25
Primary Font
Inter (sans-serif)
Used for all UI, marketing content, and body text
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