House Pet Authority
Brand and design system.
Everything the site looks, sounds, and behaves like, in one place. Every sample on this page is rendered with the site's real tokens and components, so if it looks right here, it is right everywhere.
The mark
A house with a paw print living inside it: the whole premise in one shape. The mark is a single-color silhouette that renders in currentColor, so it inherits whatever brand color its context sets and never needs a special dark-mode version.
Primary
Raspberry on light surfaces
Ink
When raspberry is already busy nearby
Reversed
Raspberry-300 or white on dark surfaces
Rules
- Minimum size 20px; below that, the paw closes up.
- Clear space around the mark equals the height of the paw's center pad.
- One color at a time. Never gradients, outlines, shadows, or a second hue inside the mark.
- Never rotate, stretch, or place over photography without a solid tile behind it.
- The favicon is the mark in raspberry on the cream tile, and nothing else.
Color
Three tiers, three jobs. Primitive ramps are literal hex and never change with the theme. Semantic tokens are CSS variables that swap between light and dark mode. The verdict system is a separate, functional namespace for safety signals only.
Raspberry, the brand hue
Identity, primary actions, headers, links. 600 is the AA body-text link color on white (5.7:1).
- 50
#FFF0F6
- 100
#FFD6E7
- 200
#FFA6C8
- 300
#FF6FA5
- 400
#F53D86
- 500
#E6196F
- 600
#C7135E
- 700
#A10E4C
- 800
#7A0B39
- 900
#520725
Tangerine, the accent
Highlights, playful moments, secondary chrome. 600 passes AA only at large sizes; small text uses raspberry-600 instead. Never beside a verdict badge.
- 50
#FFF3EA
- 100
#FFDDC2
- 200
#FFBE91
- 300
#FF9D5C
- 400
#FF7A2E
- 500
#F2610F
- 600
#D14E08
- 700
#A83E06
- 800
#7E2F06
- 900
#522004
Warm stone, the neutrals
Borders, secondary text, dark-mode surfaces. Warm on purpose; pure gray reads clinical.
- 50
#F6F1EE
- 100
#E9E1DC
- 200
#D8CCC5
- 300
#C4B6AC
- 400
#A99C94
- 500
#8A7D74
- 600
#6B5D55
- 700
#55483F
- 800
#3A322D
- 900
#241E1A
The verdict system is not brand color
Safety signals are literal hex, identical in both themes, AA-verified against their own label text. The rule runs both directions: raspberry and tangerine never signal safety, and green, amber, and red never appear as brand chrome.
- Safe
- Caution
- Toxic
- Emergency
Typography
Two families, loaded once through next/font: Bitter carries warmth and authority in headings; Figtree keeps body copy and interface text friendly and legible.
Bitter carries the headline.
Bitter also holds card titles and section heads.
Figtree carries every paragraph, label, and button. It stays at 16px with relaxed leading for body copy, because most readers are on a phone with one hand free and half their attention on a pet.
Figtree eyebrow, bold and wide
| Role | Family | Treatment | Used for |
|---|---|---|---|
| Display and headings | Bitter (serif) | Semibold, tight leading, slight negative tracking | Page titles, section headings, card titles |
| Body and UI | Figtree (sans) | Regular 16px, leading 7 | Paragraphs, navigation, buttons, forms |
| Eyebrows and labels | Figtree (sans) | Bold, 11 to 12px, uppercase, wide tracking | Section eyebrows, category labels, table headers |
| Fine print | Figtree (sans) | 12 to 13px, muted color | Timestamps, disclosures, captions |
Punctuation rule, enforced by a build audit: no em or en dashes anywhere. Use a spaced hyphen, a comma, or a period instead. Numbers over 999 take commas. Sentence case everywhere except eyebrows.
Voice and writing
The voice is a knowledgeable friend at the kitchen table: warm, plain, and specific. It explains without lecturing, cites its sources, and never dresses a simple idea in system language.
Not this
Begin with the question in front of you. You should not have to know which editorial department owns your problem.
This
Start with your question. Something they ate, something they keep doing, something you need to buy.
Nobody thinks in editorial departments. Write the way a helpful friend talks.
Not this
Leverage our comprehensive knowledge base to optimize your pet care journey.
This
Find a clear answer, sourced from veterinary authorities, in about a minute.
Say what actually happens, in words people use out loud.
Not this
In our testing, this crate outperformed the competition.
This
We researched this crate against published sizing guidance and owner-reported issues.
We research and analyze. We never claim first-hand testing that did not happen.
Writing rules, all build-enforced or policy
- We researched and analyzed; we never claim to have tested, tried, or used a product first-hand.
- Every safety or health claim cites a published veterinary authority. Nothing is inferred.
- Positive positioning: say what the site does and proves, not what competitors get wrong.
- Plain language: short sentences, everyday words, observable descriptions of animal behavior.
- No personal medical bylines. Editorial credit belongs to House Pet Authority.
The four ways our copy goes wrong
Every robotic sentence we have shipped falls into one of these. Name the pattern, then rewrite. The build audit blocks the worst offenders automatically.
Scoring-speak
Sounds like: Receives more weight. Will not influence the ranking. Moderate published energy.
Fix: Say what we do with the answer: We will favor breeds known for patience with kids.
System language
Sounds like: Editorial department, research order, why it surfaced, decision-grade, coverage.
Fix: Internal vocabulary stays internal. Readers get kitchen-table words: why it made your list.
Defensive credentials
Sounds like: Source-cited safety answers. Non-diagnostic informational content.
Fix: Keep the proof, change the register: everything here is checked against real veterinary sources.
Negative positioning
Sounds like: Not five promises. Not a shopping list. We never guess.
Fix: Say the good thing directly: five breeds worth meeting. Meet them before you decide.
Register by context
One voice, five volumes. The friend at the kitchen table sounds different reading a poison verdict than recommending a harness.
Food safety verdicts
Calm and direct. Short sentences. The verdict first, the reason second, the veterinary escalation always visible. No softening on Toxic or Emergency, and no drama either.
Health guides
Steady and reassuring. Describe what the reader can observe and when to call a veterinarian. The words carry the urgency so the page does not have to.
Behavior and everyday guides
Warm and companionable, like a friend who has done the reading. Plain descriptions of what the animal does, never an invented inner monologue.
Shopping and picks
Honest and concrete. Fit, tradeoffs, and buying criteria in plain words. Enthusiasm is allowed; hype and urgency are not.
Tools and results
Encouraging and personal. Speak to the reader's answers (you asked for, we lean toward) and always hand the judgment back to them.
Words we trade in
| Instead of | Say |
|---|---|
| utilize, leverage, optimize | use, help, make better |
| comprehensive, robust, seamless | complete, sturdy, easy |
| receives more weight | counts for more, we will favor |
| the ranking, the algorithm | your list, your matches |
| research shortlist, research order | breeds worth meeting, your shortlist |
| published trait ledger | AKC trait scores |
| your pet care journey | life with your pet |
Imagery
Editorial photography
Bright, warm, natural light. Clean, minimal composition with generous negative space. Healthy animals in lived-in homes, calm or happily active, never staged or clinical. Raspberry and tangerine appear naturally in props, textiles, or light, never as a filter. Plumage, coats, and breeds vary across a set; no golden-retriever and orange-tabby monoculture.
Product photography
Product photos are always real: retailer-supplied or licensed images on true-white stages. Generated imagery is never used for a product, and editorial art never renders a specific product it could be mistaken for.
Health and safety subjects
Calm, neutral framing only. A dangerous-food image shows the food safely out of reach, never a pet near it. No distress, no gore, no drama. The photo lowers the reader's heart rate; the words carry the urgency.
Illustration
Flat, friendly spot illustrations with bold outlines and brand-palette fills, reserved for wayfinding moments like the homepage question cards. Illustration signals navigation; photography signals content.
Layout and spacing
Containers
Content sits in a max-w-6xl column (max-w-5xl for long-form reading) with 20px side padding on mobile and 32px from the small breakpoint up. Full-bleed color bands break the rhythm between content sections.
Corner radius
Generous and consistent: cards at 1.5 to 1.75rem, hero shells at 2rem, buttons and pills fully rounded, small inline elements at 0.5rem. Sharp corners appear nowhere.
Elevation
One border plus at most one soft, warm-tinted ambient shadow. No stacked shadows, no glows. Dark mode leans on borders over shadows.
Touch targets
Interactive elements are at least 44px tall on touch screens. Dense desktop link lists (footer columns, index lists) compact to roughly 30px rows from the small breakpoint up; primary actions stay 44px everywhere.
Components
Actions
One primary action per view. Labels are verbs that say what happens: Check a food, Compare flight cages, Set the feeding plan.
Verdict chips, the inline treatment
Chips are the softer treatment for search results and category tags. Full badges appear on verdict pages, where Toxic and Emergency verdicts also show the ASPCA Poison Control banner and veterinary escalation.
Callout
Callouts hold one practical aside. Key-takeaways blocks close every guide with the same surface treatment and a bold label.
Cards
Cards are links in their entirety, with a border that warms to raspberry on hover, a serif title, muted supporting text, and a bold tertiary link pinned to the bottom. Product cards add a true-white image stage so retailer photos sit on a consistent background.
Motion
Motion is a whisper: arrows nudge 4px on hover, images scale 2.5% over half a second, cards warm their borders. Every animation sits behind motion-safe, so reduced-motion users get a perfectly calm site. Nothing autoplays, loops, or moves without a hover or press.
Accessibility
- WCAG 2.2 AA is the floor. Text contrast pairs are chosen from the ramps above and verified, not eyeballed.
- One main landmark and one H1 per page, headings in order, every control named.
- Visible focus rings on everything interactive, using the ring token, never suppressed.
- Both themes are first-class: every surface is designed and checked in light and dark mode.
- Images carry descriptive alt text written for someone who cannot see the page; decorative art is hidden from assistive tech.
- The site works at 200% text size and 320px width with no horizontal scrolling.
Safety rules that outrank everything above
- No dosage, treatment, or diagnosis content, ever. No medication numbers of any kind.
- Every food verdict cites at least one published veterinary authority.
- Toxic and Emergency verdicts always show ASPCA Poison Control, (888) 426-4435, and say contact your veterinarian.
- No products are sold or promoted on Toxic or Emergency pages.
- Health pages carry the veterinary disclaimer. Informational content is never veterinary advice.
If a design choice and a safety rule ever conflict, the safety rule wins, then we design something better.
Questions about the system, or the sources behind it? Read our methodology.