01 · Primary — Teal Brand Family

★
Deep Teal
#236f6b
Headers, Nav, Footer
★ LOGO
Brand Teal
#38a99f
Logo, Primary Buttons, Links
Soft Teal
#8dd5d1
Hover States, Icons, Tags
Teal Mist
#e8f7f6
Backgrounds, Cards, Section Fills

02 · Accent — Warmth & Energy

Sunny Amber
#f4a13a
CTA Buttons, Sale Banners, Highlights
Amber Cream
#fde8c8
"New" Tags, Promotional Chips
Playful Coral
#f2705a
Alerts, Discount Badges, Wishlist
Coral Blush
#fce0da
"Sale" Tag Fills, Error Backgrounds

03 · Neutrals — Structure & Readability

Forest Black
#1a2e2d
Body Text, Dark Mode BG
Moss Grey
#3d5554
Subheadings, Secondary Text
Sage Mist
#8aa9a8
Placeholders, Borders, Labels
Ice White
#f0f8f7
Page Background, Card BG

04 · Usage Guide

### 🖥 Navigation & Header

Deep Teal #236f6b background with white text. Logo in Brand Teal on light pages.

### 🛒 Primary CTA Buttons

Sunny Amber #f4a13a — "Add to Cart", "Shop Now". Creates contrast & urgency.

### 🏷 Sale & Discount Badges

Coral #f2705a on Coral Blush background. High visibility without harsh red.

### 📦 Product Cards

White card on Ice White #f0f8f7 background. Teal border on hover.

### 📝 Typography

Forest Black #1a2e2d for body. Deep Teal for headings. Sage Mist for metadata.

### 🐶 Category Sections

Alternating Teal Mist #e8f7f6 and White sections for rhythm and visual flow.

05 · Live UI Preview

## Everything Your Pet Deserves

Premium food, toys & accessories — curated with love for your furry family.

🦴
NEW

#### Dog Treats

KES 850
🐱
SALE 20%

#### Cat Toy Set

KES 640
🐦

#### Bird Cage

KES 3,200
🐟
NEW

#### Fish Food

KES 420

06 · Recommended Font Pairing

Display / Headings
Fraunces
Serif

Warm, playful, trustworthy. Perfect for hero text and product names.

Body / UI Text
DM Sans
Clean Sans-Serif

Legible, modern, friendly. Great for body copy, buttons, and labels.