Internal

Style Guide

Every component and token the template ships with. Use this page to eyeball regressions after a theme swap or to pick reusable pieces when building new sections.

01 · Palette

Three families, named tokens

Always use named classes — brand-*, ink-*, paper-* — never raw hex.

Brand — Wesmor orange

Two steps in the brand scale carry distinct semantic roles. Treat them as different colors when designing — not interchangeable shades.

brand-500 · Logo / accent orange

#EF7E31 — sampled from the Wesmor shield mark. Use for decorative accents: italic headline highlights, eyebrow labels, the brand underline, the hero pulse dot, icon tiles at low opacity, hairline rules, drop caps. Do not use as a solid surface under white text — fails WCAG AA at 2.64:1.

brand-600 · CTA / action orange

#D9651B — the deeper interactive orange. Use for solid surfaces with white text on top: primary phone buttons, sticky call bar, accent service tiles, the Testimonials CTA card. Contrast vs white = 3.52:1 (passes WCAG AA Large for bold ≥18px, where CTA labels live). Hover state brightens back to brand-500.

brand-50

brand-100

brand-200

brand-300

brand-400

brand-500

brand-600

brand-700

brand-800

brand-900

brand-950

Ink — slate neutrals

ink-50

ink-100

ink-200

ink-300

ink-400

ink-500

ink-600

ink-700

ink-800

ink-900

ink-950

Paper — cool off-whites

paper-50

paper-100

paper-200

paper-300

02 · Typography

Fraunces display, Inter body

H1 hero — font-display

Your bold headline goes here

H2 section heading

A full range of services

H3 subheading

Reason title goes here

Body — Inter, text-base / text-lg

Body copy uses Inter at text-base or text-lg with relaxed leading. Inline emphasis uses the brand-underline utility for a subtle highlight.

Eyebrow — light surface (text-brand-600)

Eyebrow goes here

Eyebrow — dark surface (text-brand-300)

Eyebrow goes here

03 · Buttons

PhoneButton component

Variants primary · secondary · ghost. Sizes sm · md · lg.

04 · Utilities

Brand-specific utilities

brand-rule — hairline divider

A 1.5rem brand-colored hairline. Used flanking eyebrow text.

brand-underline — inline emphasis

Use brand-underline to draw a subtle highlight behind a phrase inside body copy.

drop-cap — editorial first letter

Drop-cap floats a large brand-colored first letter into the paragraph. Useful for a single editorial moment — use it once per page, never twice. Pairs well with the AboutBand body copy.

grain-overlay — tactile texture on dark surfaces

Adds subtle SVG film grain via ::before. Used on Hero and dark sections to add depth without imagery.

05 · Service icons

14 generic line icons

Industry-agnostic set. 1.4px stroke, 32×32 viewBox, currentColor. Use <ServiceIcon name="..." />.

wrench
shield
check
clock
calendar
star
award
truck
home
building
map-pin
phone
leaf
financing

06 · Sections

Composable section library

Reuse these in src/pages/index.astro instead of inventing new ones. All read from src/config/content.ts by default.

Hero Dark-blue hero with logo bar, headline + italic accent, subhead, primary CTA, trust grid.
AboutBand Image-on-top + centered eyebrow/heading/body/signature on dark surface.
ServiceFeatures Service card grid. Icon + title + description + note. Optional accent variant.
EditorialGrid 2×2 (mobile) → 1×4 (desktop) image grid with brand dividers.
EditorialPhoto Full-bleed cinematic photo strip with optional overlay caption.
PullQuote Featured customer quote with stylized opening quote glyph. Dark or light tone.
WhyChooseUs Light section with checkmark-icon reasons in a 2-col grid.
MidPageCTA Small dark-blue band mid-scroll — one-liner heading + primary phone CTA. Captures mid-page converters.
Testimonials Dark card grid with reviews + brand CTA card filling the orphan slot.
ServiceArea Background photo + dark overlay with eyebrow/heading/body.
FAQ Accordion (native <details>) with FAQPage schema.org markup.
CTABand Closing CTA band with photo background and primary phone button.

See them composed end-to-end on the homepage.

07 · Writing

Voice & copy rules

Apply these when filling out content.ts for a new client. They keep the copy human and prevent the "AI tell."

Do not overuse em dashes

One em dash per paragraph is the ceiling. One per section is the target.

Each em dash is a dramatic beat. Stack two or three in a row and the rhythm collapses — that's the single biggest "AI wrote this" tell. Before reaching for one, try a comma, a period, or restructuring the sentence. Especially avoid back-to-back em dashes in adjacent sentences.

Avoid

"We're licensed, insured, and reliable — every job is done right — and we stand behind our work — call today."

Prefer

"We're licensed, insured, and reliable. Every job is done right, and we stand behind our work — call today."
H2 headings — no trailing period

Section headings are titles, not sentences. "A full range of services" — not "A full range of services."
Subheads add a new angle, not a restatement

If the subhead just rephrases the heading, delete it. The subhead earns its space by adding a benefit, a qualifier, or a specific detail.
Italic highlight — one phrase per headline

Pick the single word or short phrase that carries the meaning, set it in italic brand-blue via the highlight prop. Two highlights in one headline cancel each other out.
Specific beats vague

"24×7 emergency service" beats "always available." "Permits and inspections included" beats "we handle everything." Real numbers, real services, real timelines.
Don't claim what isn't true

Default placeholders avoid "free estimates," "same-day," "licensed & insured" until the client confirms. Add them per-client in client.ts only when verified.