---
title: "Finn design system"
variant: extended
source: https://petfinn.com/
captured_at: 2026-10-12
theme: light
industry: ecommerce
generator: Design DNA (https://four.wiralomi.com/style/petfinn-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Finn · Design System

> Vet-led wellness with a playful, dog-first look.

**Theme:** light · **Industry:** ecommerce · **Source:** https://petfinn.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Finn pairs a confident navy identity with soft pink, teal, and orange section colors to make pet supplements feel friendly and approachable. Oversized headlines, pill-shaped shop buttons, and candid dog photography guide shoppers through product discovery, education, and social proof.

## North star

Use deep indigo and generous white space to make friendly pet photography and clear shopping actions the focus.

## Overview

The page is built on a white canvas with deep indigo as its visual anchor: it carries the logo, oversized headlines, navigation, and primary pill buttons. Soft pink makes the hero feel affectionate and energetic, while teal marks the brand-story section and orange gives the quiz block a strong, distinct band. Product cards sit quietly on pale gray, so colorful supplement packaging provides most of their visual variation. Athletics-Medium gives headlines a broad, rounded, contemporary character; Larsseit-Regular handles practical product copy and navigation, with uppercase letter-spaced navigation labels and a monospace eyebrow for small accents. A wide hero pairs left-aligned messaging and calls to action with a large lifestyle photograph. Product grids, split-image stories, and centered testimonials alternate down the page, with comfortable white space separating each block. Rounded controls and restrained borders keep shopping interactions approachable without adding heavy shadow.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Finn Indigo | `#161345` | `--color-finn-indigo` | brand | Primary brand anchor for the logo, headings, navigation, hero buttons, and dark announcement and testimonial bands. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and the backdrop for product browsing, editorial content, navigation, and cards. |
| Soft Gray | `#999999` | `--color-soft-gray` | neutral | Muted supporting copy, especially small footer text and low-emphasis details. |
| Slate Ink | `#1a202c` | `--color-slate-ink` | neutral | Secondary dark text color for body copy and informational details. |
| Cloud Gray | `#ebebeb` | `--color-cloud-gray` | neutral | Light text used on dark buttons and dark surfaces, with subdued text appearances elsewhere. |
| Finn Teal | `#60c4bf` | `--color-finn-teal` | brand | Solid background for the Finn Way brand-story section. |
| Border Indigo | `#1f1646` | `--color-border-indigo` | semantic | Dark outline around the quiz card and other bordered card treatments. |
| Mist Surface | `#f9f9f9` | `--color-mist-surface` | surface | Pale gray product-card surface used to softly distinguish merchandise from white space. |
| Quiz Orange | `#ff7f00` | `--color-quiz-orange` | accent | High-visibility orange quiz section band and small promotional text accent. |
| Night Navy | `#1a1d3d` | `--color-night-navy` | surface | Deep navy footer surface, distinct from the primary Finn Indigo. |
| Puppy Pink | `#ffcfdb` | `--color-puppy-pink` | accent | Large soft-pink hero backdrop behind the person-and-dog lifestyle photography. |
| Cocoa Ink | `#321004` | `--color-cocoa-ink` | semantic | Measured brown-black text color in links and card copy; treat as a secondary text token, not the dominant brand ink. |
| Press Blue | `#d7ecff` | `--color-press-blue` | accent | Pale blue press-logo strip beneath the hero; use as a supporting band rather than a core brand color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#60c4bf` (Finn Teal) · `--color-surface-2` → `#161345` (Finn Indigo) · `--color-surface-3` → `#f9f9f9` (Mist Surface) · `--color-surface-4` → `#1a1d3d` (Night Navy) · `--color-text` → `#161345` (Finn Indigo) · `--color-text-muted` → `#999999` (Soft Gray) · `--color-text-subtle` → `#1a202c` (Slate Ink) · `--color-border` → `#1f1646` (Border Indigo) · `--color-accent` → `#60c4bf` (Finn Teal) · `--color-accent-2` → `#ff7f00` (Quiz Orange)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#161345` | `#ffffff` | 17.31:1 | AAA |
| `#161345` | `#60c4bf` | 8.36:1 | AAA |
| `#161345` | `#f9f9f9` | 16.44:1 | AAA |
| `#999999` | `#ffffff` | 2.85:1 | fail |
| `#999999` | `#60c4bf` | 1.38:1 | fail |
| `#999999` | `#161345` | 6.08:1 | AA |
| `#999999` | `#f9f9f9` | 2.71:1 | fail |
| `#1a202c` | `#ffffff` | 16.32:1 | AAA |
| `#1a202c` | `#60c4bf` | 7.88:1 | AAA |
| `#1a202c` | `#161345` | 1.06:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Larsseit-Regular | `--font-body` | webfont | 400, 600, 500 | Body copy, navigation, links, buttons, and product details. | Inter |
| Athletics-Medium | `--font-display` | webfont | 400, 500 | Display headlines and section titles. | Manrope |
| Monosten | `--font-mono` | webfont | 400 | Small eyebrow and code-style labels. | Space Mono |

- **Larsseit-Regular:** Mostly regular weight; navigation is semibold, uppercase, and tracked. Buttons use clear, friendly sentence case.
- **Athletics-Medium:** Medium-style display face with rounded forms; use large, clean, sentence-case headings and tight line spacing.
- **Monosten:** Use sparingly for compact uppercase labels with a little letter spacing.

### Type scale — Perfect Fifth (ratio ≈ 1.547, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 133px | 400 | 1 | 0 | — | Athletics-Medium | Large display-scale headline treatment for prominent brand messaging. |
| h1 | 96px | 400 | 1.04 | 0 | — | Athletics-Medium | Primary hero headline, “Hi! We love your dog.” |
| h2 | 85px | 400 | 1.18 | 0 | — | Athletics-Medium | Large section headings such as shop and brand-story titles. |
| h3 | 83px | 400 | 1 | 0 | — | Athletics-Medium | Secondary feature and testimonial headings. |
| h4 | 64px | 400 | 0.72 | 0 | — | Athletics-Medium | Smaller display-style feature headings within editorial sections. |
| body | 15px | 400 | 1.4 | 0 | — | Larsseit-Regular | Standard explanatory copy, product details, and section descriptions. |
| caption | 14px | 400 | 1.64 | 0 | — | Larsseit-Regular | Compact product notes, reviewer details, and supporting metadata. |
| nav | 14px | 600 | 1 | 0.071em | uppercase | Larsseit-Regular | Uppercase, letter-spaced navigation and small utility labels. |
| link | 18px | 400 | 1.4 | 0.05em | — | Larsseit-Regular | Inline links and shopping actions. |
| eyebrow | 13px | 400 | 1 | 0.038em | uppercase | Monosten | Small uppercase monospace labels used as a restrained accent. |
| code | 13px | 400 | 1 | 0.038em | uppercase | Monosten | Technical or compact monospace label styling; not a prominent visible page pattern. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 5, 8, 9, 10, 12, 13, 15, 17, 20, 24, 30, 36, 40, 60, 70, 80 px.
- Section rhythm 60px · element gap 9px · card padding — · max content width 1200px.

A comfortable-width storefront uses a broad desktop canvas, with content reaching a measured maximum width of 1200px. The two-column hero balances left-aligned copy and calls to action against right-side lifestyle imagery. Full-width color bands break up the long white page, while product grids arrange cards in repeated columns and editorial features alternate text and photography. Section gaps follow the measured 60px rhythm, with smaller element gaps around 9px. The footer resolves the page into three content columns.

## Shape & elevation

- Radius: button `9999px` · card `20px` · media `50%` · nav `9999px` · xs `20px` · pill `9999px`
- Shadow `hairline` (nav): `rgba(0, 0, 0, 0.2) 0px 0px 1px 0px`
- Motion: standard transition `0.1s ease-in-out` on interactive elements.

The interface is mostly flat: white space and full-width color bands establish hierarchy rather than shadow. Product tiles use pale gray backgrounds and rounded corners, while the quiz card and selected feature cards use a defined indigo outline. Buttons are solid indigo pills, and the measured navigation shadow is a subtle hairline rather than a strong elevation effect.

## Imagery

Photography is central: the hero shows a person interacting with a dog against a pink field, while product grids use isolated supplement packaging. Editorial panels include dogs, owners, and lifestyle imagery. Product images are cleanly framed and supported by understated pale surfaces; customer and veterinarian portraits add social proof. The quiz panel uses simple dark dog silhouettes as illustration accents. Imagery is prominent, colorful, and mostly free of decorative overlays.

## Components

### Announcement bar

A slim dark indigo strip at the top carries centered uppercase free-shipping copy in light text.

### Primary pill button

Solid #161345 capsule CTA with light text and a simple arrow; used for shopping and quiz actions.

### Hero

Large split layout: oversized indigo headline and paired CTAs on the left, dog-and-owner photography on a pink field to the right.

### Product card

Pale #f9f9f9 rounded tile for package photography, product name, orange price, brief copy, and an indigo shop button.

### Quiz feature

Bright orange band surrounds a white, dark-outlined panel with a large headline, short explanation, CTA, and dog silhouettes.

### Editorial split

Two-column storytelling block combines concise copy with a large lifestyle photograph; the Finn Way section uses teal as its background.

### Testimonial panel

Dark indigo section with a light centered headline, circular veterinarian portrait, quote, and compact portrait navigation.

### Footer

Deep navy three-column footer with large primary links, smaller utility links, newsletter entry, and white Finn branding.

### Measured component styles

- **Primary button** (“Shop Now”): background #161345 · text #ebebeb · border 1px solid #161345 · radius 60px · padding 15px 36px 17px 36px · 400 24px Larsseit-Regular
- **Secondary button** (“Shop Now”): transparent background · text #321004 · border 1px solid #161345 · radius 60px · padding 13px 20px 15px 20px · 400 18px Larsseit-Regular
- **Link** (“Allergy & Itch $34.00 The allergy suppor”): transparent background · text #321004 · radius 0px · padding 0px · 400 18px Larsseit-Regular
- **Input**: transparent background · text #ffffff · radius 0px · padding 15px 0px · 400 18px Athletics-Medium
- **Card** (“Fetch the Right Solution Tell us a bit a”): background #ffffff · text #321004 · border 3px solid #1f1646 · radius 20px · padding 0px · 400 18px Larsseit-Regular
- **Navigation item** (“FREE SHIPPING ON ALL ORDERS OVER $40”): transparent background · text #321004 · radius 0px · padding 0px · 400 18px Larsseit-Regular

## Do

- Anchor headlines and primary actions in Finn Indigo #161345.
- Keep the main shopping canvas white and uncluttered.
- Use Puppy Pink #ffcfdb for a welcoming lifestyle hero.
- Reserve Finn Teal #60c4bf and Quiz Orange #ff7f00 for distinct feature bands.
- Show product packaging prominently in quiet, pale cards.
- Use rounded pill controls and restrained outlines.
- Alternate product grids with photo-led editorial sections.

## Don't

- Do not replace the white canvas with a dark all-page background.
- Do not use orange as the primary text or navigation color.
- Do not add heavy shadows to cards or buttons.
- Do not crowd product imagery with extra decoration.
- Do not make every section use the same background color.
- Do not let small product copy compete with oversized headlines.

## Agent prompt

Build a new Finn storefront page with a bright white canvas and a clear, playful pet-wellness voice. Use Finn Indigo #161345 for headlines, navigation, logos, and primary pill buttons; reserve Puppy Pink #ffcfdb for lifestyle hero moments, Finn Teal #60c4bf for brand-story bands, and Quiz Orange #ff7f00 for a standout interactive feature. Use Gallery White #ffffff and Mist Surface #f9f9f9 to keep product cards clean, with orange pricing and prominent package photography. Set large, rounded-feeling headlines in Athletics-Medium or a close substitute; use Larsseit-Regular or a similar sans for body, links, and controls. Alternate wide photo-led sections and product grids, leave comfortable white space, and use light borders instead of heavy shadows. Keep CTAs direct, rounded, and easy to find.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column hero with left-aligned message and CTAs, and lifestyle photo on the right. | shop CTA, take-the-quiz CTA | pink backdrop, oversized indigo headline, pill buttons |
| 2 | logo-cloud | Full-width horizontal strip of repeated press logos. | brand credibility | pale blue band, logo row |
| 3 | product-grid | Large section heading followed by a multi-column grid of product cards. | browse products, shop each item | white canvas, pale product tiles, orange prices |
| 4 | feature-split | Two-column sustainability story with text on one side and product lifestyle image on the other. | learn more | editorial split, large product photo |
| 5 | product-grid | Section heading above a multi-column best-seller product grid. | browse best sellers, shop each item | product photography, pale cards, pill buttons |
| 6 | cta | Centered quiz panel inside a full-width orange band. | personalized recommendations, take quiz | white outlined panel, dog silhouette illustrations, indigo button |
| 7 | product-grid | Section title followed by a grid of multi-product bundle cards. | browse bundles, shop each bundle | pale cards, bundle pack shots, orange prices |
| 8 | feature-split | Teal two-column story with a wide lifestyle image above paired text blocks. | brand education | teal section band, wide photo, paired copy columns |
| 9 | testimonials | Centered heading and quote with circular expert portrait in a dark full-width panel. | expert endorsement, testimonial navigation | indigo background, light text, portrait thumbnails |
| 10 | reviews | Two-column review area with a large owner-and-dog photo and a stacked quote list. | customer social proof, star ratings | five-star rows, editorial photography, white background |
| 11 | footer | Three-column dark footer with navigation, utility links, and newsletter and brand details. | newsletter signup, site navigation | deep navy background, large link list, email field |

## Source CSS custom properties (selected)

```css
--typeHeaderPrimary: "Athletics-Medium";
--typeHeaderSpacing: 0.1em;
--typeBasePrimary: "Larsseit-Regular";
--typeBaseSpacing: 0.05em;
--buttonRadius: 50px;
--colorAnnouncement: #161345;
--colorAnnouncementText: #ffffff;
--colorBody: #ffffff;
--colorBodyAlpha05: rgba(255, 255, 255, 0.05);
--colorBodyDim: #f2f2f2;
--colorBodyLightDim: #fafafa;
--colorBodyMediumDim: #f5f5f5;
--colorBorder: #e8e8e1;
--colorBtnPrimary: #5e6350;
--colorBtnPrimaryLight: #797f67;
--colorBtnPrimaryDim: #515545;
--colorBtnPrimaryText: #ffffff;
--colorCartDot: #d74a5d;
--colorDrawers: #ffffff;
--colorDrawersDim: #f2f2f2;
--colorDrawerBorder: #e8e8e1;
--colorDrawerText: #321004;
--colorDrawerTextDark: #000000;
--colorDrawerButton: #321004;
--colorDrawerButtonText: #ffffff;
--colorFooter: #ffffff;
--colorFooterText: #321004;
--colorFooterTextAlpha01: #321004;
--colorGridOverlay: #000000;
--colorGridOverlayOpacity: 0.1;
--colorHeaderTextAlpha01: rgba(50, 16, 4, 0.1);
--colorHeroText: #ffffff;
--colorSmallImageBg: #ffffff;
--colorLargeImageBg: #0f0f0f;
--colorImageOverlay: #321004;
--colorImageOverlayOpacity: 0.1;
--colorImageOverlayTextShadow: 0.2;
--colorLink: #321004;
--colorModalBg: rgba(230, 230, 230, 0.6);
--colorNav: #ffffff;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/petfinn-com