Brand colors

Blue is the brand chrome (links, headings on white, primary surfaces). Red is the action color (Call Now, Request a Quote, conversion CTAs). Use red sparingly so it always carries weight.

• Bay State Blue#254a9e · --primary
• Blue Deep#1b3978 · --primary-deep
• Blue Soft#eaf0fb · --primary-soft
• Bay State Red#a71a2b · --accent
• Red Deep#7d101e · --accent-deep
• Red Soft#fbeaec · --accent-soft

Neutrals

Two surface tones (Base behind Surface), three ink levels for hierarchy, two rule weights for dividers.

• Base#fafafa · page bg
• Surface#ffffff · cards, forms
• Ink#101418 · body text
• Ink Soft#3a4048 · lede, captions
• Ink Muted#6b7280 · meta, dt
• Rule#e3e6eb · dividers

Typography

Inter Variable across the entire system. Differentiation comes from weight + size + tracking, not multiple families. Headings use tighter letter-spacing; eyebrows and overlines use loose tracking + uppercase.

Lochinvar Boilers Stocked in Springfield

h1 · 2xl · 800 · -0.025em

Built for contractors who can’t wait.

h2 · xl · 700 · -0.02em

In-stock inventory, fast counter pickup

h3 · lg · 700 · -0.015em

Why Lochinvar?

h4 · md · 700

Section header

h5 · base · 700 · uppercase

Eyebrow / Overline

h6 · xs · 700 · +0.12em · uppercase

Body copy. Bay State Plumbing & Heating Supply has stocked the parts contractors actually need since 1949 — Watts mixing valves, Lochinvar boilers, Webstone isolation valves, and a counter staff that knows the difference between residential and commercial spec.

body · base · 400 · line-height 1.6

Small / meta. Quote turnaround usually under 2 hours during business hours. After-hours quotes go to the morning queue.

small · sm · 400 · ink-soft

Spacing scale

Generated from theme.json: 7 steps, each 1.5x the previous, base 1.5rem. Values surface as --wp--preset--spacing--{slug}.

1. 10 · 0.444rem
2. 20 · 0.666rem
3. 30 · 1rem
4. 40 · 1.5rem (medium)
5. 50 · 2.25rem
6. 60 · 3.375rem
7. 70 · 5.063rem

Elevation

Restrained scale. Use md for cards, lg for floating panels, xl only for modals.

• sm · 1px hairline
• md · cards
• lg · floating
• xl · modals

Buttons

Three variants. Red accent (default) for the primary action on a page (Call Now, Request a Quote). Blue primary for secondary actions tied to brand. Ghost for tertiary or destructive-confirm flows.

Small

Form fields

Sharp corners, generous touch targets, blue focus ring with soft halo. Used by the Quote Request form throughout the site.

Links

Underlined by default for clarity. Hover transitions to red.

Inline link in body copy: our Lochinvar boiler page opens to the full lineup. Tap a brand to see what we stock locally.

Standalone link →

Agent attributes

Every meaningful interactive or navigational element carries data-agent-* attrs so AI agents can target them. These are not for analytics — they’re semantic role declarations.

• data-agent-purpose — what this DOM node is ("site-header", "hero", "category-grid", "quote-form", "contact-strip")
• data-agent-interactive — what action this triggers ("primary-cta", "routing", "click-to-call", "open-modal", "form-submit")
• data-agent-content-source — backing data origin where applicable ("cms/posts", "cpt/bsp_brand", "api/products")