The implementation blueprint, realized from the brand token spec: midnight navy, royal & deep purple, clean-water blue on neutral off-white — condensed Oswald display over Inter body.
Spec only. No changes to theme.ts, pages or components yet. v4.1 correction: neutral grays (not purple-biased), Oswald display (not Anton), Inter body (not Mulish), saturated #3F158A purple. Values marked ⚠ need Viven before live.
One complete solution for softer, cleaner, better-tasting water.
From $50/mo* · 0% interest for qualified buyers⚠
↑ Target home hero — roofing-style layout, brand skin. Background = full-bleed lifestyle photo (rec: family at the kitchen sink) under a navy→purple overlay. Accent line is clean-water blue (purple can't hit contrast on a dark ground and this mirrors the reference); purple stays dominant on the light sections, feature bar and price band. No fabricated star-rating (VM-14).
Canonical tokens, pixel-measured from the brand. Navy carries the darkest surfaces and ink; the purple ramp does brand, CTA and feature bars; water blue is a selective accent. Neutrals are true grays.
CTA · buttons · pills
Hero & price band
Droplet · accent line · highlights
Oswald — condensed, heavy, uppercase — for every display and heading role (500/600/700). Inter for body. A wide geometric face (Montserrat) for the wordmark. The signature move: display text locked to a very tight line-height so stacked words read as one graphic object.
Fonts href → Oswald:500,600,700 · Inter:400,600 · Montserrat:500,600. Board embeds Oswald + Inter (self-contained); wordmark shows a geometric fallback until Montserrat is wired.
Every text pair computed with the WCAG relative-luminance formula. AA = ≥4.5:1 · AA-lg = ≥3:1 (large ≥24px / graphic). The deep purple gives huge headroom; water blue is the only accent held to display/graphic use.
| Foreground | Background | Ratio | Rating | Usage |
|---|---|---|---|---|
| White | Navy #050F28 | 19.0 | AA | Hero · dark panels |
| White | Navy 950 | 19.3 | AA | Footer · darkest CTA |
| White | Purple dark | 16.7 | AA | Feature bar |
| White | Purple #3F158A | 12.5 | AA | Buttons · CTA (gradient ≥10.4) |
| Purple #3F158A | White | 12.5 | AA | Labels · eyebrows · accents |
| Body ink | White | 17.8 | AA | Body text |
| Muted gray | White | 6.9 | AA | Body sub-copy |
| Water bright | Navy | 9.6 | AA | Hero accent line · icons on dark |
| Red | White | 5.0 | AA | Alert semantic |
| Water #008EE3 | White | 3.5 | AA-lg | Droplet / highlights — large / graphic only |
Water #008EE3 is the only pair below 4.5 on white — used as a graphic/large accent only, never small body text. For water-colored small text on white, drop to #006BB8 (5.5:1).
The 67 live tokens in theme.ts re-skin to the canonical brand values (safe — the theme is offer-scoped). New Velen-only components add the tokens in the second table.
| Token | Old (v3 live) | New (brand spec) | Role | |
|---|---|---|---|---|
| --offer-primary · --offer-dark-bg | #131536 | → | #050F28 | Navy structure / dark bands |
| --offer-text · --edina-ink | #000E2E | → | #111319 | Body / headline ink |
| --offer-dark-deep-to | #0B0F2A | → | #040E28 | Deepest band (footer/price) |
| --offer-accent · --offer-cta-from · --offer-highlight · --offer-heading-accent · --edina-herb | #5A44C4 | → | #3F158A | Primary purple · CTA · labels |
| --offer-cta-to · --offer-pill-gradient-to | #4A38A6 | → | #1F0A5D | CTA gradient dark end |
| --offer-pill-gradient-from | #5A44C4 | → | #4F2398 | Pill gradient light end |
| --offer-dark-gradient-to · --offer-wt-ink-panel | #22214D | → | #071633 | Lifted navy panel |
| --offer-price-highlight | #DA1E28 | → | #3F158A | ⚠ red→purple (brand price color) |
| --offer-text-muted · --offer-wt-disclaimer | #45505F | → | #565A66 | Muted body (neutral) |
| --offer-bg · --edina-cream | #FFFFFF | → | #FFFFFF | Card / content ground |
| --offer-wt-paper-2 · --edina-cream-2 | #F2F3F5 | → | #F8F8F8 | Surface (neutral, was purple-biased) |
| --offer-border · --offer-wt-line · --edina-line | #E3E4E8 | → | #D9DBE2 | Hairline (neutral) |
| --offer-wt-aqua · --edina-clarity-bright | #3B82E6 | → | #008EE3 | Water accent (large/graphic) |
| --offer-wt-aqua-bright | #599DF8 | → | #45C4FF | Water accent on dark |
| --edina-radius | 8px | → | 10px | Card corner |
| --offer-heading-font | Manrope | → | Oswald | Display + headings |
| --offer-body-font | Open Sans | → | Inter | Body |
| --offer-success · --offer-wt-alert · --edina-rust | — | → | unchanged | Functional semantics kept |
Remaining --offer-wt-* / --edina-* follow the same ramp: ink→#050F28, panels→#071633, on-ink-muted→#AEB4C4. Applied verbatim at build.
| New token | Value | Role |
|---|---|---|
| --offer-display-font | 'Oswald','Arial Narrow',sans-serif | Hero / price display |
| --offer-brand-font | 'Montserrat',… | Wordmark (geometric, wide-tracked) |
| --offer-hero-grad | navy→purple (100deg) | Hero photo overlay |
| --offer-hero-accent | #45C4FF | Hero accent line on dark |
| --offer-band | #1F0A5D | Feature / trust bar band |
| --offer-glass-bg | rgba(4,14,40,.62) | Glass lead-form card |
| --offer-glass-border | rgba(174,180,196,.22) | Glass hairline |
Real copy from Viven's brief (VM-IDs noted). Each ships as a new velen-* component so the shared edina-* components (live Edina site) are never restyled.
Top trust bar · VM-08 → velen-trust-bar.astro on --offer-band (#1F0A5D)
⚠ Lender, term & “$50/mo” basis pending Viven.
Our systems are professionally assembled in the USA using premium, NSF-certified components from trusted manufacturers — engineered for quality, reliability and long-term performance, not low-cost generic parts.
High-quality water treatment at a fair, transparent price — the full, itemized price is confirmed before any work is scheduled.
Pricing band · VM-01/07 · navy→purple gradient + Oswald price. Comparison softened to value framing, not “cheapest.”
New service pages: Houston · Galveston — plus the 20-city area-served list already in config.
Rotate across nav / hero / sections / closer — no single label >~40% of buttons.