Design System · v1
The visual language.
Live reference. Every swatch, type specimen, and component on this page pulls from the same Tailwind tokens the rest of the site uses — when a token changes, this page reflects it.
Written reference: DESIGN_SYSTEM.md
01 / Color
Brand, surfaces, and text.
Forest is the only chromatic accent. Everything else is warm off-white surfaces and the stock Tailwind slate scale. Restraint is the brand.
Forest scale — brand
Tinted hover bg
Subtle accent fill
Muted illustration
Medium accent / dark
CTA hover (light)
Primary accent, CTAs
Pressed state
Dark surface
Surfaces
Page background
Alternating section bg
Text — slate
Body, headlines on light
Secondary body, specs values
Tertiary body
Caption, eyebrow on light
Breadcrumb dim
Product gelcoat — source of truth in components/ColorSwatch.tsx
Forest Green
Almond
Granite
02 / Typography
Inter for UI. Fraunces for everything that matters.
Fraunces (variable serif, optical sizing on) does every major headline. Inter handles body, captions, form fields, and any time information density matters more than presence.
Built to Last.
font-display text-[clamp(2.75rem,7vw,6rem)] tracking-tightestThe catalog.
font-display text-5xl lg:text-7xl tracking-tightestSection headline.
font-display text-4xl lg:text-5xl tracking-tightestCard or row title.
font-display text-2xl tracking-tightestBody copy uses Inter and stays inside a comfortable measure — cap paragraphs at max-w-xl or max-w-2xl, never edge to edge.
text-base lg:text-lg leading-relaxed text-slate-700Section kicker · 11px / 600 / 0.18em
.eyebrow + text-forest-700Utility label / specs heading
.eyebrow + text-slate-50003 / CTAs
Three variants. Always paired with a phone link.
Buyers in the trades expect a phone number next to every form. Every primary CTA in the site is followed by a low-weight tel/email link in the same block.
Primary on light
bg-forest-700 text-paperPrimary on dark
bg-paper text-forest-900Secondary outline (dark)
border-paper/40 text-paperInline link
text-forest-700 → forest-90004 / Form
No boxes. Just a bottom border.
The quote form intentionally has no card chrome — the page itself is the container. Fields use a single hairline underneath that turns forest on focus.
Chip radio — product line
Color swatch picker
05 / Patterns
Numbered section row.
The repeated pattern in the homepage value props and the quote sidebar. Numbered eyebrow, two-column grid, hairline divider above. Use it for any list that should read as deliberate, not as a bullet list.
Engineered, not stamped.
Every enclosure begins as a layered fiberglass laminate finished with a 20-mil pigmented gelcoat — the same construction spec used in marine and infrastructure work.
Insulation that survives the winter.
Closed-cell urethane foam and R-8 lined interiors keep wellheads and backflow assemblies above freezing through Carolina ice storms and Plains cold snaps alike.
A partner to the trade.
We work directly with homeowners, contractors, municipalities, and regional distributors. Volume pricing, palletized freight, and direct manufacturer support.
06 / Components
Product card.
4:5 image, numbered eyebrow overlay, font-display title, circular arrow indicator that fills forest on hover. Always wrap the entire card in a Link — the whole card is the affordance, not just the arrow.
01 / Well Covers
Insulated Fiberglass Well Covers
Urethane-foam insulated shells engineered to protect wellheads from freeze damage and field abuse.
02 / Rock Covers
Decorative Rock Covers
Hand-finished fiberglass formations that disappear into a landscape while shielding utilities below.
03 / Backflows
Backflow Preventer Enclosures
20-mil gelcoat, UV inhibitors, and R-8 insulation — built for code compliance and a long service life.
07 / Dividers
One divider. Used everywhere.
.hairline (rgba(15, 23, 42, 0.08)) is the canonical line. Apply it as a class modifier on any element with a border-* or divide-* class. Never use Tailwind's default border-slate-200.
border-t hairline
Heading sitting on a hairline
border-b hairline pb-6
- MaterialSample spec value
- FinishSample spec value
- InsulationSample spec value
divide-y divide-slate-900/10 + border-t hairline
08 / Dark surface
Forest-900 with text-paper.
The dark CTA band and footer share this surface. Body text becomestext-paper/80; eyebrows drop totext-paper/60; dividers use the same hairline opacity but inverted —border-paper/10.
Headlines on dark
Body on dark
Eyebrow on dark
Dividers on dark
Live composition reference — this band is the same template used by the homepage CTA and the footer.
Back to the site