Fireplaces.com

This page documents the Fireplaces.com brand as rendered by the production design system. The brand focuses on clarity, speed, and strong visual hierarchy optimized for shopping and discovery.

Color System

Fireplaces.com uses a bold orange-red palette.

Primary Brand

Used heavily for CTAs and emphasis

--brand

Brand Tint

Used for promotional backgrounds

--brand25


Font System

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


Typography

Each text style reflects its responsiveness across breakpoints.
breakpoint → font size / line-height / tracking

h100 – Page / Hero Heading
base (375px) → measuring...
md (768px) → measuring...
lg (1024px) → measuring...
h200 – Section Heading
base (375px) → measuring...
md (768px) → measuring...
lg (1024px) → measuring...
h300 – Subsection Heading
base (375px) → measuring...
md (768px) → measuring...
lg (1024px) → measuring...
h400 – Minor Heading
base (375px) → measuring...
md (768px) → measuring...
lg (1024px) → measuring...
h500
base (375px) → measuring...
md (768px) → measuring...
lg (1024px) → measuring...
h600
base (375px) → measuring...
md (768px) → measuring...
lg (1024px) → measuring...
Lead Paragraph
all breakpoints → measuring...
Body Paragraph
all breakpoints → measuring...

Button Styles

Primary Button

Secondary Button

Outline Button

Mobile Button