Medium Adult Dry Dog Food
· Auto-order eligible — save 10% on every delivery
Component
Lab
Brand tokens · sampled from absolutepets.com
Lifted directly off the logo (navy + coral-red dot), the Auto-order banner (coral-red “SAVE”), and the Pet Parent Loyalty pill (sage on navy).
Display · Router Medium
34 products match Max’s profile.
Router Medium for structural headings. Italic routes to Figtree — mirrors the brand's own upright/italic split.
Body · Figtree
Max’s profile: a 4-year-old medium-breed dog with a sensitive stomach and no known allergies. We’ve found 34 products across 12 brands that fit — sorted by how well they match, not by who pays us the most.
Warm, readable, modern without feeling tech-forward.
Button · variants & sizes
Primary (navy) for “Start your pet’s profile” and every quiz step. Commerce (coral) for “Add to basket” and “Continue to Absolute Pets” — matching the red “FIND OUT MORE” on the live site. Sage for Pet Parent Rewards moments.
Badge · section anchors & match chips
Product card · the results page in miniature
Brand stays prominent — the customer picks it. Match reasons prove the quiz paid attention. Price is a “from” anchor until hand-off.
· Auto-order eligible — save 10% on every delivery
· Auto-order eligible — save 10% on every delivery
Card · five surface variants
Flat
Default wrapper. Sits on the page without pulling focus.
Elevated
Warm navy-tinted shadow. Used for the quiz step card itself.
Interactive
Hover me — lifts 1px, border warms to navy-200.
Selected
Navy border + ring. The quiz answer the customer just tapped.
Warm
Paper-deep fill. For profile summary blocks.
ProgressBar
SingleSelect & MultiSelect
Question 13 of 17
Tick anything that applies — we’ll use this to narrow the match list.
HealthFlagGrid
Selected: sensitive-stomach
FilterPanel primitive
Price brackets: Under R300 / R300–R600 / R600+
Dry / Wet / Mix / Raw toggles.
Boolean toggle. Light auto-order merchandising boost.
Assembled in /results
The full results-page sidebar composes these sections.