Brand colors, typography, component patterns, voice, and photography guidelines extracted from innovativepetholdings.com. Use this as the reference for all design and development work on Elementary Pet Foods.
Extracted October 20263 typefaces confirmedFull color systemWarm-first brand
01 - Core brand colors
Warm, earthy, light-first brand. Innovative Pet Holdings uses warm cream and white as the dominant content surfaces, with Dark Brown anchoring nav and structural elements. Gold (#dcb676) is the primary CTA accent; Amber (#c1955d) handles hover states and secondary warmth. The palette reads natural, wholesome, and trustworthy - aligned with the clean-ingredient positioning.
IPH Gold
#dcb676
RGB 220, 182, 118
Primary brand accent. CTA buttons, active nav underlines, highlights, and key interaction moments.
Secondary text. Footers, metadata, supporting copy where full brown weight is too heavy.
02 - Functional & UI colors
These colors carry semantic meaning across the UI. Brown is the anchor text color rather than pure black, which maintains warmth and avoids the clinical look of high-contrast black-on-white.
Text Primary
#4c423a
RGB 76, 66, 58
Headings, card titles, primary UI labels. Warm brown rather than neutral black.
Text Secondary
#686e77
RGB 104, 110, 119
Body copy, card descriptions, metadata. Slightly cool-shifted gray for readability.
Brown Overlay
rgba(77,65,57,0.76)
Brown at 76% opacity
Image overlays, hero section text backgrounds, darkening of lifestyle photography.
Consistent opacity steps for backgrounds, hover states, and overlays.
IPH Gold (#dcb676)
6%
12%
25%
50%
75%
100%
Dark Brown (#4c423a)
6%
12%
25%
50%
75%
100%
White (#FFFFFF)
5%
10%
25%
50%
75%
100%
04 - Color ratio
Warm-first brand. Cream and White dominate the content layer; Dark Brown is the structural anchor; Gold drives CTAs and accent moments; Amber marks hover states and secondary warmth.
WCAG 2.1 compliance targets. All primary text and background combinations must pass AA (4.5:1 for normal text, 3:1 for large text). Warm brand colors require extra care on light backgrounds.
Combination
Sample
Ratio
Level
Dark Brown on Cream
Body text
9.8:1
AAA
Dark Brown on White
Card heading
11.1:1
AAA
White on Dark Brown
Nav links
11.1:1
AAA
Dark Brown on Gold
Shop Now!
4.9:1
AA
White on Amber
Learn More
3.1:1
AA Large
Text Secondary on Cream
Description
4.6:1
AA
Gold on Dark Brown
Accent text
4.8:1
AA
06 - Typography
Three Google Fonts defining the brand personality. Rubik (400 weight, uppercase) provides structural boldness for H1 and H2 - big, clean, modern. Great Vibes (handwriting script) injects warmth and personality at H3 level, creating a contrast pair that is central to the visual identity. Karla handles all body copy, UI text, and buttons with clean readability.
H1 Display: Rubik 400, Uppercase
Elementary
font-family: 'Rubik', sans-serif • font-weight: 400 • 5.88rem on site (desktop) • text-transform: uppercase • line-height: 1em • Used for hero display headlines and major section banners
H2 Section: Rubik 400, Uppercase
Why Cold-Pressed?
font-family: 'Rubik', sans-serif • font-weight: 400 • 3.82rem on site • text-transform: uppercase • line-height: 1em • Major section headings throughout the site
H3 Script Accent: Great Vibes 400
Simple, Authentic, Nutrition
font-family: 'Great Vibes', cursive • font-weight: 400 • 2rem on site • line-height: 1em • Script accent used to create warmth and contrast alongside bold Rubik headings - a signature brand pairing
Cold-pressed at ambient temperature - never high heat - so the heat-sensitive nutrients, natural enzymes, and delicate vitamins your dog needs stay intact from ingredients to bowl. No corn, soy, wheat, seed oils, or artificial additives. Just real food, done right.
font-family: 'Karla', sans-serif • font-weight: 400 • 1rem / 17px • line-height: 1.7 • All body copy, descriptions, paragraph text
Elementary Pet Foods speaks with the passionate conviction of founders who believe they have genuinely solved something the industry got wrong. Direct, science-backed, and confident - but warm and accessible. They lead with the benefit and back it with the data.
Core taglines (trademark)
"There's Nothing Like It!™"
"The Innovation Factory for Pet Foods™"
"Benefits Beyond Food™"
"Feed Less / Waste Less™"
"Simple, Authentic, Nutrition"
"Extend the Love"
"Truly Cold Pressed"
CTA language
Short, direct, action-oriented:
Shop Now! Learn More Take the Watson Challenge Click Here More Info Read More
Voice rules
Lead with the science claim, then explain it: Our food is healthier for your dog
→ Feed 30% less for equivalent nutrition. Same dog. Less food. Less waste.
Use specific numbers and data: Cold pressing uses less energy
→ ~900 metric tons CO2 avoided annually at 10,000 tons production vs. extrusion.
Never say "fluff." Avoids confusion and industry jargon.
Proof language patterns
The brand builds trust through specifics:
AAFCO Method 1 digestibility trials completed - not just "AAFCO approved"
Published white papers + industry studies referenced on Proof Pawsitive page
30% fewer trucks, ~$67,500 freight savings per 100 loads vs. extruded
Watson Challenge - free sample, side-by-side bowl test - palatability proof built into the customer journey
Elementary Pet Foods • The Innovation Factory for Pet Foods™
There's Nothing Like It!™
Simple, Authentic, Nutrition
Product cards
Chicken & Superfoods photo
Chicken &
Superfoods Recipe
Crude Protein min: 28% Crude Fat min: 14% Caloric Content: 3660 kcal/kg As Fed: 609 kcal/cup AAFCO: All Life Stages
Shop Now
Salmon & Superfoods photo
Salmon &
Superfoods Recipe
Crude Protein min: 30% Crude Fat min: 10% Caloric Content: 3490 kcal/kg As Fed: 580 kcal/cup AAFCO: All Life Stages
Shop Now
Benefit icon grid (homepage feature row)
Ingredient Integrity
Feed Less / Waste Less™
Made in USA
Science-Backed
Sustainability
Extend the Love
Cold Pressed
AAFCO Verified
Button styles
Primary (Gold CTA)
Secondary (Outline)
Ghost
Text Link
09 - Photography & imagery
Innovative Pet Holdings uses warm lifestyle photography centered on happy dogs, real ingredients, and nature. The visual system is built to feel authentic - not clinical, not stock-y. Photography is integral to the "natural food" positioning.
Happy dogs lifestyle
Use
Dogs interacting with the product naturally - eating from bowls, running, playing. Authentic, joyful, real-life moments. Watson (the brand dog) is a central character.
Ingredients / food prep
Use
Clean, close-up shots of whole ingredients - real chicken, salmon fillets, superfoods. Dark food photography style on warm surface materials. Reinforces ingredient integrity messaging.
Product packaging
Use
Product bag photography showing the resealable, recyclable packaging. 100% recyclable bags are a brand differentiator - feature them prominently. Dog breed imagery on packaging.
Generic stock imagery
Avoid
Generic stock photos of dogs or people with no brand connection. Studio-white clean product shots that feel clinical. Over-produced imagery that contradicts the authentic, founder-built brand story.
10 - Decorative elements
The brand uses a small set of decorative elements that reinforce warmth, playfulness, and natural positioning. These are not overused - they serve as section breaks and visual texture rather than primary design elements.
Houndstooth divider pattern
A houndstooth micro-pattern in Dark Brown / Cream appears as a horizontal divider between page sections. It connects to the dog/pet theme while adding visual interest without photography. Use at low opacity (40-60%) to avoid visual noise.
Great Vibes script accent usage
Simple, Authentic, Nutrition
Extend the Love
The Great Vibes script is reserved for emotional, brand-defining phrases - never for navigation, buttons, or informational text. It pairs with Rubik uppercase headings to create the signature warm-authority contrast. Use sparingly: one per major section maximum.
Icon system
The site uses a custom icon system for the benefits grid - each benefit gets a clean outline SVG at 40x40px with a rounded border. Icons use the Amber (#c1955d) color on a soft Gold dim background (rgba(220,182,118,0.12)). Stroke weight 1.8px, 24x24 viewBox, rounded linecap/linejoin. The same style extends to navigation icons and UI controls.
11 - Spacing scale
--sp-14pxIcon gaps, tight inline spacing
--sp-28pxCard internal padding tight, chip gap
--sp-312pxCard padding, benefit cell padding
--sp-416pxStandard card padding, body gutter
--sp-624pxPage gutter, section spacing
--sp-832pxSection padding, card grid gap
--sp-1248pxHero vertical padding, section margin
--sp-1664pxMajor section breaks, hero to first content