Creative North Star: "The Trusted Estimator"
The site looks bold — heavy Anton poster type, strong orange, big confident headings on warm paper — but the boldness has a job: to make a skeptical homeowner believe this is a real, capable, local operator worth trusting. Volume is never the point; credibility is. A good estimator is confident because they know the work, and this design should feel the same way: loud where it builds confidence, plain and honest everywhere a homeowner is deciding or paying.
The personality is hardworking and regional — sleeves-rolled-up, proud of the county it serves. Warmth comes from the paper background and the terracotta-leaning orange, not from softness; the structure underneath is firm navy and tight condensed type. It is built mobile-first, because most visitors arrive on a phone from a search or an ad, and it must convert them to a quote or a call without friction.
It explicitly rejects the corporate / franchise portal look (no faceless national-chain chrome), cheap / gimmicky cues (no coupon clutter, neon, or fake urgency), cluttered pages, and the generic AI-template aesthetic (identical icon-card grids, an eyebrow above every section, the hero-metric cliché).
Key Characteristics:
A warm, grounded palette: terracotta-leaning orange for energy and action, deep navy for structure, over a warm paper background that keeps the whole thing approachable rather than corporate.
#EA7A2B): The brand's energy and the primary action color.
Buttons, key links, accents, active states, focus glow. The single loudest voice.#C55E14): Hover/pressed state for orange actions; also
deep-orange gradient ends on decorative photo tiles.#F8E9DB): A pale orange tint for subtle highlight backgrounds
and callouts where a full orange would shout.#1E2A4A): The authority color. Dark sections, headings on
paper, the .btn.navy variant, footer, and structural UI. Carries seriousness.#141C33): Navy hover state and the darkest section/photo grounds.#2C3A62): A lifted navy for layering within dark sections.#F5F1EA): The warm off-white page background. An established brand
color — preserve it. Its warmth is the brand's approachability.#EDE7DC): A half-step-darker paper for alternating section bands
and inset surfaces.#0E1426): Primary body and heading text on paper.#6B7184): Secondary text, captions, meta. Verify it clears
4.5:1 on paper for any body-size use; darken toward ink if it's close.rgba(30,42,74,0.14)): Hairline borders and dividers — a translucent
navy so edges belong to the brand rather than reading as flat gray.The Bold-for-Trust Rule. Every loud move — a 280px headline, a full-orange band — must make the business read as more credible, not just louder. If a bold element only adds noise, tone it down.
The Three-Ground Rule. Surfaces are one of three grounds: paper (default, warm), navy (authority/contrast sections), or orange (energy/CTA moments). Text and component colors are chosen per ground; don't drop a paper-ground component onto a navy band unchanged.
Display Font: Anton (with sans-serif fallback) Heading Font: Barlow Condensed (500–800) Body Font: Inter (with system-ui fallback) Label Font: Barlow Condensed (uppercase, tracked)
Character: A three-tier contrast system. Anton is the billboard — a single heavy weight, all-caps, for the loudest headlines and section titles. Barlow Condensed is the workhorse for sub-headings, buttons, and labels: condensed, confident, space-efficient. Inter is the calm humanist voice for everything a homeowner actually reads — body copy, descriptions, FAQ answers. The contrast between Anton's weight and Inter's calm is the brand's voice: bold claim, honest explanation.
clamp(44px, 7vw, 84px), line-height ~0.95): major
section headlines.clamp(28px, 5vw, 46px)): sub-section titles.letter-spacing: 0.12em,
UPPERCASE): buttons, eyebrows, tags, meta labels.The Three-Voice Rule. Anton claims, Barlow Condensed directs, Inter explains. Don't set body copy in a condensed face, and don't set running prose in Anton.
The Anton-Caps Rule. Anton is display-only and effectively all-caps. Never use it for body, buttons, or anything a user must read in quantity.
A mostly flat, grounded system. Depth comes from the three color grounds and hairline borders, not from stacked shadows. Where shadow appears it is a soft, wide, navy-tinted lift (long offset, generous blur, negative spread) — the look of a card resting on paper, never a hard drop shadow. Focus is signalled with an orange ring rather than elevation.
box-shadow: 0 2px 10px rgba(20,28,51,.08)): the only
persistent, always-on shadow — separates the sticky nav from content.box-shadow: 0 24px 48px -28px rgba(20,28,51,.25) /
0 20px 40px -24px rgba(20,28,51,.25)): soft, far-thrown lift for raised cards
(side cards, featured panels). Wide blur, negative spread, navy-tinted.box-shadow: 0 0 0 4px rgba(234,122,43,.3); pulse variant
0 0 0 14px rgba(234,122,43,.15)): orange glow for focus and attention pulses.The Navy-Tinted Shadow Rule. Shadows use rgba(20,28,51,...), never pure
black. Depth belongs to the brand.
The Flat-Ground Rule. Sections are flat color grounds. Reserve the card lift for genuinely floating elements; don't shadow every box.
{rounded.sm}), padding 14px 24px.letter-spacing: 0.12em, 14px.#EA7A2B fill, white text → hover Work Orange Dark
#C55E14. The default call to action ("Get a Quote", "Call Now")..btn.navy): Navy fill, white text → hover Navy Deep. Secondary
authority action..btn.ghost): Transparent with a translucent white 1.5px border, for
use on navy/photo grounds → hover faint white wash..btn.ghost-dark): Transparent, navy text, hairline --line
border, for use on paper grounds.background-color .15s ease, transform .15s ease. Provide a
visible orange focus ring (0 0 0 4px rgba(234,122,43,.3)) for keyboard users.--line bottom border,
the persistent sticky-nav lift shadow. Logo left, links + phone + primary CTA..btn.{rounded.md}) for most cards; 10px for larger panels.--line where definition is needed..photo placeholder tiles render a diagonal repeating-stripe gradient in three
grounds (.photo navy-blue, .photo.dark deep navy, .photo.orange orange),
with Barlow Condensed caps labels. Real imagery swaps in via a --bg custom
property on .photo--img. This stripe-tile motif is a recognizable brand texture.#6B7184 on paper, and white
text on Work Orange #EA7A2B (it's a mid-tone — check large vs body sizes).