# Petfinn · Design system migration spec

> Source: https://petfinn.com  ·  Curated by OpenDesign  ·  en

> A strong example of a modern, friendly consumer brand that balances playful imagery with clean, professional design.

## 1. Identity DNA

Petfinn's design system operates with the straightforward warmth of a trusted local shop, where the architecture is clear and the atmosphere is welcoming. It pairs a friendly neighborhood sensibility with the disciplined clarity of a modern health brand, ensuring every interaction feels both approachable and reliable.

**One-liner:** A warm, accessible DTC brand for dog supplements using playful imagery and clean typography.
**Keywords:** pet health · dog supplements · friendly · approachable · trustworthy
**Analogy:** A friendly neighborhood pet store meets modern health brand.

## 2. Color

The palette is built on a foundation of contrast and warmth. A deep navy ink provides authoritative structure against soft pink and white backgrounds, while bright orange accents create clear focal points for interaction.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F9F9F9` | card background |
| `--bg-quiet` | `#F2E6EC` | quiet area |
| `--ink` | `#161345` | body text |
| `--ink-soft` | `#321004` | secondary text |
| `--muted` | `#999999` | placeholder |
| `--muted-soft` | `#EBEBEB` | weak hint |
| `--accent` | `#FF7F00` | single accent |
| `--line` | `rgba(235,235,235,1)` | divider |

**Color principle:** High-contrast dark blue ink on soft pink or white backgrounds, punctuated by energetic orange accents for CTAs and highlights.

The core principle is high-contrast legibility, using color not for decoration but for clear hierarchy and warmth.

## 3. Typography

Typography is split between two distinct voices: a bold transitional serif for headlines commands attention with traditional authority, while a clean geometric sans-serif handles body text for effortless readability.

- **Display:** transitional-serif
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 1.0 | 400 | -1px | Hero headlines and major section titles. |
| heading | 30px | 1.2 | 400 | 0.9px | Subheadings and prominent text. |
| body | 18px | 1.4 | 400 | 0.9px | Primary reading text and product descriptions. |

**Type rules:**
- Headlines use a bold transitional serif with tight tracking.
- Body text uses a clean geometric sans-serif for readability.
- Text is primarily uppercase or sentence case depending on context.

## 4. Spacing

The system is governed by an 8-pixel base rhythm, creating a consistent and predictable measure of space throughout.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 8px base rhythm with generous spacing between sections.

## 5. Surfaces

Surfaces are treated with flatness and minimal elevation. Depth is suggested through subtle, single-pixel borders and hairline shadows rather than heavy, layered drop effects.

- **Radius:** sm 4px · md 20px · lg 32px · pill 999px
- **Shadows:**
  - 0px 0px 1px 0px rgba(0, 0, 0, 0.2)
- **Borders:** Thin 1px borders used sparingly, mostly on outlined buttons.

## 6. Layout

The layout skeleton uses full-width hero sections to establish visual impact, which then transition into centered, structured content grids for product exploration and information.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-width hero sections transitioning into centered content grids.

## 7. Motion & Interaction

Motion is strictly functional, reserved for confirming user actions and clarifying state changes. Transitions are smooth and quick, operating on opacity and transform properties without theatrical flourish.

- **Durations:** micro 100ms · small 250ms · medium 500ms
- **Easing:** `ease-in-out`
- **Patterns:**
  - Standard opacity and transform transitions for UI interactions.

- **Hover:** Scale or opacity transitions on interactive elements.
- **Click:** Subtle scale down effect.
- **Transition:** All interactive elements use a smooth 0.25s transform or opacity transition.
- **Keyboard:** Standard focus states with clear visibility.

## 8. Voice & Don'ts

The editorial voice is direct, conversational, and enthusiastic, greeting the user and guiding them with action-oriented language. It is friendly without being frivolous, and professional without being cold.

- **Tone:** Friendly, enthusiastic, and approachable.
- **Headline style:** Direct and conversational, often starting with a greeting.
- **CTA style:** Action-oriented with arrows pointing the way.
- **Avoid:** Clinical or overly technical jargon / Aggressive sales language / Cold or impersonal tone

### Don'ts
- ❌ Don't use harsh neon colors — the screenshot shows soft pastels and deep navy.
- ❌ Don't use purely geometric sans-serif for headlines — the screenshot shows a prominent transitional serif.
- ❌ Don't use sharp, square corners on containers — the screenshot shows consistently rounded corners.
- ❌ Don't use small, dense text blocks — the screenshot shows large, legible type with ample spacing.
- ❌ Don't use dark mode aesthetics — the screenshot is predominantly light and bright.
- ❌ Don't use heavy drop shadows — the screenshot shows flat surfaces with minimal or no elevation.

The system deliberately rejects clinical jargon, aggressive sales tactics, and impersonal tone to maintain its core identity of friendly trustworthiness.

## System Prompt (paste into AI tool)

```
Finn is a consumer DTC brand for dog supplements. The design is warm, approachable, and clean, featuring a soft pink and white palette contrasted with deep navy and energetic orange accents. Typography relies on a bold transitional serif for display and a clean geometric sans-serif for body text. Critical constraints: Do not use dark mode aesthetics. Do not use harsh neon colors. Do not use purely geometric sans-serif for display headlines. Maintain high contrast and generous white space.
```