Established 2026-05-14 · last edit 2026-05-18 (brand guide full update)

Brand & Style Guide

The source of truth for everything Electrum Home says, shows, and ships. Use this before writing copy, building a page, or evaluating a pull request. Part 1 covers voice and copy. Part 2 covers the visual system.

How to use this doc

Writing copy? Start at V1 Positioning, then check the vocabulary list (V5) and the page playbooks (V6). Building UI? Skip to Part 2 — Visual System.

Part 1

Brand & Voice

Positioning Statement

Electrum Home is the place homeowners go to find out what a project should actually cost — and then get it done by a real, licensed, insured pro without the hassle. We replace the contractor shopping grind with a clear, itemized price and a platform that holds scope and payment end to end. We are built by Electrum, the team behind 40,000+ installed projects, 100,000+ homeowners served, and $1B+ in projects quoted since 2013.

What we are positioned against

Not contractors. The hassle of hiring one. Getting three contractors to your house on three different days. Comparing three bids that aren't apples-to-apples. Not knowing if the number you're looking at is fair. The follow-up calls. The price that changes after the visit. The contractor pricing runaround is part of it — but the real problem we solve is decision fatigue. The homeowner doesn't want to become a part-time procurement officer for their own house.

The promise we keep

●A real price — itemized, locked to the agreed scope at booking, honored by a real pro.
●A real pro — licensed, insured, local, accountable. We pay them; you don't haggle them.
●Done right — one platform from estimate to install, backed by your pro's workmanship warranty plus an optional Electrum Home protection plan.

Internal · Where we're heading

The Amazon of home services.

The destination isn't "a better contractor experience." It's a trusted single source for home services and projects — the way Amazon is the trusted single source for e-commerce. Amazon isn't always the cheapest, but it's fair enough, fast enough, and reliable enough that you stop shopping. That's the trust we're building: customers come to Electrum Home for lawn care, HVAC, a roof, anything — because they know the price is fair and the work will be done right. They never have to play the bid game again.

That trust takes years to build — but every word on every page should be moving toward it, not away from it.

The locked-price nuance (internal)

"Locked" means the price doesn't move against the agreed scope. If the customer adds work, that's a legitimate change order. If the pro discovers something that was genuinely misrepresented at intake (rotted subfloor, undisclosed asbestos), that's a re-scope. We don't lead with this — "locked" is the customer-facing word — but contract, SOW, change-order, and support copy must reflect this reality without breaking the brand promise. The rule of thumb: we never change the price for a reason the customer didn't cause.

The warranty reality (internal)

Workmanship warranty is vertical-dependent and comes from the installer (HVAC: typically 1–3 years; roofing: 5–25 years; lawn care: none). At ~5% platform margin we cannot underwrite warranty risk inside the base price. The honest mechanism is the optional Electrum Home Protection Plan — a paid add-on offered at booking. It must ship at launch, not as roadmap. See memory/launch-readiness-plan.md item 1.6.

Voice Attributes

Our voice is confident utility. We are warm in success states and microcopy, but never cheeky around pricing. Cost is a serious moment for homeowners — we treat it that way. Imagine a friend who happens to be a contractor: they don't flirt with you, they don't talk down to you, they tell you what it costs and what to ask for.

Honest

We say the actual number, including the parts that are uncomfortable (permit fees, regional cost differences, when a project is more complex than the customer expected).

More like this

"In your zip code, a 3-ton heat pump runs $8,400–$9,800 installed. Here's the breakdown."

Less like this

"Prices may vary depending on your unique home."

Plainspoken

Short words, short sentences, no jargon unless we define it. We write the way a homeowner talks, not the way a contractor estimates.

More like this

"Your old A/C is gone. The new one's in. We cleaned up."

Less like this

"Decommissioning of legacy HVAC infrastructure has been completed in accordance with municipal disposal requirements."

Confident

We don't hedge or apologize for the price. We name what we know. When we don't know, we say so plainly and tell you what would change it.

More like this

"This is what it costs. Locked the moment you book."

Less like this

"This is just an estimate and the final price could be higher or lower."

Calm

Home projects are stressful. Our voice is the part of the experience that lowers the heart rate, not raises it. No urgency theater, no scarcity tactics, no exclamation points outside of genuine confirmation.

More like this

"You're booked. We'll be in touch within one business day."

Less like this

"🎉 Awesome!! Your project is booked!! Get ready!!"

Specific

We always favor the concrete number, brand, or detail over the abstract claim. Not "a great installer" — "Mike, electrical license #28471, 14 years in the trade."

More like this

"Carrier 3-ton A/C. 10-year parts warranty. Installed in one day."

Less like this

"High-quality equipment from a trusted brand."

The tone dial

Warmth allowed in: confirmation screens, success states, support replies, error messages that need to feel human. Warmth not allowed in: pricing pages, contracts, scope of work, anything financial. Tone gets more serious as money gets involved, not less.

Who We Write For

Primary persona · long-term TAM

The cautious shopper

The homeowner who's about to spend real money and is anxious about being taken advantage of. Suburban, 35–65, financially comfortable but not careless. Has dealt with at least one contractor and probably has a story. Wants to feel smart about the decision they're about to make. Reads the line items. Asks their spouse. Comes back twice before they book.

This is the largest, broadest market we can win — and the hardest. Default to writing for this persona because clearer copy serves them and serves the convenience buyer below.

Early wedge · launch-phase target

The convenience buyer

Financially comfortable, time-poor, less price-sensitive on the margin. Already trusts brands they trust (Amazon, Apple, premium services) and would rather pay a fair price than spend a Saturday getting three bids. Won't grind us on edge cases. Gives us room to iron out v1 of the platform.

These are the customers who'll come first. They're less likely to bail when something feels rough at launch. They value getting it done over getting it perfect. The brand can earn the cautious shopper's trust later — but it needs the convenience buyer to seed real project history first.

Copy doesn't need to call them out by name — clean, confident, "we handle it" framing serves them inherently.

Who we're notwriting for: contractors, DIY enthusiasts, energy nerds, or first-time visitors looking to be entertained. We're a utility, not a hangout.

What they want, in order

To know what a fair price actually is — before they call anyone.
To not feel stupid about the question they're asking.
To not have to take three days off work for three estimates.
To have someone accountable for scope and payment if it goes wrong — Electrum stands behind the platform and the payment, and the pro stands behind the work. (Financial recourse mechanics are a separate, internal conversation.)
To get back to their life. They're not collecting hobby information about HVAC.

What they fear

●Getting ripped off by a contractor who knows they don't know the going rate.
●The price changing after a tech "sees the job."
●A shoddy installer leaving a mess they have to chase down.
●Being sold something they didn't need (oversized equipment, "upgraded" everything).

The supply-side voice (for /installer, /for-pros)

On installer-facing pages our audience flips: now we're writing to a small-business contractor. The voice gets more direct, less reassuring. Numbers up front (jobs available, average ticket, payment terms). No homeowner-comfort language. Plain, transactional, respectful of their time. The rest of this guide is for consumer pages unless otherwise noted.

Core Message Hierarchy

Every customer-facing page should land these three messages, in this priority order. If a page can't check at least the first two, it's not ready.

Real pricing

We tell you what it actually costs — itemized, specific to your house, with the price locked the moment you book.

Proof points: Itemized line items shown before contact info is collected. "Price locked" green badge. Best price guarantee. Pricing page (/pricing) explains how the number is built.

Anchor copy: "Real pricing. No surprises." / "A real price. A real pro. Done right."

A real, licensed, insured pro

Not a marketplace of strangers — a vetted, licensed and insured local pro. We verify them. We route the payment. You don't haggle.

Proof points: License + insurance verified for every pro, every vertical (including lawn care, pool, cleaning — no exceptions). "Licensed pros in 50 states." Workmanship warranty per vertical, plus an optional Electrum Home Protection Plan. Single point of contact (us).

Anchor copy: "Licensed and insured pros in 50 states" · "We handle them. You don't."

One platform, start to finish

Pricing, booking, payment, and dispute resolution all live in one place. You never get bounced — your pro will be your pro, same name, same number, from the price you see to the day the work is done.

Proof points: Dashboard with single project view. Same messaging in one place from estimate to done. Direct contact between customer and pro is fine — that's a feature, not a bug. Built on Electrum's 12-year home electrification platform.

Anchor copy: "One platform, one place, from price to done."

What we do not promise

✗Background checks (we don't actually run them at our speed)
✗Star ratings, review counts, or any side-by-side pro comparison — anywhere, ever. We're not a marketplace, and we never simulate one.
✗Same-day install across all verticals (true for some, not all)
✗Federal tax credits — IRA clean energy credits have expired and must never be referenced as current. (State and utility rebates are fair game when verified for that customer's state.)
✗"Lowest price on the internet" — say "best price guarantee" instead
✗"We own the outcome" — or any phrasing that puts workmanship/quality-of-work liability on Electrum Home. The installer owns the work and the workmanship warranty. We own the price, the pro selection, and the accountability process (a real human to call, standards we enforce, intervention when things go sideways). At ~5% margin we cannot underwrite outcomes, and the optional Electrum Home Protection Plan is the honest mechanism for warranty/outcome coverage. See guardrail box below.

Hard guardrail · ownership claims

Be precise about what we "own." The voice has drifted to "we own the outcome / all of it" in the past — that's an overstep given the model and a real compliance/liability risk.

What we own ✅

• The price — we set it, it's itemized, it's locked at booking against the agreed scope.
• The pro selection — we vet, we verify license + insurance, we dispatch.
• The accountability process — one platform, scope and payment governed end to end, standards we enforce, we intervene on disputes.
• The relationship — the homeowner looks to us for scope, price, and payment; the pro owns the work and the workmanship warranty.

What we do NOT own ❌

• The workmanship — that's the installer's warranty.
• The outcome of the install — we facilitate; the pro executes.
• Long-tail product/equipment warranty — manufacturer + (optional) Electrum Home Protection Plan covers this.

Say this

"Fair price, vetted pro, accountable process."
"One platform, accountable for scope and payment end to end."
"A real person to call if anything's off."
"We set the price. We vet the pro. The work is backed by your installer's warranty — and our optional protection plan."

Not this

"We own the price, the pro, and the outcome — all of it."
"One team owns the outcome."
"We guarantee the work."
"We're responsible for the install."

Compliance note: in many states "we set the price" combined with claims of owning the work can have contracting-law implications, since the licensed pro is technically the contracting party. Default to the "fair price, vetted pro, accountable process" framing unless legal has signed off on stronger ownership language for a specific surface.

Hard guardrail · platform role — promises we can keep

Electrum is a platform-mediated service, not a concierge or call center. At 5% margin we cannot promise to field every homeowner inquiry. Be precise about what the platform actually does.

❌ Don't say

"One team to call" / "one point of contact: us" for day-to-day communication
"We handle everything"
"You come to us, we handle the rest"
Anything implying Electrum is in the middle of every homeowner↔pro exchange

✅ Do say

Electrum holds the scope and the money
Any scope or price change comes back through the platform
Your pro coordinates directly for scheduling and day-of logistics
Electrum steps in for scope disputes and payment — not general inquiries
The platform is the protection layer

Routine homeowner ↔ pro communication (scheduling, day-of coordination) is direct. Electrum's role is financial and scope governance: money flows through us, price/scope changes must be approved through us, and disputes route through the platform. This is the honest, defensible promise.

How we build trust at launch (internal)

At launch we don't have Electrum-Home-specific install counts per pro, customer testimonials per pro, or in-platform review data. We're not going to fabricate those, and we're not going to import third-party star ratings. Trust transfers from Electrum the parent brand, not from individual pros. Customers trust us(40K+ projects installed, 100K+ homeowners served, since 2013, parent company on a public site). We trust the pro (vetting, licensing, insurance verification — done in the background, not surfaced as a shopping feature). On the assigned-pro screen the customer sees: name, photo, company, "Licensed & insured," years in trade. That's the launch trust stack. The Amazon model: you don't pick a pro; we assign one we'd send to our own house.

Real Electrum-Home-specific trust signals (install count per pro, repeat-customer rate, first-party reviews) get built post-launch from actual data. Until then, we don't simulate what we haven't earned. Revisit this section after the first 1,000 installs.

How we talk about our margin (internal)

The price is the price. We do not itemize a platform fee or "convenience fee" on customer quotes. Doing so re-invites the comparison shop we exist to eliminate ("saved $500 by calling Solar.com direct"). The Amazon mental model is what we want: the number is fair, the work gets done, the customer doesn't need to think about the markup. If a homeowner directly asks how we make money — and on FAQ surfaces — we answer plainly: "We charge a small platform fee that's already included in your price. It's how we keep pros paid fairly and pricing honest." One sentence, confident, no apology, no itemization.

Vocabulary — Always Say / Never Say

Never say	Always say	Why it matters
installer (customer-facing)	pro	"Installer" is industry/B2B and breaks for lawn, pool, cleaning. "Pro" works for the full catalog. Supply-side nav label is "For Pros" — "installer" is only correct in vertical-specific copy where it's literal (HVAC installer, roofing installer, solar installer).
licensed (alone)	licensed and insured	Insurance is a hard gate for every vertical, including lawn care. Liability transfer risk if a pro is injured on customer property is the reason. Always pair the two words.
estimate / range / approximate	price / real price	Estimates are what other people give. We give a number.
quote / get a quote	see what it costs / your real price	"Quote" signals lead-gen. We're not lead-gen — own that linguistically.
marketplace / browse pros / compare installers	we match you with a local pro	No ratings, no shopping. Electrum handles selection.
schedule a free consultation	book your install / start your project	Consultations are sales meetings. We don't sell — we book work.
background-checked / vetted with criminal record check	licensed and insured / verified license + insurance	We don't run background checks. License + insurance verification is real and defensible.
stars / 4.9-star / review count	(don't show ratings, anywhere, ever)	We are not a marketplace. Ratings — even on a single pro page — reintroduce marketplace UX through a side door. Trust transfers from Electrum the brand, not from per-pro ratings.
convenience fee / platform fee on quote line items	(price is the price — fee included, not itemized)	Itemizing the markup invites comparison shopping. If asked directly: "a small platform fee, already included." FAQ-level transparency only.
thread (customer-facing)	one place / one platform / one conversation	"Thread" is internal SaaS jargon a homeowner won't parse. Reserve for internal docs only.
IRA tax credit / federal clean energy credit	state and utility rebates (when verified for that state)	Federal IRA credits have expired. State/utility rebates are real and citeable per-state. Never let federal credit copy survive in any template.
affordable / great value / save money	fair price / locked at booking	"Affordable" is salesy and unmeasurable. "Locked" is specific.
we own the outcome / own it all / guarantee the work	fair price, vetted pro, accountable process / one platform, accountable for scope and payment end to end	At ~5% margin we don't underwrite workmanship — the installer's warranty does, with an optional Electrum Home Protection Plan on top. Claiming we "own the outcome" is an overstep and a compliance risk in states where the licensed pro is the contracting party. See the "ownership claims" guardrail above.
AI-powered home services	real prices, real pros (no AI in customer-facing copy)	AI is invisible to the homeowner. They want a price, not a technology.
our technology / our platform	we / Electrum Home	Speak as a team, not as software.
provider / vendor / service partner	pro / installer (B2B only) / Electrum	Generic SaaS words make us sound like a directory. We're a service.
customer experience / satisfaction	how it went / what happened / done right	Plainspoken always beats corporate.
leverage / utilize / facilitate	use / do / get done	Verb hygiene.
seamless / frictionless / effortless	we handle it / one thread / no runaround	"Seamless" is the most overused SaaS word. Say what's actually happening.
empower homeowners / unlock value	show you what it costs / help you decide	No corporate verbs of empowerment. We are a utility.
trust the process	here's what happens next: [specific step]	"Trust us" is what people who can't be trusted say. Show the next step.
legacy contractors / traditional industry	(don't attack the trade)	We position against the process, not the people. Plumbers buy houses too.
tax credit / IRA incentive	(removed — IRA clean energy credits have expired)	Real legal/honesty issue. Never reference as current.
emojis in customer copy 🎉	words	One-time exception: green checkmark icon (✓) inside the green "Price locked" badge — that's not an emoji, it's a brand element.

Words we own — use these as anchors

Real pricingReal proDone rightLockedNo surprisesNo runaroundOne platformItemizedLicensed and insured

Stats discipline — what we're allowed to claim

Every public number needs to survive a journalist or skeptical customer asking "wait, what does that actually mean?" Pair each number with its honest definition. Canonical list: memory/electrum-real-reviews-stats.md.

Number	Honest definition	Where to use it
40,000+ projects installed	Hard delivery proof — actual completed installs through Electrum.	Hero stat on credibility surfaces — about, trust pages, install-flow confirmation, contract pages. This is the number that says "we ship."
100,000+ homeowners served	Homeowners we've helped make a decision — through a quote, a tool, or an installed project. Public on electrum.co.	Top-of-funnel surfaces — homepage hero, blog, ads. Softer, broader number. Keep for consistency with electrum.co.
1M+ homeowners used our tools	Visitors who've used Electrum calculators/content to plan a project. Soft definition — "used," not "became a customer."	Tool/calculator surfaces where the "used a tool" framing is true on the same page. Never conflate with "customers."
$1B+ in projects quoted	Estimated/quoted projects through Electrum since 2013. Not installed dollars.	Credibility surfaces, always with the "quoted" word. Never "$1B+ installed" — that's the asterisk that keeps us honest.
1,000+ pros in network	Corporate total across Electrum verticals.	Use this number. Drop the older "700+" caveat — clean "1,000+ pros" everywhere customer-facing.
90% would recommend	Public stat on electrum.co.	Credibility sections. Unchanged.
Since 2013	Electrum parent company founded 2013. Not 2014.	Anywhere we cite tenure.
50 states	Licensed pros available across all 50 states.	"Licensed pros in 50 states." Unchanged.

Hard rules

• Never reference "3-year workmanship warranty" as a platform-wide stat. Workmanship warranty is vertical-dependent (none for lawn care; years for roofing). Show it at the vertical-page level, never as a global number.
• Never use the word "leads" in external copy. It's salesperson language; homeowners don't think of themselves as leads.
• Never say "$1B+ installed". The defensible framing is "$1B+ in projects quoted" or just drop the number on that surface.
• Never imply per-pro install counts, ratings, or testimonials at launch. We don't have that data yet.

The Electrum.co relationship

Lean in once per page, no more. Electrum Home is the brand on stage; Electrum.co is the credibility halo. The default placement is footer ("A sister company of Electrum.co" / "Built on Electrum's 12-year home electrification platform"). One additional inline mention is allowed on top-level credibility sections. Deeper-funnel pages(post-quote, install flow, contracts, dashboard) don't need the parent brand reference — by then the customer has chosen us. Never lead a hero with it.

Page-Type Playbooks

Copy recipes for the page types we'll rebuild next. Each playbook gives the structure, the tone target, and the do/don't for that surface.

Hero copy (any P0/P1 page)

Three lines max: headline (4–7 words, declarative, no question marks), subhead (≤22 words, what the page actually does), microcopy under CTA (objection-killer: free, no account, time).

Not this

Connect with licensed home service professionals near you to get free, no-obligation quotes for your next project.

This

Every home project. Done right.

Why: Destination + quality promise in 5 words. Tells you what this place is. Leads with what will happen, not what won't.

Not this

Save time and money on your next home project with our innovative platform.

This

Know what it should cost before you call anyone.

Why: Specific outcome > vague benefit. 'Innovative platform' tells the visitor nothing.

Not this

Stop calling three contractors. Use us instead.

This

See what your project actually costs before you call anyone. Then book a licensed and insured local pro — in minutes.

Why: Never tell homeowners what to stop doing before they trust you. Show them what they get by starting here.

Hero structure rule: On dark-background heroes (navy photo), no eyebrow is needed if the H1 is strong enough to stand alone. Eyebrows are useful when the H1 is abstract/punchy and needs grounding — not when the H1 already carries the destination frame.

CTA microcopy template:"See what it costs · No account required · 3 minutes"

CTA button labels

Verbs only. Specific. Outcome-oriented. Never "Submit" or "Get Started."

Use

Start your project
See what it costs
Get your real price
Book your install
Lock this price

Don't use

Get started
Submit
Continue
Request a quote
Learn more

Flow / intake questions

We're an advisor platform — the flow exists to help the homeowner decide, not to qualify a lead. Question copy should sound like a contractor friend asking, not a form field.

Not this

Please select your service preference from the dropdown below.

This

What needs to get done?

Why: The same question, with a tone that respects the homeowner's time.

Not this

Property square footage (required)

This

Roughly how big is your house?

Why: Round numbers, plain words. Most homeowners don't know their square footage to the foot.

Not this

Do you have an existing HVAC system?

This

What's there now?

Why: Conversational. The page already knows we're talking about HVAC.

Reminder: don't remove "dead" questions — we're building an advisor. Installer data + future routing logic depend on the inputs even when the current price doesn't.

Pricing & contract copy

Tone gets serious. Every number is itemized. No marketing in this section — these surfaces exist to be trusted, not sold.

✓Show line items with category labels (Equipment / Labor / Permits) before showing the total.
✓Use font-variant-numeric: tabular-nums on every numeric column.
✓Label commodity items by category ("HVAC install") not SKU-level specifics we can't verify.
✓Label major equipment by brand + spec we've confirmed in the pricing engine ("Carrier 3-ton A/C" — not "18 SEER" unless verified).
✗Use "starting at" on locked prices. If it's locked, it's the number.
✗Promise tax credits, rebates, or incentives we haven't verified for that state.
✗Add disclaimer language "subject to change" on a price card the customer is about to lock.

Error messages & empty states

Three rules: (1) state what happened, (2) state who's fixing it, (3) state what the user does next. Never blame the user for using the product.

Not this

Error: invalid input. Please try again.

This

That ZIP isn't quite right — give us 5 digits and we'll match a pro.

Why: Tell them what we needed and why.

Not this

Something went wrong.

This

We hit a snag pulling your price. Try again or text us at (555) 123-4567 and we'll sort it.

Why: What went wrong + the human escape hatch.

Not this

No projects found.

This

No projects here yet. Start one and we'll keep everything in one place.

Why: Empty state is also onboarding.

Confirmations & success states

The one place warmth is encouraged. Tell them what happened, what happens next, and roughly when. No exclamation points outside this surface.

Not this

Your booking has been successfully submitted. You will receive a confirmation email shortly.

This

You're booked. We'll text you within one business day to confirm your install window.

Why: "You're booked" lands. The next sentence sets the next expectation specifically.

Transactional emails & SMS

Subject line carries the news. Body is two sentences plus the action. No marketing copy, no upsells, no "P.S.".

Subject: Your install is booked — Tuesday, 9am–noon

Hey Chris,

Mike from Apex HVAC is your pro for the Carrier 3-ton install. He'll be at your place Tuesday between 9am and noon. Your locked price is $5,800.

Reply to this email or text us at (555) 123-4567 if anything changes.

— Electrum Home

Support & in-thread replies

First-name greeting. Lead with the answer, then the context. End with the next step or a real question, not "let me know if you have any questions."

Legal reminder: Electrum staff cannot sell or quote — installers quote and sign directly with the homeowner. Support answers process questions, never pricing changes.

Reviews & social proof

✓Use only verified Electrum.co buyer reviews from memory/electrum-real-reviews-stats.md.
✓Quote them verbatim. First name + state only. Never edit a customer's words.
✓Frame honestly: "From Electrum customers" — never re-categorize a solar review as HVAC.
✗Make up reviews, paraphrase reviews, or pull testimonials from competitors.
✗Show star ratings or numeric scores — anywhere, ever. No third-party imports, no per-pro stars, no marketplace UX.
✗Decorative photos behind quotes — solid navy band, quote rotator, dignified.

Microcopy details

✓Form helper text: under the input, ≤8 words. Tell them the format, not the rule.
✓Loading states: "Pricing your project…" not "Loading…"
✓Skeleton/wait states: don't apologize. The wait is the price of getting it right.
✓Tooltips: 1 sentence. Define the term, don't market it.
✓Disclosures: small, in cream/footer text, written like a person not a lawyer.

Information Architecture

Electrum Home uses two organizational schemes for services. They are complementary entry points pointing to the same destination pages — not duplicate navigation.

Trade-based organization

Services grouped by trade: Mechanical, Exterior, Plumbing, Inside the home, Outdoor, Regular maintenance, Major renovations. This is the correct scheme for known-item retrieval — users who already know what they want.

Use for: main navigation, search, sitemap, footer, A–Z lists

Intent-based organization (discovery surfaces only)

Services grouped by homeowner goal: “Fix something broken,” “Maintain my home,” “Lower my energy bill,” “Upgrade something,” “Start a big project.” This maps to how homeowners actually frame their goals when they are exploring rather than hunting.

A service may appear under multiple intents — that is intentional. HVAC replacement is both a fix and an efficiency upgrade; smart home setup is both an energy play and an upgrade.

Use for: discovery sections, future guides and content, intake confirmations, dashboard empty states

Intent pill UI pattern

Five pill buttons across the top; selecting one reveals a 2-column service list below. Active pill uses solid purple (#8857D8). Inactive pills are white with a ring and switch to purple text on hover. Service rows use max-w-[560px] with gap-8min-gap to keep the name and price close together — sized so “Home security system” (the longest label) fits comfortably on one line with breathing room.

Decision rule

✓Navigation, search, A–Z, footer → trade-based
✓Discovery sections, empty states, onboarding → intent-based
✗Use intent labels (“Fix something broken”) as nav items or search categories
✗Use trade labels (“Mechanical,” “Exterior”) as discovery entry points — they require prior knowledge

Services directory page (/flow) — structure

Hero: Search composite (search + ZIP + CTA) above the fold. H1 “What needs to get done?” Single-line value prop. Trust microcopy only — no pills above the fold.
Featured tiles: 12 single-trade quick-wins in a dense grid. No multi-trade complex jobs (kitchen/bathroom remodel, pool) in featured — those stay reachable in the browse section and A–Z list only.
Browse by category: Intent-based — 5 pills + service list panel. See intent pill UI pattern above.
A–Z all services: Plain text, 5-col desktop. SEO completeness.
CTA closer: Photo-backdrop, asymmetric cream overlay, “Have something we didn't list?”

ZIP field priority order on mount: localStorage (eh_zip) → /api/me (profile) → /api/geo (IP-based). Write to localStorage on every valid 5-digit entry. The homepage hero uses the same priority order.

Part 2

Visual System

Brand Colors

cream — Page background

#faf6ee

navy — Primary text, dark sections, footer

#0a2540

purple — Brand accent, buttons, highlights

#8857D8

purple-hover — Button hover ONLY

#7B4FD3

purple-light — Accent on dark backgrounds

#b89cf5

green — Success, confirmed, price locked

#4a8a5c

error-text

#c0392b

Do not use:

✗Cyan-to-blue gradients or neon glows
✗Gradient text on headings or metrics
✗Pure black (#000) or pure white (#fff) as backgrounds — always tint
✗Purple-to-blue "AI interface" palette

Logo & Brand Marks

The production logo lives in code as src/components/ui/logo.tsx — an SVG component, not a static file. Archived reference SVGs remain in /public/brand/for historical reference only. The old “v6 option F” static file is now obsolete.

Production — src/components/ui/logo.tsx

Icon: Solid brand purple (#8857D8) house diamond with white cutout. No gradient — the blue-to-purple gradient was removed.
Wordmark: “ELECTRUM” in navy (#2d2d38) via vector letter paths.
HOME text: Brand purple (#8857D8), font-size 11, font-weight 700, letter-spacing 0.35em.
Variants: default — navy wordmark, purple HOME. white — all white wordmark, semi-transparent HOME (60% opacity).
Nav usage: white variant when nav is transparent (dark hero); default variant when scrolled or on light backgrounds.

Favicon — /public/favicon.svg

Solid purple diamond with white house cutout. Exact match to the logo icon. Use at sizes 16–64px.

v1 — Original (gradient diamonds)

Cyan→purple gradient. Archived after the code-based logo replaced it.

/brand/electrum-home-logo-v1.svg

Reference variant. Archived.

/brand/electrum-home-logo-v2.svg

Wordmark + dot separator, gradient diamonds. Archived.

/brand/electrum-home-logo-v3.svg

electrum-home-logo.svg

Legacy fallback. Do not use in new work.

/brand/electrum-home-logo.svg

Typography

Font: Manrope only.

No Inter. No Fraunces. No system-ui as primary. Weights: 300, 400, 500, 600, 700, 800.

font-family: var(--font-manrope), ui-sans-serif, system-ui, -apple-system, sans-serif;

Role	Size	Weight	Notes
H1 hero	4.75rem lg / 4rem sm / 2.75rem mobile	800	Purple accent word on navy bg
H2 section	3rem lg / 2.625rem sm / 2rem mobile	800	tracking -0.022em
H3 card	17px	800	Inside cards/components
Body large	17px / 16.5px	400	Section subheads, leading relaxed
Body	15.5px / 15px	400–500	General copy
Body small	13.5px / 13px	400–600	Card descriptions
Eyebrow	12–12.5px	600	Colored dot + label, varied per section
Caption	10–11.5px	600	Labels, badges, metadata

✗font-mono for prices — use font-variant-numeric: tabular-nums
✗Gradient text on any heading or metric
✗Same uppercase eyebrow on every section

Layout & Spacing

Full layout railmax-w-[1480px] + px-6 / lg:px-10

Content grids (2-col)max-w-[1480px]

Centered contentmax-w-[1080px]

Major section paddingpy-24 to py-32 — VARY for rhythm, never all the same

Sub-bands within a sectionpy-20 to py-24

Container width

Marketing pagesmax-w-[1480px] + px-6 lg:px-10

Forms & intakemax-w-[720px] — narrower for readability

Hero text blocksmax-w-[800px] — line-length comfort

Components

Primary CTA Button

rounded-full bg-[#8857D8] hover:bg-[#7B4FD3] font-bold text-white

Cards

rounded-2xl bg-white ring-1 ring-[#0a2540]/8 shadow-[0_4px_24px_-6px_rgba(10,37,64,0.12)]

✗Nested cards (card inside card)
✗Glassmorphism (blur effects, glow borders)

Navigation

Layout — split-nav

Logo hard-left (pinned to viewport edge via pl-6 lg:pl-10), auth hard-right, center nav links in flex-1 justify-center — they don't stretch to viewport edges on wide displays.

Desktop items: Logo | How it works · Pricing · Services ▾ | Sign in · Start a project

Logo variant

white when nav is transparent (dark hero); default when scrolled or light.

Scroll threshold — 120px

Below 120px scroll: transparent + white text. Above 120px:

bg-[#faf6ee]/92 backdrop-blur-md border-b border-[#0a2540]/8

forceLight prop

Pass forceLight to PublicNav on any page with a cream-background hero (e.g. /flow) to skip the transparent phase entirely and always render the light nav state.

Removed from nav

Tools · About · Learn (footer only). The supply-side entry point is labeled "For Pros" and lives on /installer only.

Services mega-menu — cascading / Thumbtack-style

Trigger: Opens on hover (80ms intent delay) OR click. Click pins it open until: click outside, click Services again, click a service link, or Escape.
Left column (~240px): 7 category names. Hover activates; active state = bg-[#8857D8]/[0.06] border-l-2 border-[#8857D8] font-semibold.
Right pane (flex-1): Active category's services as single-column vertical list; flex flex-col gap-1.5.
Footer row: “View all services →” linking to /flow.
Panel width: min(560px, calc(100vw - 48px)), anchored under the Services button (NOT viewport-centered).
Mobile: Two-level accordion drawer — Services expands to 7 category groups, each group expands to service links.

“Start a project” button behavior

From any page except /flow: navigates to /flow.
When already on /flow: smooth-scrolls to top of page (window.scrollTo({ top: 0, behavior: 'smooth' })).

Imagery

✓Hero (dark navy band): warm dusk or golden hour exterior. Real home, glowing windows, negative space for text.
✓CTA section backdrop (cream band): warm interior or aspirational finished-project photo. Use an asymmetric left-to-right gradient overlay — heavy cream on the left (text side stays readable), fades to 40–50% on the right so the photo bleeds through. Photo opacity 50–60%.
✓Project tiles: square aspect ratio, navy gradient overlay, text on photo.
✓Alt text: descriptive for informational; alt="" + aria-hidden for decorative.
✗White or cream-toned interior photos behind a cream overlay — they vanish.
✗Stock-feeling generic photos
✗AI-generated imagery that reads as synthetic

Credentials section pattern

Navy background, centered layout. Lead with 40,000+ home projects installed as the H2 hero stat. Prose below in muted white. OEM/partner logos in their own sub-band with centered eyebrow + centered logo row. Do not mix left-aligned copy with centered logos in the same block — either center everything or use a two-column layout (stat left, logos right with a divider border). Simpler is better: centered wins unless page width justifies two columns.

Accessibility

✓focus-visible:ring-2 on all interactive elements
✓44×44px minimum touch targets (carousel dots, pause buttons)
✓aria-live="polite" on all dynamic content changes
✓Skip-to-content link on all public pages
✓prefers-reduced-motion guards on all animations
✓WCAG AA contrast minimum on all text

AI Fingerprint Checklist — Never Do

✗Hero metric template (big number + uppercase label × 4, centered on dark band)
✗Identical card grid (same skeleton, 12+ times)
✗Purple radial glow on more than ONE dark section
✗Same uppercase eyebrow on every section
✗Glassmorphism (blur/glass cards, glow borders)
✗Gradient text on headings or metrics
✗font-mono for prices — use tabular-nums
✗Rounded rect with thick colored border on one side
✗Center-align everything — prefer left-aligned compositions
✗Same py-24 on every section — vary for rhythm
✗Nested cards
✗Customer-facing emojis
✗Background check claims (we don't do them)
✗Star ratings or review counts anywhere in the customer flow — no third-party imports, no per-pro stars
✗Itemized platform/convenience fee on customer quotes — price is the price
✗Per-pro install counts or testimonials at launch (we don't have the data yet)
✗Federal IRA tax credits referenced as current (they've expired)
✗3-year workmanship warranty as a global stat — it's vertical-dependent
✗The word 'thread' in customer copy — internal jargon only
✗The word 'leads' in customer copy — salesperson language
✗'Licensed' without 'and insured' — always pair them
✗Marketplace feel in customer flow (browsing pros, comparing pros, etc.)
✗Nav scroll threshold too deep — switch to light nav by scrollY 120px, not 380px; hero text should never overlap a transparent dark nav
✗Progress step labels using 'Estimate' — use 'Locked / Booked / Scheduled / Installed'
✗'Thread' as a UI label in product mocks or status UIs — use 'Messages'
✗Project reference IDs labeled 'Estimate EH-...' — use 'Project EH-...'
✗Search bar occupying full container width — constrain to max-w-[760–880px] and keep left-aligned
✗Featured tiles that include multi-trade complex jobs (remodels, additions) — single-trade quick-wins only in featured grids

Configurator Verticals

For verticals where an address unlocks real value (live roof sizing from satellite, property data, code-by-state add-ons), we build a Tesla/TrueCar-style configurator instead of a generic question funnel. The first one live is /flow/roof-replacement.

The configurator pattern

• Address-first. One input. Lookup pulls sqft + stories from ATTOM and renders a satellite preview. Only after the address resolves do we slide in the configurator.
• Honest auto-sizing. Roof area = (living sqft / stories) × 1.15 pitch × 1.10 waste. Always labelled “approximately X sq ft” with an Edit Dimensions affordance.
• Graceful fallback. If ATTOM has no match, we say so plainly and auto-open manual sqft + stories inputs. Never a dead-end.

Live price-per-choice

• Every selection shows its dollar delta inline (+$420, −$200, +$0). The sticky price rail updates instantly.
• Use +$0 only where ambiguity needs explicit reassurance (e.g. tear-off layers, decking). For non-impacting choices (color, timeline), put it in the section subtitle once: “Color is yours — same price for any option.”
• Live build summary in the rail mirrors what the user has picked, plain language: “Material: Architectural shingle (GAF Timberline)”.

Market band trust device (left-weighted)

• 3-segment bar: 55% Below market / 30% Market / 15% Above. This is intentional, not a typo. Our pricing IS competitive — the band must reflect that.
• Anchor the local market range above our base price (e.g. base × 1.10 – 1.55) so a default config lands clearly in “Below market.”
• Caption uses dynamic city name: “Your price is lower than 38% of local quotes in Austin.”
• Marker position clamped to [4%, 96%] so it never falls off the bar.

One primary CTA at a time

• The rail has exactly one purple pill: Lock my price. Always that exact phrase — not “Get quote”, not “Continue”.
• Below it: a ghost Save for later button. Stores config to localStorage; resumes on return.
• Mobile: fixed bottom bar with the locked price + same CTA. No floating drawers.

Honest scope (“What’s included” panel)

• Every configurator vertical opens with a collapsed “What’s included in every roof / job” panel.
• Expanded: 8–12 baseline items, with a state-specific note for code requirements (e.g. ice & water shield in cold states).
• This is where we earn trust before asking for the click.

Auth-after-spec (not auth-first)

• We do not gate the configurator behind login. Users build their full spec first.
• On Lock my price, if not signed in: slide-up inline auth sheet with Google SSO + email/password. They never lose their config.

Pro availability micro-tile

• Show approved-pro count for the vertical+state, pulled live from the DB.
• Set honest expectations: “Roofers typically start within 2–4 weeks. We match you within 24 hours of locking your price.”
• Never promise a specific day (“next Tuesday”). We don’t control installer calendars at lock time.

For legal positioning, contract architecture, payment model, and approved/prohibited vocabulary, see the Compliance & Legal Positioning doc.

Source files

Memory: memory/electrum-home-style-guide.md
Page index: /docs/page-index
Versions: /docs/versions
Real reviews + stats: memory/electrum-real-reviews-stats.md