Developer handoff
Specs for Filter King's site team
Every change is a template, data or copy change on the existing site — no new apps. Tokens extend the live palette and type; each section lists behavior, states, edge cases, accessibility and an acceptance check.
Design tokens
Live palette, three accessible additions
Read from filterking.com's CSS: navy #172165, red #FF4536, page #F5F5F5, Poppins throughout. The live red fails as a button background (white text 3.4:1), so buttons move to a darker red and the bright red stays an accent.
| Token | Value | Use | Contrast |
|---|---|---|---|
| color.navy | #172165 | Headings, header band, selected states | 14.5:1 on white |
| color.red (new) | #C8281C | Primary buttons | 5.6:1 white on red |
| color.red-brand | #FF4536 | Accents only — never behind text | — |
| color.ok (new) | #15803D | Savings, delivery dates | 5.0:1 on white |
| color.muted (new) | #595959 | Secondary text, unit prices | 7.0:1 on white |
| color.bg | #F5F5F5 | Page | — |
| tier colors | #1B2366 · #D8202A · #E89A12 · #151515 | MERV 8 · 11 · 13 · Carbon labels (dark text on amber) | Labels ≥ 4.5:1 |
| type | Poppins 400–700 · 16 px base · 13 px minimum | All text | — |
| radius · target | 8 / 10 / 12 px · pill · 44 × 44 px | Controls / cards / panels · chips · every tap target | — |
Product page · How to buy
One-time by default, auto-delivery by choice
| Element | Spec |
|---|---|
| Radio group | purchase_type stays a native radio pair inside a fieldset with legend "How to buy". On load, one-time is checked — never subscription. |
| Options | "One-time purchase · Pay once, reorder when you like · $47.94" and "Auto-delivery · save 5% · Pause, skip or cancel anytime · $45.54". No struck-through price in either. |
| Frequency | Shown only when auto-delivery is chosen, outside the radio row (no control nested in a radio): "Deliver every [3 months ▾]" — 1, 2, 3, 6, 12 months; 3 is the default. |
| Persistence | Choice survives quality and pack changes; totals recompute from the ladder. |
| Cart line | Shows "Auto-delivery every N months · 5% off" only when chosen; checkout repeats it beside the order total. |
| Edge cases | Custom sizes not eligible → hide the auto-delivery option and say why in one line. Returning subscriber → "You already get this size every 3 months" with a manage link. |
| Acceptance | Fresh load: one-time checked. Adding to cart without touching the group never creates a subscription. |
Product page · Price ladder
Per-filter price must fall as quantity rises
| Element | Spec |
|---|---|
| Rule | For every size × quality, each tier's per-filter price is strictly lower than the tier below it, and each tier's total is higher. A nightly check over all pages flags violations (today: 16x25x1 MERV 13 12+ at $8.08 vs 6+ at $7.99; Carbon 2-pack total $43.98 vs 4-pack $34.28). |
| Options | Pack cards (radio group): "6-pack · $47.94 · $7.99 each · 74% less each". Single filter shows its price only. |
| Badge | Replace "74% OFF" with "$7.99 each in a 6-pack — 74% less than buying one". No <s> or <del> price unless a real former selling price exists. |
| 12+ | Link to bulk pricing until the 12+ tiers pass the rule. |
| Accessibility | Savings text #15803D (5.0:1); unit prices #595959; arrow keys move between packs. |
Product page · Phone sticky bar
Name the item, the mode and the action
| State | Bar shows | Button name (screen reader) |
|---|---|---|
| One-time (default) | "6 filters · One-time · $47.94" + "Add to cart" | "Add to cart, 6 filters, $47.94" |
| Auto-delivery | "6 filters · Every 3 months · $45.54" + "Start auto-delivery" | "Start auto-delivery every 3 months, 6 filters, $45.54" |
| Adding | Button reads "Adding…", width locked, aria-busy="true" | Announces "Added to cart" in a polite live region |
| Chat widget | Raised 80 px so it never covers the bar or the product name | — |
Size finder
Labeled, empty by default, first on the page
| Element | Spec |
|---|---|
| Fields | Three labeled selects — "Width (in)", "Length (in)", "Depth (in)" — empty by default instead of 20 × 20 × 1; fractions as a second select labeled "Width fraction". |
| Button | "Find my filter" (#C8281C). Enter submits. Missing field → inline "Choose a width" under that field, focus moves to it. |
| Help | "How to measure your filter" opens an inline panel: nominal vs actual size, round up to the nearest inch. |
| No match | "We make 16.25 × 24.75 × 1 to order" with a custom-size link and its lead time. |
| Acceptance | Lighthouse reports no unlabeled form elements; at 390 × 844 the button sits above 844 px. |
Homepage
Finder, sizes, need, proof
| Order | Section | Spec |
|---|---|---|
| 1 | Hero | H1 "Your exact filter size, delivered when you need it." + the size finder; photo moves right on desktop, drops on phones. |
| 2 | Proof tiles | Free 1–2 day shipping · 30-day money-back · Every size, even custom · one review number with its source. |
| 3 | Most-bought sizes | 12 chips from sales data + "All sizes and custom"; the full grid moves to the sizes page. |
| 4 | Shop by need | Everyday dust → MERV 8 · Pets → MERV 11 · Allergies and asthma → MERV 13 · Smoke and odors → Carbon, each with a per-filter "from" price. |
| 5 | Compare quality | A four-row table: captures, efficiency, FPR/MPR — same names as the boxes. |
| 6 | Auto-delivery | Three steps: pick a schedule, save 5%, pause/skip/cancel anytime — "off until you turn it on". |
| 7 | Reviews + delivery | One rating with three verified quotes; "Ships from 4 US warehouses"; bulk and business link. |
| 8 | Signup | "Get $10 off your first order" moves from the popup into the footer; the popup, if kept, waits for 50% scroll or exit intent. |
Structured data: generate SKU, description and URL per quality (the MERV 11 page currently carries SKU "FK16x25x1-M13" and a "Viruses" claim).