# Horizon Fix — Design System Spec

> Source: horizonfix.com (live site, captured 2026-05-08)
> Stack: Next.js 15 + Tailwind v4 (utility-CSS bundle `chunks/71dd4e75....css`, 27KB)
> Real assets: brand logo (SVG with embedded sun-gradient + wordmark) and 8 service-tile photos pulled from the live Manus-CDN (the live site's image host).
>
> **Honesty note**: the live site's hero/service imagery is stock photography (one image carries an `Andrey Popov` Shutterstock copyright tag). It works as service-category illustration but **must NOT be framed as "our work"** in any deployed sprinkle. When this system is sprinkled into a real Horizon Fix client, swap stock for real on-site photography.

---

## At-a-glance

- **Business**: Horizon Fix — multi-trade home services / 24-7 handyman & home renovation contractor
- **What they actually do**: nine service lines under one roof, all dispatched from one office:
  1. **HVAC** — repairs, maintenance, installations, heating & cooling emergencies
  2. **Plumbing** — leak repair, fixture installs, 24/7 emergency calls
  3. **Electrical** — outlets, switches, safety inspections (licensed electricians)
  4. **Masonry** — brick / stone / concrete repair + larger projects
  5. **Handyman** — all-trades odd-jobs, "no job too small"
  6. **Home renovations** — kitchen + bath remodel through whole-home transformation
  7. **Painting** — interior + exterior, residential + light commercial
  8. **Roofing** — install, repair, maintenance (licensed + insured)
  9. **Siding** — install + repair, all material types
- **Geography**: South Shore Massachusetts (Quincy → Plymouth + surrounding towns)
- **Audience**: B2C residential first, light-commercial second. Homeowners who want **one phone number for the whole house** instead of a Rolodex of specialists.
- **Phone**: +1 978 893 7728 (24/7 emergency dispatch)
- **Email**: hello@horizonfix.com
- **Voice anchors pulled VERBATIM from live site**:
  - *"Always on call for HVAC, plumbing, electrical, masonry, and handyman services."*
  - *"No job too small—from quick repairs to home renovations, we're here 24/7."*
  - *"Your Trusted Handyman & Home Service Experts"*
  - *"Expert tradespeople who respond quickly and deliver quality work."*
  - *"Quick response times"*
  - *"Always on call - 24/7 availability"*
  - *"Ready to start your project? Contact us today for a free consultation and quote."*
  - *"Your trusted partner for handyman services and smart home automation solutions."*
- **Core values (from About page)**: Excellence · Integrity · Collaboration · Timeliness · Innovation
- **Register**: optimistic, "fresh-start every job" trades. Sunrise warmth + slate competence — softer than a patriot HVAC voice (Goettl), warmer than a B2B commercial-roofing voice (CentiMark), simpler than a windows-installer lead-gen voice (Master Craftsmen). Closest analog: a **bright, generalist trades brand** that wants to feel approachable AND capable across nine trades — "the one company you call."

---

## 🎯 Core assets (one-class citizens)

### Logo

- **File**: `assets/horizon-fix-brand/logo-light.svg` (707 × 130 viewBox, ~12 KB)
- **Anatomy** (real, extracted from the SVG defs):
  - **Rising-sun radial mark on left** — 16 radiating rays + central disc + cloud silhouettes at the horizon line. The disc carries an 8-stop linear gradient:
    ```
    #EF4136  → #F15A29  → #F79034  → #FBB03B
    #FBAE39  → #FAA732  → #F89C27  → #F7931E
    ```
    Reading top→bottom this is a **fiery sunrise**: red-orange at the crown, gold at the bottom. Rays carry a flat warm-orange `#FC9732`. Cloud silhouettes are pure white.
  - **Wordmark on right** — two-color, single weight: `HORIZON` in `#FFFFFF` (white) + `FIX` in `#ED5521` (vivid Horizon orange).
- **Usage scenarios**: header, footer, hero overlay, business card, vehicle wrap, t-shirt embroidery
- **Variants needed (TODO when sprinkled to a real client)**:
  - dark-on-light variant (wordmark inverts to slate `#1e293b`)
  - mark-only variant (sun glyph alone, square crop)
  - small-mark variant for favicon ≤ 32px
- **Forbidden**: never recolor the sun gradient; never separate "HORIZON" from "FIX"; never put the white wordmark on a light background without the sun mark providing color anchor; never stretch.

### Service-tile photography (representative, NOT "our work")

- 8 service-category photos pulled from the live site's Manus-CDN host:
  - `svc-hvac.webp` (800 × 534)
  - `svc-plumbing.jpg` (1024 × 683)
  - `svc-electrical.jpg` (1024 × 683 — Shutterstock / Andrey Popov)
  - `svc-masonry.jpg` (1500 × 1000)
  - `svc-handyman.jpg` (500 × 300 — low res, only for thumbnail use)
  - `svc-renovation.jpg` (1000 × 660)
  - `svc-painting.jpg` (838 × 628)
  - `svc-roofing.jpg` (600 × 594)
- `hero-residential.jpg` (2560 × 1709) — the live homepage hero, exterior residential
- **Quality scoring (huashu 5-10-2-8 rule)**: of the 8 service tiles, scoring against (resolution / copyright clarity / brand-mood fit / visual consistency / standalone narrative):
  - 8.5/10: hvac, masonry, renovation, hero-residential — solid resolution, on-mood
  - 7/10: plumbing, electrical (third-party copyright in EXIF — usable as illustration but not as portfolio)
  - 6/10: painting, roofing — generic stock, narrow framing
  - 4/10: handyman — only 500 × 300, do NOT use above thumbnail size
- **Honest framing rule**: in `sections.html` and demo pages these tiles are labelled **"Service categories"** or **"What we do"**, not **"Recent work"** or **"Project portfolio"**. When sprinkled to a real client, swap for real on-site photography or replace with the typographic-only hero pattern (see Patterns §5 below).

---

## 🎨 Color tokens (extracted, frequency-counted)

Frequency table from the live `chunks/71dd4e75....css` via `grep -oE '#[0-9a-fA-F]{6}'` plus the SVG-extracted brand colors. Tailwind utility classes (`#fef2f2`, `#f3f4f6`, `#e5e7eb`, etc.) are the framework defaults and excluded from the brand palette. The brand-specific values are:

| Hex | Source / Role |
|---|---|
| `#ED5521` | **THE Horizon Fix orange** — extracted from the logo `<path fill="…">` for the "FIX" wordmark. Primary CTAs, links, accents. |
| `#FC9732` | **Sun-ray orange** — flat fill on all 16 rays of the logo mark. Secondary accent, hover states. |
| `#FF6700` | Pure brand orange — the live CSS uses `#f60` shorthand 3× as a button highlight. Same hue family as the sun-mid. |
| `#EF4136` | Sun gradient stop 1 (top of disc — red-orange) |
| `#F15A29` | Sun gradient stop 2 |
| `#F79034` | Sun gradient stop 3 |
| `#FBB03B` | Sun gradient stop 4 (mid — gold) |
| `#FBAE39` | Sun gradient stop 5 |
| `#FAA732` | Sun gradient stop 6 |
| `#F89C27` | Sun gradient stop 7 |
| `#F7931E` | Sun gradient stop 8 (bottom of disc — amber) |
| `#1e293b` | Slate (5 occ. in live CSS) — secondary heading ink + footer ground |
| `#811d1d` | Deep red — emergency / warning state only |
| `#f2f2f2` | Soft gray surface (5 occ.) — section backgrounds |

→ canonical token mapping (see `_shared.css`):

```
--brand            #ED5521   /* the FIX orange */
--brand-deep       #B8401A   /* derived darken — hover */
--brand-soft       #F7841E   /* derived lighten — sun-mid family */
--ray              #FC9732   /* logo ray flat fill */
--sun-top          #EF4136   /* gradient stop 1 — top */
--sun-mid          #FBB03B   /* gradient stop 4 — mid */
--sun-bot          #F7931E   /* gradient stop 8 — bottom */
--ink-deep         #0f172a   /* deepest slate */
--ink              #1e293b   /* slate-800 — primary heading */
--ink-soft         #475569   /* slate-600 — body */
--ink-quiet        #64748b   /* slate-500 — meta */
--bg               #ffffff
--bg-soft          #f8fafc
--bg-warm          #fef9f4   /* derived warm cream — paired with sun */
--bg-slate         #0f172a   /* footer ground */
--surface-gray     #f2f2f2   /* live --color value */
--alert            #811d1d
```

**Signature gradient** (use as hero scrim, sun-disc fill, button-hover sweep):
```css
--grad-sunrise: linear-gradient(180deg,
  #EF4136 0%, #F15A29 28%, #F79034 48%,
  #FBB03B 63%, #FBAE39 84%, #FAA732 92%,
  #F89C27 97%, #F7931E 100%);
```

---

## ✏️ Typography

Live site loads **only system fonts** — `font-sans` resolves to `ui-sans-serif, system-ui, sans-serif, ...`. That's a deliberate Tailwind default, not a brand choice. We need to **promote the brand to a real type system** the way the other design systems do, picking free Google substitutes that match the optimistic-trades register.

→ token mapping:

- `--font-display` → **Manrope** (700 / 800) — geometric humanist sans, slightly warmer than Inter, very legible at headline sizes. Free on Google Fonts.
- `--font-body` → **Inter** (400 / 500 / 600) — system-friendly fallback that pairs cleanly with Manrope.
- `--font-mono` → `ui-monospace, SFMono-Regular, Menlo, Consolas, monospace` (live CSS default)

Type-scale (matches Tailwind text scale already used by the live site, mapped to fluid clamp):

```
--font-display     "Manrope", "Inter", system-ui, sans-serif
--font-body        "Inter", system-ui, sans-serif

--text-h1          clamp(2.5rem, 5vw + 1rem, 4.5rem)    /* hero display */
--text-h2          clamp(1.875rem, 2.5vw + 1rem, 3rem)  /* section title */
--text-h3          1.5rem
--text-h4          1.25rem
--text-body-lg     1.125rem
--text-body        1rem
--text-meta        0.875rem
--text-eyebrow     0.6875rem  /* uppercase letter-spaced */
```

The defining typographic moves:
- **Display weight 800** for hero headlines (Manrope ExtraBold) — confident, multi-trade-capable register
- **Letter-spacing -0.02em** on display sizes — tightens ExtraBold without crushing
- **Eyebrow `0.16em` letter-spacing, uppercase, 11px, weight 700** — the sun-line above each section title
- **Body line-height 1.65** — generous, non-aggressive (matches "no job too small" approachability)

---

## 🏗️ Site-specific patterns

These are the signature stylistic moves that should be baked into `_shared.css` from the start. They're how Horizon Fix becomes **recognizable across a 12-page sprinkle**, not generic Tailwind defaults.

### 1. The Sunrise Bar — 4px sun-gradient line as section opener
A 4-pixel-tall bar with the canonical sun gradient (`--grad-sunrise`) sits above every major section title, full-bleed left of the eyebrow. Reads as a literal horizon line. Replaces the generic "left-color border accent" anti-pattern.

### 2. Two-color wordmark behavior — `HORIZON` ink + `FIX` brand orange
Anywhere the brand name is set in body copy, the second word (`FIX`) gets `color: var(--brand)` while `HORIZON` stays in ink. Treats the wordmark as a typographic pattern, not just an image swap.

### 3. The 8px / 12px chamfer system — modest rounding
Live CSS uses `border-radius: var(--radius-md)` (6px) and `var(--radius-lg)` (8px). We bump slightly: cards get **8px** (calmer), CTAs get **12px** (friendlier), pills/badges get **999px** (full). Never zero. The live `border-radius: 0` instances are reset utilities, not brand intent.

### 4. The Service Stack — 3×3 grid on services pages, 2×4 on homepage tease
Nine service lines is the brand's defining content. Layout treats them as a **single block of nine equal tiles** (3×3) on the dedicated services page, OR a **2×4 + "see all 9" CTA** on the homepage. Each tile = icon + title + 12-word descriptor + tile photo. No tile gets bigger than another.

### 5. Sunrise-Scrim Hero — full-bleed photo with bottom-anchored sun gradient overlay
Hero pattern: full-bleed residential exterior photo, multiplied with `linear-gradient(180deg, transparent 40%, rgba(15,23,42,0.85) 100%)` for legibility, PLUS a 6px sun-gradient bar pinned to the bottom of the hero block (becomes the visual horizon line between the photo and the next section). Headline sits white on the lower scrim.

### 6. The 24/7 emergency strip — slim sticky-top bar
A 36px bar above the main nav, slate ground (`--bg-slate`), with `📞 24/7 emergency: 978 893 7728` and dispatch CTA. Sticky. Brand voice convention: every page acknowledges the always-on promise without burying it in a footer.

### 7. Trust strip — license + insurance + service-area chip row
Below the hero on the homepage and above the footer on every page: 4-chip row reading *"Licensed electricians" · "Insured" · "South Shore MA · Quincy → Plymouth" · "24/7 dispatch"*. Each chip = small icon + 4-word claim. No badges that lie (the live site's "0+ projects" placeholders get DROPPED in the sprinkle — only show counts when real).

### 8. Sun-disc accent at section start — small radial mark before H2
Some H2s (1 per page max) get a 24px sun-disc icon (the logo's mark, alone) preceding the eyebrow — a quiet brand signature. Used sparingly: hero, mission, CTA-block.

### 9. Block transitions — alternating `--bg` / `--bg-soft` / `--bg-warm`
Long pages stack sections in a 3-tone rotation (white → cool gray → warm cream) instead of monotone white. The warm-cream `--bg-warm` is reserved for sections that connect to the sun motif (mission, why-us, testimonials).

### 10. Button: sunrise-fill on hover
Primary CTA = solid `--brand` orange ground, white text, 12px radius. Hover: background animates to `--grad-sunrise` (180deg) with a 280ms ease — the button literally becomes a small sunrise. Borrowed from the CentiMark "right-to-left navy fill" hover convention but reframed for Horizon Fix.

---

## 🚫 Forbidden / off-brand

- ❌ No purple gradients (default huashu anti-slop rule applies — but worth restating because Tailwind's `from-blue-500 to-purple-600` is the temptation here).
- ❌ No replacing the sun-gradient with a single flat orange — the gradient IS the brand.
- ❌ No CSS-silhouette substitutes for the logo (the SVG is on hand, use it as `<img>`).
- ❌ No emoji-as-icon. Service tiles use SVG line icons (Lucide style) or Phosphor.
- ❌ No "0+ years" or "0+ projects" placeholder counters — drop those entirely until real numbers exist.
- ❌ No carousel sliders for service tiles. The 9 services are equal and stacked.
- ❌ No "as featured in" press logos until real ones exist.
- ❌ No mascot / cartoon characters (this is the Goettl differentiator — Horizon Fix is mascot-free).

---

## ✅ Vibe / mood keywords (5)

**Optimistic · sunrise · multi-trade · approachable · capable**

If a design choice doesn't land in 3+ of those buckets, it's drifting off-brand.

---

## 🪞 Position in the design-systems library

Slots into the **Commercial / services** group. Differentiated against the existing trades systems:

| System | Anchor | Horizon Fix differs by |
|---|---|---|
| `goettl` | Patriot trades — mascot-led HVAC | Multi-trade not single-trade; warm-sun not flag-and-mascot |
| `master-craftsmen` | Windows / doors lead-gen, dealer marks | Generalist not specialist; no Marvin-style dealer trust marks |
| `mc` | Desert-modern editorial residential premium | Optimistic-friendly not editorial-cool; bright not muted |
| `centimark` | Commercial roofing B2B dual-blue | Residential not commercial; warm-orange not corporate-blue |

Best fit for: **handyman + multi-trade home services brands**, generalist contractors, "one phone for the whole house" propositions, regional family-owned trades shops with 5-9 service lines, sunrise/horizon visual identities, optimistic-and-capable register.