Absolute Pets

Component

Lab

← LandingQuiz demo →Internal · build reference

Brand tokens · sampled from absolutepets.com

Navy carries the brand. Coral-red does the energy. Sage is the loyalty pill.

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).

Navy 500#12304A
Coral 500#D8322A
Sage 500#5C8C70
Paper warm#FBF8F3
Navy 50#EAEEF4
Coral 50#FFEDEC
Sage 100#D6E6DC
Ink 900#1C1B1A

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

Navy runs the advisor. Coral-red runs the cart.

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

NavyVet-trained staffCoralUnbiasedPet Parent RewardsAuto-order eligibleMistNeutral

Product card · the results page in miniature

34 products match Max’s profile.

Brand stays prominent — the customer picks it. Match reasons prove the quiz paid attention. Price is a “from” anchor until hand-off.

Our top match for Max
Combo · save 15%
Royal Canin· Dry

Medium Adult Dry Dog Food

Medium breedAdult formulaSensitive digestion
4kg10kg15kg
FromR480

· Auto-order eligible — save 10% on every delivery

Hill's Science Plan· Dry

Adult Sensitive Stomach & Skin

Sensitive digestionAdult formulaSkin support
3kg12kg
FromR420

· Auto-order eligible — save 10% on every delivery

Acana· Dry

Singles Lamb & Pumpkin Recipe

Novel proteinGrain-freeLimited ingredient
2kg6kg11.4kg
FromR715

Card · five surface variants

Five surface variants. Selected is navy, not coral.

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

Coral-red fill on a mist track.

Step 1 of 128%
Step 5 of 1242%
Step 9 of 1275%
Profile complete100%

SingleSelect & MultiSelect

One quiz step, two input patterns.

Step 1 of 128%

First things first — who are we feeding?

And how old?

Question 13 of 17

Any protein preferences?

Tick anything that applies — we’ll use this to narrow the match list.

HealthFlagGrid

Navy line-art tiles. Tap what fits.

Selected: sensitive-stomach

FilterPanel primitive

The results-page filter section unit.

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.

  • • Brand — derived from matched products
  • • Price range — Under R300 / R300–R600 / R600+
  • • Format — Dry / Wet / Mix / Raw
  • • Special diet — grain-free, novel protein, LID
  • • Auto-order eligible — boolean toggle