Horizon Fix · Design System Showcase

Sunrise warmth. Slate competence.

A full kit-of-parts extracted from horizonfix.com — real CSS tokens, the real 8-stop sun-gradient logo, and 8 service-category photos. Manrope display + Inter body, the FIX orange #ED5521 over warm cream and slate-800, modest 8–12px chamfer, and a signature 4px sunrise bar above every section eyebrow. The register is optimistic-trades — South Shore Massachusetts's "one phone number for the whole house" multi-trade contractor.

Sourcehorizonfix.com
TypeManrope 800 + Inter 400
Brand#ED5521
Captured2026-05-08
Coverage9 trades · 1 number · 24/7
Three views into the system

Reference, catalog, demo.

Three doors into the same set of tokens. Open the reference for the kitchen-sink, the catalog for every section pattern in Horizon Fix's voice, or the demo pages for full compositions.

01 · Reference

Design System

Every color, font, button, card, sunrise-bar, and component documented from the live Tailwind v4 chunk. The kitchen-sink — everything you can build with.

Open the reference 02 · Catalog

Sections

Every section pattern from the universal catalog rendered in Horizon Fix's voice — services-grid, expertise-matrix, process-steps, coverage-zones, plus signature blocks (Sunrise-Scrim Hero, 24/7 Emergency Strip, Trust Strip, Sun-disc accent).

Browse the catalog 03 · Demo

Pages

Full-page compositions: homepage, services landing, 24/7 emergency landing, and contact — each composed only from _shared.css tokens and the catalog patterns.

See the pages 04 · Source

Brand Spec

The markdown source-of-truth: voice anchors verbatim from the live site, color tokens with frequency counts, signature patterns, forbidden moves, and mood keywords. Read it before you change anything.

Read the spec
At a glance

What's in this kit.

Eight files, one system. The CSS is the source of truth; the HTML pages are the receipts.

Files in this kit

_shared.css All tokens, all components. ~44 KB. Imports Manrope + Inter from Google Fonts. Edit only here — the demo pages reference these classes.
brand-spec.md Source-of-truth narrative. Voice anchors, signature patterns, color extraction notes, forbidden moves, mood keywords. Read this first.
palettes.json Alternate palette specs for the toggle script. The default Horizon-Fix sunrise plus alternates.
index.html This page. System overview + at-a-glance.
design-system.html Token + component reference. Every color, font, button, and card visible.
sections.html Pattern catalog. Every reusable block rendered in Horizon Fix's voice with real copy.
homepage.html Flagship homepage demo. Photo hero, service-tile grid, expertise matrix, process, testimonials, CTA band.
landing-1-services.html All nine service lines on one long-scroll page. Alternating photo / copy rows.
landing-2-emergency.html 24/7 emergency dispatch landing. Process, expertise matrix of emergency types, FAQ, pricing tier row.
landing-3-contact.html Contact / quote landing. Form, contact card, coverage zones, FAQ, map placeholder.
pages.html Gallery picker linking to every page in this kit.
assets/horizon-fix-brand/ The real logo (light-on-dark SVG with embedded sun-gradient), one residential hero photo, and 8 service-category photos pulled from the live Manus-CDN.

Quick characterizations

Vibe
Optimistic, fresh-start every job. A sunrise on the horizon line above slate competence. Approachable enough that a homeowner calls without hesitation, capable enough that they call for the whole house.
Audience
Residential homeowners across South Shore Massachusetts (Quincy → Plymouth) who are tired of keeping nine specialists' numbers in their phone. Light commercial second.
Voice anchors (verbatim)
"Always on call — 24/7 availability."
"No job too small — from quick repairs to home renovations."
"Your trusted handyman & home service experts."
"Expert tradespeople who respond quickly and deliver quality work."
Forbidden
No purple gradients. No flat-orange substitutes for the sun gradient. No CSS-silhouette of the logo. No emoji-as-icon. No "0+ years" or "0+ projects" placeholder counters. No carousels for service tiles. No "as featured in" press logos. No mascots.
Mood keywords
Optimistic Sunrise Multi-trade Approachable Capable