Internal Reference
Brand Assets
Design reference and brand guidelines for Petorio. Use this page to ensure visual consistency across all touchpoints.
Logo
Both logo variants share the same structure: dark ink text + orange paw accent. Use on light/white backgrounds only.
Header Logo
File: /logo-header.svg
Use: Header navigation bar (white/light backgrounds)
Footer Logo (on dark)
File: /logo-footer.svg
Same SVG, shown here inverted on dark for contrast reference
Text Color
#222222
Accent Color
#FA8112
Color Palette
Orange is the sole accent color. All backgrounds are light/warm. No dark sections on the landing page.
Orange (Primary)
#FA8112
bg-orange
CTA buttons, accents, highlights
Orange Hover
#E06F00
bg-orange-hover
CTA button hover state
Ink (Text)
#222222
text-ink
Primary text, headings
Ink Secondary
#555555
text-ink-secondary
Body text, subtitles
Cream (Background)
#FAFAF8
bg-cream
Warm section backgrounds
Sand (Background)
#F5F5F3
bg-sand
Card backgrounds, placeholders
Surface (White)
#FFFFFF
bg-surface
Cards, modals, header
Typography
Plus Jakarta Sans is the only typeface used. No serif fonts. Clean, modern, editorial.
Font Family
Plus Jakarta Sans
Loaded via Google Fonts — sans-serif only
Font Weights
Heading Scale
H1 Hero — 3.5rem extrabold
H2 Section — 2rem bold
H3 Subsection — 1.25rem bold
Body text — 1rem regular, ink-secondary, relaxed leading
Small/caption — 0.875rem, reduced opacity
Art Styles
Four art styles, each with lifestyle images (owner + pet + artwork on wall) and example portraits.
Renaissance
Style key: renaissance
Lifestyle: /lifestyle/renaissance.webp
Examples: /examples/renaissance/dog.webp
/examples/renaissance/cat.webp
Barock / Baroque
Style key: barock
Lifestyle: /lifestyle/barock.webp
Examples: /examples/barock/dog.webp
/examples/barock/cat.webp
Impressionismus / Impressionism
Style key: impressionismus
Lifestyle: /lifestyle/impressionismus.webp
Examples: /examples/impressionismus/dog.webp
/examples/impressionismus/cat.webp
Pop Art
Style key: pop-art
Lifestyle: /lifestyle/pop-art.webp
Examples: /examples/pop-art/dog.webp
/examples/pop-art/cat.webp
Design Principles
Core rules that define the Petorio aesthetic.
Light & Warm Editorial
All sections use light/warm backgrounds (#FAFAF8, #F5F5F3, #FFFFFF). No dark-themed sections on the landing page.
Orange as Sole Accent
Only #FA8112 orange is used for CTAs, highlights, and accents. No gold, no blue, no secondary accent colors.
Sans-Serif Only
Plus Jakarta Sans exclusively. No serif fonts (no font-serif-display on new sections). Clean, modern, editorial.
Lifestyle Photography
Hero images show a pet owner with their pet and an artwork on the wall. Gemini AI generated. 1024x1024 WebP format.
Minimal Animations
Framer-motion with whileInView + opacity/y fade-in. Subtle scale on hover. Staggered by index * 0.1. Never distracting.
No Broken External Images
Critical sections (HowItWorks) use only inline SVG icons. /lifestyle/ WebPs for showcase. /examples/ only in non-critical contexts.