The Mission
The only EPA Safer Choice-certified wildfire chemistry.
Recognized by the U.S. EPA as safer for people, pets, and the watershed. No other Class A fire-protection chemistry on the market holds this mark.
Learn Morev1.2 · Sourced from wildfireproshop.com
The system, documented.
Every token, type ramp, logo variant, texture, and component pattern used by the live Tahoe site — in one static file you can lift straight into /css/styles.css.
Foundation · Palette
Color — Deep Teal + Forest
Sampled from the WPS logo crest: Tahoe sky, pine, soil, snow.
Deep Teal — page bg
Default background, header rest state
#0E2A30 · --wps-bg
Surface — cards
Cards, alt sections, footer columns
#143840 · --wps-surface
Surface 2 — recess
Footer bg, code blocks
#0A2024 · --wps-surface-2
Emphasis
Forest Green — emphasis
Accent words, stat numerals, flipped card, dots
#5FA758 · --wps-forest
Action
Terracotta — action
Primary buttons, header pill, play, skip link, hovers
#B85A2C · --wps-terra
Ink
Cream Ink — headlines
Headlines & button labels (on dark)
#F2ECE0 · --wps-ink
Contrast rules. Body text uses cream at 66% opacity over deep teal (≈9:1). Forest and terracotta meet AA only at large/bold sizes — never use them for body copy. Don't tint body links forest by default; reserve it for hover.
Foundation · Type
One sans. Three jobs.
Poppins runs the page — Bold for headlines, Regular for body, SemiBold for buttons. JetBrains Mono does the eyebrow. Source Serif italic carries the voice line.
Some things, once burned, are gone forever.
CitroTech is a proactive fire retardant safe enough to spray around homes — vetted by an EPA-approved lab over 90 days. No banned ingredients hiding behind "trade secret."
EPA Safer Choice · Partner of the Year 2024 & 2026
From the Founder
Historical buildings on the route. Cultural heritage in the tank's reach.
90+
One note on voice. Source Serif 4 italic is held over from v1.0 because the voice subhead reads as quotation, not interface — a different typographic register than the Poppins UI. If you'd rather collapse to a single family for simpler load and a more uniform feel, swap --wps-voice to Poppins Italic and you're done.
Foundation · Logo
Four locked variants.
One mark. Four color treatments. Pick by background, never by mood.
Reverse · Cream wordmark
Site default. Use on Deep Teal or any dark photo — the header lockup and primary footer lockup.
https://wildfireproshop.com/wp-content/uploads/2026/05/WFPS-master-logo-white.png
Primary · Terracotta wordmark
The brand-defining lockup. Use on cream backgrounds — print collateral, business cards, partner one-sheets, the store window.
https://wildfireproshop.com/wp-content/uploads/2026/05/WFPS-master-logo-brown.png
Alternate · Forest wordmark
Use on cream when terracotta clashes with adjacent imagery, or when partnering with a non-profit that already carries a warm-tone identity.
https://wildfireproshop.com/wp-content/uploads/2026/05/WFPS-master-logo-green.png
Icon · Crest only
Favicons, social avatars, app icon, sticky-compact header. Use anywhere the wordmark would render below 36 px tall.
https://wildfireproshop.com/wp-content/uploads/2026/05/WFPS-master-logo-circle.png
Clear space
Surround the full lockup with breathing room equal to the height of the "W" in WILDFIRE. For the crest-only mark, leave at least ⅛ of the crest's diameter on every side. Never crowd against a button, headline, or photo edge.
Minimum size
Full lockup: 36 px tall on screen, 0.5 in (≈13 mm) in print. Crest only: 32 px on screen, 0.35 in in print. Below these, the trees lose definition.
Pairing
The reverse (cream) lockup is the site default — header, footer, every Deep Teal surface. Terracotta and forest variants are for cream-background contexts: print collateral, partner co-branding, the storefront signage.
Favicon & touch icon
Use the crest-only mark at 32×32 (favicon), 180×180 (apple-touch-icon), 192×192 and 512×512 (PWA manifest). Always on a transparent or solid Deep Teal background — never on white.
⚑ Don't
- Recolor the wordmark or crest outside the four approved variants.
- Stretch, skew, rotate, or apply perspective.
- Add drop shadows, outer glows, outlines, or strokes.
- Place on busy photo backgrounds without a contrast scrim (≥40% darkening).
- Separate the crest from the wordmark in the full lockup — if you need just the icon, use the crest-only variant.
- Re-typeset "Wildfire Pro Shop" in Poppins Bold and call it the logo. The lockup wordmark is the brand mark; system Poppins is for everything else.
Foundation · Texture
Barn wood backdrop.
A weathered cedar texture pulled from our print and signage system — for the moments the brand needs to feel rooted in place, not just on a screen.
.bg-barn
The texture by itself. Use only when no text, button, or logo sits over it — purely as decorative wall, divider, or print backing..bg-barn--scrim
Deep Teal at 72% opacity over the texture. This is the standard for any section with text or CTAs over barn wood..bg-barn--scrim-deep
Surface 2 at 84% opacity. Use when copy is small, dense, or runs over the busiest parts of the grain.Where it lives
Marketing-side use only: hero alternates on the home slider, the Tahoe Defender CTA on long pages, About-page hero, partner co-branded sections, store-event landing pages, and print/sign collateral. Never on regular body sections — it competes with the read.
Always scrim
If any text, button, or logo sits on the texture, lay a Deep Teal scrim of 60–80% opacity over it first. The wood should feel like atmosphere, not compete with the message. Use the deep variant (84%) for small or dense copy.
Treat as photo
background-size: cover, background-position: center, background-repeat: no-repeat. The asset is a full-bleed image, not a repeating tile — don't repeat it or you'll see seams.
Pairings that work
Terracotta buttons pop hardest on barn wood — both are warm earth tones and the contrast lifts the CTA. Cream lockup, forest accent words, and JetBrains kickers all hold up. Avoid the forest-flipped card on barn wood — too much surface competition.
⚑ Don't
- Use the raw (un-scrimmed) texture behind text or buttons — contrast will fail.
- Stretch, distort, or rotate. Cover-crop only.
- Pair with the
.card--forestflipped card — both surfaces shout and the eye can't settle. - Mix barn wood with photo imagery in the same section.
- Use the terracotta or forest wordmark over it — only the reverse (cream) lockup is cleared.
- Ship the 1.4 MB master to production unchanged — see performance note below.
/* Token */
:root {
--wps-bg-barn: url("https://wildfireproshop.com/wp-content/uploads/2026/06/wps-barn-wood.png");
}
/* Raw — decorative only, no overlays */
.bg-barn {
background-image: var(--wps-bg-barn);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Default — 72% Deep Teal scrim, the standard for text/CTAs */
.bg-barn--scrim {
background-image:
linear-gradient(rgba(14, 42, 48, 0.72), rgba(14, 42, 48, 0.72)),
var(--wps-bg-barn);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Deep — 84% Surface-2 scrim, for small or dense copy */
.bg-barn--scrim-deep {
background-image:
linear-gradient(rgba(10, 32, 36, 0.84), rgba(10, 32, 36, 0.84)),
var(--wps-bg-barn);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
⚑ Performance. The master at 2026/06/wps-barn-wood.png is 1.4 MB — far too heavy for an LCP-critical background. Before production, run it through a build step to generate .webp at ≤200 KB and .jpg fallback at ≤350 KB, then update --wps-bg-barn to the optimized path. Consider an image-set() with WebP first if browser targets allow.
Components · Action
Buttons.
Pill shape, Poppins SemiBold, four jobs.
<a class="btn btn--primary">Sign the Petition</a> <!-- terracotta, primary CTA -->
<a class="btn btn--ghost">How CitroTech Works</a> <!-- translucent, over photo -->
<a class="btn btn--forest">Defend a Landmark</a> <!-- forest, partner/non-profit -->
<a class="btn btn--text">Founder's Story</a> <!-- inline link, underlined -->Rule. One primary terracotta button per visible section. Ghost and text variants for secondary actions. Never use forest fill alongside primary terracotta in the same row — it muddies the action signal.
Components · Chrome
Header.
Reverse lockup at 44 px tall · primary nav right · terracotta pill far right. Logo click goes home — no "Home" link.
Below 768 px the nav collapses to a drawer (pattern not in this guide). For sticky/compact state, swap the reverse lockup for the crest-only icon at 36 px.
Components · Hero
Full-bleed hero with accent word.
Mono kicker · Poppins Bold headline with exactly one forest-green word · italic-serif voice subhead · primary action.
Opening June 2026 · Incline Village
Defending Tahoe from toxins and wildfires.
Built by the inventor of CitroTech and an EPA Safer Choice Partner of the Year — opening in Incline Village, with South Lake and Truckee to follow.
Slider behavior. Home hero is a 5-second autoplay slider; pauses on hover, focus, and document.hidden. Each slide follows this exact composition. Products page sub-slider is manual-advance only. Slider may swap the gradient backdrop for .bg-barn--scrim on rustic/community-themed slides.
Components · Cards
Three claims. No asterisks.
Rounded 24 px on surface. One "flipped forest" card per row anchors the eye.
Independently Tested
Tested non-toxic for the watershed and wildlife.
UL GreenGuard Gold for indoor air. Aquatic toxicity testing for lakes and streams. Safe around trout, dogs, and the kids playing in the yard.
Learn MoreMost-Tested Formula
More fire testing than any retardant on the market.
Class A wildfire chemistry developed and refined by Steve Conboy over decades — and put through more lab and field protocols than any competing product.
Learn More
Rule. Use .card--forest on exactly one card per row. In a 4-up grid, position it second or third — never first or last.
Components · Stats
By the numbers.
4-up grid, oversized forest numerals in Poppins ExtraBold to match the brand wordmark weight. Mobile collapses to 2-up.
90%
Tahoe homes at wildfire risk
24h
Estimated full-basin evacuation
30+
Years of Class A fire testing
#1
EPA Safer Choice Partner of the Year
Source data needed. Live site currently ships placeholder zeros. Replace with confirmed figures before launch.
Components · News
Latest news & updates.
Each card: forest-dated kicker, Poppins Bold title that links, terracotta-arrow "Read More" at the foot.
Components · CTA
"Become a Tahoe Defender" pattern.
The one CTA section every long page ends with. Two surface variants: the default forest-glow, or the barn-wood rustic.
Become a Tahoe Defender.
Sign the Tahoe Risk Reduction Petition. Visit the Incline storefront when we open in June. Or call Steve directly — he picks up.
Pick by context. Default forest-glow is the site-wide CTA. The barn-wood variant (.defender.defender--barn) is for community-rooted moments — events, partner pages, the storefront opening campaign.
Lift & ship
Tokens, ready to paste.
Drop the :root block into the top of /css/styles.css. Every component on this page references these and nothing else.
:root {
/* Surface */
--wps-bg: #0e2a30;
--wps-surface: #143840;
--wps-surface-2: #0a2024;
/* Emphasis & action */
--wps-forest: #5fa758;
--wps-terra: #b85a2c;
--wps-terra-hov: #cf6d39;
/* Ink */
--wps-ink: #f2ece0;
--wps-ink-soft: rgba(242, 236, 224, 0.66);
--wps-ink-mute: rgba(242, 236, 224, 0.42);
/* Lines */
--wps-hair: rgba(255, 255, 255, 0.09);
--wps-hair-2: rgba(255, 255, 255, 0.16);
/* Imagery / texture */
--wps-bg-barn: url("https://wildfireproshop.com/wp-content/uploads/2026/06/wps-barn-wood.png");
/* Type families */
--wps-display: "Poppins", system-ui, sans-serif;
--wps-body: "Poppins", system-ui, sans-serif;
--wps-mono: "JetBrains Mono", ui-monospace, monospace;
--wps-voice: "Source Serif 4", Georgia, serif;
/* Weights */
--wps-w-body: 400; /* body, footer addr */
--wps-w-medium: 500; /* nav links, mono kicker */
--wps-w-button: 600; /* buttons, UI */
--wps-w-bold: 700; /* h1–h4, news titles */
--wps-w-display: 800; /* stat numerals — matches brand wordmark */
/* Scale */
--wps-h1: clamp(2.5rem, 5.2vw + 0.5rem, 4.75rem);
--wps-h2: clamp(2rem, 3.4vw + 0.5rem, 3.25rem);
--wps-h3: clamp(1.375rem, 1vw + 1rem, 1.75rem);
--wps-h4: 1.125rem;
--wps-stat: clamp(3.75rem, 9vw, 6.5rem);
--wps-kicker: 0.6875rem;
/* Radii & motion */
--wps-r-card: 24px;
--wps-r-pill: 999px;
--wps-r-sm: 8px;
--wps-ease: cubic-bezier(.2,.7,.2,1);
--wps-dur: 240ms;
/* Layout */
--wps-max: 1280px;
--wps-gutter: clamp(1.25rem, 3vw, 2rem);
--wps-section-y: clamp(3.5rem, 8vw, 6.5rem);
}
/* Google Fonts — in <head> */
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&family=Source+Serif+4:ital,opsz,wght@1,8..60,400&display=swap">
Breakpoints. 375 / 768 / 1440 per PRD. Most components use container-friendly auto-fit grids; only the 4-up stats grid and the Defender CTA need explicit 768 px rules. prefers-reduced-motion kills transitions globally — see the top of this file's stylesheet.