A WGSN-inspired palette on minimal Airbnb-style glass — paired with the FluffyPet display voice (Bricolage Grotesque 800) and an ink-led action system. Built mobile-first for the emotional bond between people and their animals.
01 — Philosophy
Emotional first
Pets are family. Every hue carries a feeling — trust, play, affection, health, home — never decoration.
One hue per surface
60% neutral, 30% one brand hue, 10% accent. Never mix more than two brand hues in a single component.
Persona-tuned
Vets lean Blue+Green. Shelters lean Clay+Green. Owners lean Blue+Pink. Same system, different temperatures.
02 — Palette
Extracted from the FluffyPet brand image. Each color has a base, a soft tint (for surfaces) and a deep variant (for text + small marks on light backgrounds). Use semantic tokens — never the raw brand vars inside product code.
Luminous Blue
#1F4CFF
Info · links · medical reference
Vets · clinics · admins
oklch(0.52 0.24 268)
Energy Orange
#FF6A2A
Play · warmth · appetite
Shops · owners · activity
oklch(0.70 0.20 45)
Pop Pink
#FF8FBF
Affection · bonding · social
Owners · breeders · community
oklch(0.78 0.16 350)
Meadowland
#9BB24A
Wellness · nature · growth
Nutrition · outdoors · NGOs
oklch(0.72 0.13 120)
Clay
#B86B55
Comfort · home · earthy trust
Shelters · hostels · NGOs
oklch(0.58 0.11 35)
Calm + Spark
Luminous Blue + Energy Orange
Trust grounds the action; orange invites the tap. Default CTA pair.
Bond + Home
Pop Pink + Clay
Affection on an earthy frame — perfect for breeder & adoption stories.
Field + Hearth
Meadowland + Clay
Outdoor wellness meets shelter warmth. NGO and outdoor-living surfaces.
Clinic + Calm
Luminous Blue + Meadowland
Medical clarity with a living pulse. Vet dashboards & health records.
Heart + Head
Pop Pink + Luminous Blue
Owner emotion balanced by reliable structure. Profile + appointments.
Ink
--primary
Default CTA — high-trust action
Energy Orange
--accent
Playful CTA, adoption
Luminous Blue
--info
Links, vet/medical, info
Meadowland (deep)
--success
Confirmations
Pop Pink
--affection
Favorites, social
Clay
--earth
Shelter, editorial
Orange
--warning
Soft warnings
Red
--destructive
Destructive only
03 — Geometry
Spacing scale (φ-informed)
Radius scale & concentricity
inner = outer − padding · outer=32 padding=16 → inner=20
Golden ratio composition (φ ≈ 1.618)
04 — Typography
Display is Bricolage Grotesque 800 — a chunky, slightly humanist grotesque that gives the brand its emotional punch. UI text stays on Inter 400–600 so density never fights the headline.
Display · Bricolage 800
Care for animals.
Whether they're yours or not.
display-xl · display
84px · 800
display-lg · display
56px · 800
text-4xl · display
40px · 700
text-2xl · display
28px · 700
text-xl · display
22px · 600
text-lg · text
18px · 500
text-md · text
17px · 400
text-base · text
15px · 400
text-sm · text
13px · 500
text-xs · text
11px · 600
05 — Surfaces
The homepage proved a rule: emotional pages need a big rounded brand-hue canvas, not a full-bleed white page. Canvases live inside the safe-area, carry the chunky display, and host an ink CTA. One canvas per screen — never stack two.
Green (default)
Care for animals.
Pink
Care for animals.
Orange
Care for animals.
Blue
Care for animals.
Clay
Care for animals.
Cream
Care for animals.
Rules
12–16px from the viewport on mobile, more on desktop.--radius-2xl (40px) — concentric with inner cards at 20–24.--foreground, never tinted.--primary (ink). Secondary is solid white.06 — Mobile-native
99%+ of FluffyPet sessions are on a phone. Every layout starts at 360–414 wide, uses safe-area insets, 44pt tap targets, glass tab bar, bottom sheets, and a sticky CTA dock. Desktop is a centered version of the same shell — never the source of truth.
Hi, Aanya
Care, together
Care for animals.
Mochi
Vaccine due
Biscuit
Adoptable
Pepper
Checkup
Safe area
.safe-top · .safe-bottom · .safe-xWraps notch, dynamic island, and home indicator on iOS.
Tap target
.tap-targetMin 44×44px. Apply to every icon button, chip, tab.
Tab bar
.tab-barFixed bottom, glass-regular, safe-area aware. 4–5 destinations max.
Bottom sheet
.sheet · .sheet-handleTop-radius 40px, slide-up, 36×4 handle. Replace desktop modals.
Sticky CTA dock
.cta-dockPersistent primary action above the tab bar with fade to bg.
Press feedback
.pressablescale(0.97) + opacity on :active. Native iOS tap feel.
Thumb-zone
Primary actions live in the bottom 1/3 of the screen — reachable by thumb.
One H1 per screen
Display-lg, not display-xl, on mobile. xl is for splash/marketing only.
Lists over grids
Single-column scrollable feeds beat multi-column grids on phone.
07 — App shell
Inspired by Airbnb's unified header: FluffyPet offers Care (service providers), Community (people & NGOs), and Shop (e-commerce) — but the user never feels three apps. Logo left, account right, centered pill tabs, one search bar that morphs its fields per pillar. On scroll it collapses to a compact pill. On mobile it becomes a single search chip that opens a bottom sheet, with primary nav living in a fixed tab bar.
Desktop · scrolled (collapsed)
The whole search summary becomes a single tappable pill. Click to re-expand.
Mobile · compact pill + search sheet + tab bar
FluffyPet
Care, together
Book a vet visit
What are you looking for?
Pillar accents
Care = Meadowland Green · Community = Pop Pink · Shop = Energy Orange. Used only as a 3px tab underline — never as the CTA.
Search morphs, shell doesn't
Same rounded pill, same Ink CTA, same proportions. Only the fields change per pillar — like Airbnb's stays/experiences.
Mobile-first collapse
Phone shows just the compact pill + tab bar. Tapping opens a full bottom sheet with the same segmented control and stacked inputs.
07 — Materials
Regular Glass
Nav, sheets, cards
72% white, 20px blur, subtle 1px highlight.
Clear Glass
Over media
45% white, 12px blur — for photos, video, maps.
Never stack glass on glass. Confirmations and forms use opaque surfaces — glass is for navigation and discovery, not trust-critical actions.
08 — Motion
spring-snappy
0.30 / 0.85
Button press, tab switch
spring-default
0.45 / 0.85
Sheet, menu morph
spring-soft
0.55 / 0.90
Drawer, reveal
spring-bounce
0.50 / 0.70
Success, confetti
Apple defaults: response 0.5, dampingFraction 0.825. Reduce Motion → opacity crossfade, dampingFraction → 1.0.
09 — Iconography
10 — Components
Buttons — one per persona
Input
Visible on your public pet profile.
Status chips — semantic, not decorative
Toast
Saved to favourites
You can find Mochi in your favourites tab.
Pet card — tinted per context
Mochi
Shiba Inu · 2 yrs
$45 / visit
Biscuit
Golden Retriever · 5 yrs
$45 / visit
Pepper
British Shorthair · 3 yrs
$45 / visit
11 — Accessibility
Contrast
4.5:1 body, 3:1 ≥18pt or bold. Pink and Orange need -deep variants for text on white.
Reduce Motion
Springs critically damped, parallax removed, morphs → crossfade.
Reduce Transparency
Glass becomes opaque card surface, backdrop-filter dropped via media query.
3px ring · offset 2px · follows element curvature.
12 — Sub-theme
A scoped sub-theme applied via the .pet-profile-theme class on /pets/$id. Cream surfaces, espresso ink, clay + sage accents, Space Grotesk display + DM Sans body. Use the .pp-* utility classes inside the theme — do not leak these tokens outside the profile page.
Tokens
Page surface
--pp-cream
#FAF6F0
Card surface
--pp-cream-2
#F2EBDD
Ink / text
--pp-espresso
#1F1B16
Primary accent
--pp-clay
#E07A3C
Accent card
--pp-clay-soft
#FBE6D6
Wellness accent
--pp-sage
#2F6F5E
Wellness card
--pp-sage-soft
#D9E8E2
Alert / emergency
--pp-rose
#C4564B
Alert card
--pp-rose-soft
#F7DAD5
Hairline
--pp-line
#E6DFD1
Muted text
--pp-muted
#6E665B
Typography
Eyebrow · Space Grotesk
Body copy renders in DM Sans. Quiet, geometric, with generous line-height for long-form records and timeline content.
Muted note · DM Sans 14
Bento card variants
default
BentoCard
Cream-2 surface
accent
BentoCard
Clay-soft
sage
BentoCard
Wellness
rose
BentoCard
Alerts / emergency
Actions
PetProfileBento, BentoCard, AnchorNav, and the overview cards in src/components/pets/profile/. Scope every utility to .pet-profile-theme in src/styles.css.