Reference

Tokens, components, the kitchen-sink.

Every design decision in Horizon Fix, made visible. The sunrise gradient (eight stops, from red-orange at the top to amber at the bottom), the FIX orange that anchors every CTA, the slate ground that holds everything together, plus every button, card, chip, and signature pattern. If it's not on this page, it's not in the system.

01 · Color

The sunrise gradient is the brand.

Eight stops from red-orange at the crown of the sun disc to amber at the bottom. The FIX orange (#ED5521) is the wordmark fill and the canonical CTA color. Slate-800 is the secondary ground. No purple gradients. No flat-orange substitutes for the gradient.

Sun gradient — 8 stops

sun-1

#EF4136

sun-2

#F15A29

sun-3

#F79034

sun-4

#FBB03B

sun-5

#FBAE39

sun-6

#FAA732

sun-7

#F89C27

sun-8

#F7931E

Brand orange family

brand

#ED5521

brand-deep

#B8401A

brand-soft

#F7841E

brand-darker

#8C2F12

brand-pale

#FCE7DC

brand-tint

#FEF3EB

Ray family — the flat sun-ray fill

ray

#FC9732

ray-soft

#FDB670

Ink — the slate ladder

ink-deep

#0f172a

ink

#1e293b

ink-soft

#475569

ink-mid

#64748b

ink-quiet

#94a3b8

ink-muted

#cbd5e1

Surfaces

#ffffff

bg-soft

#f8fafc

bg-warm

#fef9f4

bg-cream

#fef3eb

bg-slate

#0f172a

surface-gray

#f2f2f2

Accent — emergency only

alert

#811d1d

alert-soft

#fb2c36

02 · Typography

Manrope display, Inter body.

The live site ships only system fonts (Tailwind default). We promote the brand to a real type pairing: Manrope ExtraBold 800 for display (warm humanist geometry), Inter for body (clean utility). Display sizes get -0.02em letter-spacing. Eyebrows get 0.16em uppercase tracking.

Display Manrope 800
clamp(2.75rem, 5vw + 1rem, 5rem)
line-height 1.02
letter-spacing -0.02em
Hero display headline

Always on call.

H1 Manrope 800
clamp(2.25rem, 4vw + 0.75rem, 3.75rem)
line-height 1.05
letter-spacing -0.02em
Page hero, landing-page H1

Nine trades, one phone number.

H2 Manrope 800
clamp(1.75rem, 2.5vw + 0.875rem, 2.75rem)
line-height 1.1
letter-spacing -0.018em
Section title

No job too small.

H3 Manrope 700
1.5rem
line-height 1.2
letter-spacing -0.012em
Sub-section, card title

Quick response times.

H4 Manrope 700
1.25rem
line-height 1.3
letter-spacing -0.008em
Tile heading, label

HVAC repairs, 24/7.

Lede Inter 400
1.125rem
line-height 1.6
color ink-soft
Hero / section subtitle

Always on call for HVAC, plumbing, electrical, masonry, and handyman services. From quick repairs to home renovations, we're here 24/7.

Body Inter 400
1rem
line-height 1.65
color ink
Default reading copy

Expert tradespeople who respond quickly and deliver quality work. Licensed, insured, and dispatched from one phone number across the South Shore — from Quincy to Plymouth and every town in between.

Eyebrow Inter 700
0.6875rem (11px)
letter-spacing 0.16em
UPPERCASE
Sun-line above section title

South Shore MA · Quincy → Plymouth

Eyebrow with bar Eyebrow + 24x2 brand rule
Decorative variant

24/7 Dispatch

03 · Buttons

Sunrise-fill on hover.

The signature button move: solid Horizon orange ground at rest, full sunrise gradient sweep on hover, 280ms ease. Hover any of the accent buttons below to see it — the button literally becomes a small sunrise.

Accent SM Get a free quote→ Accent Get a free quote→ Accent LG Get a free quote→

Dark SM Call now Dark Call now Dark LG Call now

Ghost SM See services Ghost See services Ghost LG See services

Outline Book online Book online Book online

Text Read the full service list →

The .btn-accent hover swaps the solid --brand background for the full --grad-sunrise gradient over 280ms ease. Borrowed from the CentiMark "right-to-left navy fill" hover convention but reframed for warmth. Hover any orange button above to see it.

04 · Sunrise Bar

The signature horizontal-rule motif.

A horizontal pill of the canonical sun gradient, sized to read as a literal horizon line. Replaces the generic "left-color border accent" anti-pattern. Sits above every section eyebrow.

Default — 4px / 56px

Section opener

Use above every body-section eyebrow. The most common variant. Class: .sunrise-bar

Large — 6px / 96px

Hero opener

Reserved for hero blocks and the top of long landing pages. Quieter than display type but still claims the column. Class: .sunrise-bar.lg

Full-bleed variant (.sunrise-bar.full) — pinned to the bottom of the photo hero as the literal horizon line between the photo and the next section.

05 · Wordmark pattern

HORIZON in ink, FIX in brand orange.

When the brand name appears in body copy, the second word ("Fix") gets color: var(--brand) while "Horizon" stays in ink. The wordmark becomes a typographic pattern, not just an image swap. Use the SVG logo only on dark backgrounds — the file is white-on-dark.

SM Horizon Fix

MD Horizon Fix

LG Horizon Fix

On dark Horizon Fix

SVG logo

06 · Sun-disc accent

A quiet brand signature.

A 24px (or 36px large) sun-disc icon — the logo's mark, alone — preceding select H2s. One per page max. Used at hero, mission, and CTA-block moments.

Always on call. Always on time.

Built on five values.

07 · Cards

Modest 8–12px chamfer.

Cards get 8px radius (calmer), CTAs get 12px (friendlier), pills 999px (full). Never zero. The hover lift is 3–4px with a warm orange-tinted shadow.

Generic card

Excellence

Deliver quality work.

Every job, every trade. The standard doesn't move whether we're swapping a flapper or finishing a kitchen.

Integrity

No surprises at the door.

The quote is the price. If we find something on-site that changes the scope, we tell you before we touch it.

Service tile

HVAC

Heating & cooling repairs, maintenance, and emergency installs.

See HVAC →

Plumbing

Leak repair, fixture installs, drain clears, 24/7 emergency calls.

See plumbing →

Electrical

Outlets, switches, panels, and safety inspections by licensed electricians.

See electrical →

Bio card

Mike R.

Lead HVAC technician

Mike runs our HVAC desk — the first call you get on a hot July afternoon when the AC quit before lunch.

Jen T.

Dispatch & scheduling

Jen routes every job. If you call the 24/7 line, you're talking to her or one of her two backups — never an answering service.

Case card

Hingham · Kitchen renovation

Two-week kitchen refresh.

Cabinets, countertops, lighting, and a new electrical panel — one crew, fourteen days, on the price we quoted.

Scituate · Chimney rebuild

Brick from the crown down.

Replaced 18 courses of weathered chimney brick with matched salvage stock. Re-flashed, re-capped, ready for next winter.

Insight card

When to call

A leak that's "just a drip"

A drip under the sink is two things at once: a $40 fix today and a $4,000 floor next year. Same call either way.

When NOT to wait

No heat in February

If the heat quits below freezing, the pipes are on a clock. That's a 24/7 dispatch call — not a "first thing tomorrow" call.

Pricing tier

Standard

$120/visit

Daytime trip charge, Mon–Fri 7–5. Diagnosis included; first hour of labor included.

Book daytime

After hours

$220/visit

Evenings 5–10 and Saturdays. Same diagnosis-included rate as daytime, dispatched within the hour.

Call dispatch→

Overnight

$320/visit

10 PM–7 AM and Sundays. Reserved for true emergencies — no heat, active leaks, electrical sparking.

What counts as emergency

Typical ranges shown for demo only — trip charges vary by zone and trade. The featured tier ribbon ("MOST CALLED") is automatic on .pricing-tier.featured.

08 · Chips & badges

Trust marks, not bragging rights.

Chips carry verifiable claims only — "Licensed", "Insured", "South Shore MA", "24/7". Never invented metrics. Three styles: warm-cream default, dark inverted, outline minimal.

Licensed electricians Insured South Shore MA 24/7 dispatch 9 trades

Always on call Quincy → Plymouth One phone number

HVAC Plumbing Electrical Masonry Handyman Renovations Painting Roofing Siding

09 · Stats

Capabilities, not metrics.

No invented project counts. The stat block instead claims operational facts: trades covered, dispatch hours, geography. The numbers are sunrise-clipped to make the brand visible at a glance.

9 Trades dispatched from one office

24/7 Dispatch — not an answering service

15+ South Shore towns covered, Quincy to Plymouth

10 · Testimonial

Quote, attribution, no theater.

Display-weight quote, brand-orange opening mark, simple avatar + name + role attribution. No gold stars, no five-out-of-five flourishes — the quote does the work.

Called at 6 PM on a Tuesday with no hot water. Tech was at the door by 7:30 with the right part on the truck. The quote was the price. We've called for four jobs since.

Dana H.

Homeowner · Hingham

11 · Pullquote

A line worth lifting.

Display-weight, 4px brand-orange left rule, capped at 28ch. Used in long-form sections to break up reading.

No job too small — from a leaking faucet to a whole-house renovation, we're here 24/7.

12 · Process steps

Call, diagnose, quote, fix.

Four steps with sunrise-filled numerals. The numbers are ink-on-gradient circles, the descriptions are brisk and operational.

Call

One phone number, 24/7. A real dispatcher picks up — not an answering service.

Diagnose

A licensed tech in the right trade arrives with the right truck stocked. The first hour of labor is included.

Quote

Written quote before any work that changes scope. The quote is the price.

Fix

The job done right, on the day. Photos sent on completion. We clean up before we leave.

13 · Expertise matrix

Nine trades, equal footing.

A 3×3 grid — nine cells, one per service line. Hover-warmed cells reinforce the warm-on-white identity. No cell is "primary." No cell is "secondary." All nine are stacked equally.

HVAC Heating & cooling, repairs & installs

Plumbing Leaks, fixtures, drain clears

Electrical Outlets, panels, inspections

Masonry Brick, stone, concrete repair

Handyman All-trades odd-jobs

Renovations Kitchen & bath, whole-home

Painting Interior, exterior, residential & light commercial

Roofing Install, repair, maintenance

Siding Install & repair, all materials

14 · Service checklist

Sunrise checkmarks.

The check icon itself is masked with the sunrise gradient — an unprompted brand moment. Use for "what's included" lists in service detail and pricing pages.

Diagnosis included with every dispatched call
First hour of labor included before clock starts
Written quote before any scope-changing work
Photos sent at completion of every job
Cleanup before we leave the driveway

15 · Coverage zones

South Shore, Quincy to Plymouth.

A warm-cream tile grid of every covered town. Defaults to a 4-column layout on desktop. Use on contact and service-area pages.

Quincy

Weymouth

Hingham

Cohasset

Scituate

Marshfield

Duxbury

Plymouth

16 · Availability

Always on.

A simple seven-row block showing 24/7 dispatch every day — a literal rendering of the brand's defining promise.

Monday24 hours

Tuesday24 hours

Wednesday24 hours

Thursday24 hours

Friday24 hours

Saturday24 hours

Sunday24 hours

17 · CTA band

Slate ground, sunrise glow, hard ask.

A full-bleed dark band with an off-canvas blurred sunrise glow. One per page max. Closes the page narrative before the footer.

Ready when you are

Your trusted handyman & home service experts.

Always on call. Quick response times. Quality work, every trade. Call for a free consultation and quote.

Get a free quote→ Call (978) 893-7728

18 · Emergency strip

36px slate bar, pulsing ray dot.

Sticky-top above the main nav. Every page acknowledges the always-on promise without burying it in a footer. The orange dot pulses on a 2s cycle.

24/7 emergency dispatch · 978·893·7728 Book online →

19 · Footer

Slate ground, sunrise top-rule.

A 4px sunrise gradient pinned to the top edge as a literal horizon line, then four columns: brand block (with the SVG logo), service nav, company nav, contact. Address, phone, copyright on the legal row.