Planning Document
Design System
Brand colors, typography, and design tokens sourced from genpet.org and adapted for WCAG accessibility. This document is the source of truth for all Generation Pet mockups.
Brand Palette
Forest
#163C2B
Primary dark / nav
Meadow
#2D7A50
Primary action / CTA
Fern
#5BAA7A
Accent / hover states
Mint Tint
#EBF5EF
Tag backgrounds
Harvest
#D07D1A
Warm accent / alerts
Bark
#1B2118
Body text
Sage
#4F6355
Secondary text
Frost
#F0F7F2
Page background
Sage Border
#C6D9CC
Borders / dividers
White
#FFFFFF
Card surface
WCAG Color Pairings
White on Forest
White / Forest
AA — 11.2:1
AAA
Navigation, hero backgrounds, footer
White on Meadow
White / Meadow
AA — 5.1:1
AA Large only
Primary buttons, links on dark BG
Forest on Mint Tint
Forest / Mint Tint
AA — 9.8:1
AAA
Status badges, tag chips
Bark on White
Bark / White
AA — 16.1:1
AAA
Body text on cards
Meadow on White
Meadow / White
AA — 5.1:1
Body text — use 14px+
Link text, icon accents on cards
Fern on Forest
Fern / Forest
AA — 4.6:1
Large text preferred
Nav active state, portal accents
Typography
Your most reliable
wholesale partner.
wholesale partner.
85+ Premium Brands — Two Warehouses — Real-Time Inventory
Place Order
Browse Catalog
In Stock
Generation Pet distributes 85+ premium brands to independent pet retailers across the Northeast. With real-time inventory across two fulfillment centers and same-week shipping, we help you stock what sells without the guesswork.
CSS Design Tokens