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

# PatPat · Design System

> Soft family style, told in warm editorial scenes

**Theme:** light · **Industry:** ecommerce · **Source:** https://www.patpat.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._

PatPat pairs a soft, pale canvas with oversized seasonal photography and editorial-style serif headlines. Rounded navigation, compact shopping controls, and product-led sections make the homepage feel welcoming while keeping it practical to browse.

## North star

Let warm, story-led family photography lead, while keeping the shopping interface quiet, rounded, and easy to scan.

## Overview

The page is anchored by a warm blush-white canvas (#fdf6f3), with a dark charcoal announcement strip and a matching charcoal footer giving the long page clear bookends. The first screen is dominated by a full-bleed Halloween campaign image; the brand’s colors in this area come largely from the photography, not the core interface palette. Serif display headlines bring an editorial, storybook quality, while the custom PatPat sans-serif keeps navigation, product details, and supporting copy direct and readable. Content alternates between broad image-led storytelling, compact feature cards, product tiles, and text-heavy FAQ content. Pale lavender appears as a distinct product-grid band, and white panels give the character feature and newsletter area contrast without adding strong shadows. Sections are generously separated, but cards and controls remain close enough to support shopping. Rounded navigation and pill-shaped actions soften otherwise crisp layouts and fine dividers.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Blush Canvas | `#fdf6f3` | `--color-blush-canvas` | brand | Primary page canvas across the hero surround, editorial sections, FAQ, and service-benefit area. |
| Soft Charcoal | `#22292d` | `--color-soft-charcoal` | brand | Main navigation, links, and frequent text color; also used for the dark footer surface. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Product badges, light panels, and the footer’s measured background surface. |
| Lavender Badge | `#9c7aca` | `--color-lavender-badge` | accent | Best Seller badges on product tiles; a small merchandising highlight, not a page-wide color. |
| Quiet Divider | `#e9e9e9` | `--color-quiet-divider` | neutral | Fine borders and hairlines around controls and small interface elements. |
| Rose Badge | `#cc8194` | `--color-rose-badge` | accent | Small promotional badge detail; keep limited to compact sale or merchandising markers. |
| Muted Graphite | `#646464` | `--color-muted-graphite` | neutral | Secondary copy and subdued supporting text. |
| Editorial Ink | `#1a1a1a` | `--color-editorial-ink` | neutral | Dark headline and button text where strong contrast is needed. |
| Footer Charcoal | `#222222` | `--color-footer-charcoal` | neutral | Near-black text and navigation details; visually close to the primary charcoal. |
| Cool Mist | `#eef0f6` | `--color-cool-mist` | surface | Pale cool-toned card and link surface used as a quiet alternative to blush. |
| Lilac Haze | `#ede5ef` | `--color-lilac-haze` | surface | Soft lavender background band behind the best-seller product grid. |
| Marigold | `#ffc537` | `--color-marigold` | accent | Bright seasonal campaign text and small highlights, especially within the Halloween hero artwork. |
| Warm Stone | `#d8cac1` | `--color-warm-stone` | surface | Measured product-card imagery or placeholder surface; not a defining page-wide brand color. |
| True Black | `#000000` | `--color-true-black` | neutral | Occasional deep text and content-card detail, including product information. |
| Signal Red | `#e50126` | `--color-signal-red` | accent | Small promotional or urgency accents; use sparingly rather than as a broad background. |
| Footer Silver | `#d4d4d4` | `--color-footer-silver` | neutral | Muted footer details and low-emphasis interface text. |

### Semantic aliases

`--color-canvas` → `#fdf6f3` (Blush Canvas) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#22292d` (Soft Charcoal) · `--color-surface-3` → `#ede5ef` (Lilac Haze) · `--color-surface-4` → `#eef0f6` (Cool Mist) · `--color-text` → `#1a1a1a` (Editorial Ink) · `--color-text-muted` → `#646464` (Muted Graphite) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#e9e9e9` (Quiet Divider) · `--color-accent` → `#ffc537` (Marigold) · `--color-accent-2` → `#e50126` (Signal Red)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1a1a1a` | `#fdf6f3` | 16.29:1 | AAA |
| `#1a1a1a` | `#ffffff` | 17.4:1 | AAA |
| `#1a1a1a` | `#22292d` | 1.18:1 | fail |
| `#1a1a1a` | `#ede5ef` | 14.13:1 | AAA |
| `#646464` | `#fdf6f3` | 5.54:1 | AA |
| `#646464` | `#ffffff` | 5.92:1 | AA |
| `#646464` | `#22292d` | 2.49:1 | fail |
| `#646464` | `#ede5ef` | 4.81:1 | AA |
| `#ffffff` | `#fdf6f3` | 1.07:1 | fail |
| `#ffffff` | `#22292d` | 14.76:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| patpat-Regular | `--font-body` | webfont | 400, 700 | Primary interface and body font for navigation, links, product information, and copy. | Nunito Sans |
| patpat-SemiBold | `--font-patpat-semibold` | webfont | 400 | Emphasis for product badges and compact merchandising labels. | Nunito Sans |
| patpat-Medium | `--font-patpat-medium` | webfont | 400 | Button labels and concise action text. | Nunito Sans |
| patpat-NewBold | `--font-display` | webfont | 400 | Large display and H1 campaign headlines. | DM Serif Display |
| patpat-Moment | `--font-patpat-moment` | webfont | 400 | Small decorative or moment-specific brand accent lettering. | Cormorant Garamond |

- **patpat-Regular:** Friendly, legible sans-serif; regular weight dominates, with heavier emphasis for subheads.
- **patpat-SemiBold:** Use for brief labels and emphasis; retain sentence case or the supplied label casing.
- **patpat-Medium:** Medium-weight actions stay compact and readable; avoid all-caps treatment.
- **patpat-NewBold:** Editorial serif display face; use for large, expressive headlines with natural casing.
- **patpat-Moment:** Rare display accent; keep subordinate to the primary headline and interface fonts.

### Type scale — Augmented Fourth (ratio ≈ 1.403, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 76px | 400 | 1.05 | 0 | — | patpat-NewBold | Large campaign-style display headline, most visible in the hero. |
| h1 | 52px | 400 | 1.12 | 0 | — | patpat-NewBold | Primary page or feature headline with editorial emphasis. |
| h2 | 24px | 700 | 1.33 | 0.021em | — | patpat-Regular | Section headings, including feature and product-grid introductions. |
| h3 | 22px | 700 | 1.45 | 0 | — | patpat-Regular | Secondary feature titles and supporting editorial headings. |
| h4 | 20px | 700 | 1.2 | 0 | — | patpat-Regular | Compact card headings and nested content titles. |
| body | 14px | 400 | 1.43 | 0 | — | patpat-Regular | Descriptions, product information, and general supporting copy. |
| caption | 12px | 400 | 1.33 | 0 | capitalize | patpat-Regular | Small labels, product metadata, and utility notes. |
| nav | 14px | 400 | 1.5 | 0 | — | patpat-Regular | Header navigation links and menu labels. |
| link | 17px | 400 | 1.5 | 0 | — | patpat-Regular | Prominent inline links and category or feature destinations. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 4, 5, 6, 7, 8, 9, 10, 12, 14, 16, 17, 20, 24, 28, 32 px.
- Section rhythm 88px · element gap 8px · card padding 8px · max content width 1280px.

The homepage is a long, full-width storefront, with page content organized into broad visual bands and compact shopping grids. Its measured maximum content width is 1280px; the hero and story media can run full bleed, while later sections use inset panels and aligned card rows. A ten-column logo strip, four-part fabric feature, three-card moments row, split character panel, and twelve-column product grid create varied rhythms. Sections use generous vertical separation, with comfortable density and short gaps within card groups. Most headings and copy align to the left; the explanatory content block is centered.

## Shape & elevation

- Radius: button `50%` · input `9999px` · badge `9999px` · nav `50%` · link `20px` · xs `4px` · sm `8px` · md `18px` · lg `20px` · xl `30px` · 2xl `40px` · pill `9999px`
- Shadow `inset` (nav): `rgb(34, 41, 45) 0px 0px 0px 0px inset`
- Shadow `lg` (other): `rgba(0, 0, 0, 0.05) 0px 1px 6px 0px, rgba(0, 0, 0, 0.15) 0px 2px 30px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is mostly flat, relying on background changes, image composition, and fine borders rather than layered card shadows. White panels and the lavender product band distinguish content groups from the blush canvas. Navigation and action controls use rounded silhouettes; a measured large shadow appears on a minor interface element, not as a pervasive card treatment.

## Imagery

Photography is the primary storytelling device: a dramatic Halloween family-pajama campaign fills the hero, while later lifestyle images show family moments and children wearing products. Product cards prioritize garment imagery over decoration. Fabric features use close-up, tactile-looking material visuals in a horizontal card arrangement, and the story section includes video. Seasonal artwork contains strong orange, red, and black hues; these belong to campaign media rather than the core interface palette.

## Components

### Announcement and navigation

A narrow charcoal shipping announcement sits above a pale, pill-shaped navigation bar. The header contains the PatPat mark, compact category links, and utility icons.

### Campaign hero

Full-bleed seasonal photography combines an oversized serif headline, short supporting copy, a rounded shopping CTA, and compact brand proof points.

### Fabric feature cards

A broad lead fabric image sits beside three narrower material cards, with small uppercase category labels and serif product-tech names.

### Story and feature panels

Editorial sections pair generous serif section titles with image-led cards, video, or a white information panel and compact dark CTA.

### Best-seller product grid

A pale lavender band holds product tiles, white image areas, concise product details, and small rounded sale or best-seller badges.

### Newsletter signup

A wide family photograph sits beside a large serif offer headline, supporting copy, rounded email field, and dark pill-shaped submit action.

### Service assurances

Four light cards summarize returns, shipping, delivery, and support with small icons, direct headings, and restrained secondary copy.

### Measured component styles

- **Primary button** (“Discover More”): background #325140 · text #ffffff · radius 18px · padding 0px 18px · 400 13px patpat-Medium
- **Secondary button** (“Discover More”): background #1a1617 · text #ffffff · radius 18px · padding 0px 20px · 400 17px patpat-Medium
- **Link** (“Halloween Matching Matching looks for ev”): transparent background · text #22292d · radius 0px · padding 0px · 400 17px patpat-Regular
- **Input**: transparent background · text #182125 · radius 999px · padding 0px 20px · 400 14px patpat-Regular
- **Card** (“THE COLLECTION Park-Ready 22 pieces SIZE”): transparent background · text #000000 · border 1px solid #f2f2f2 · radius 0px · padding 32px 0px 0px 0px · 400 17px patpat-Regular
- **Badge** (“Up to 4XL”): background #ffffff · text #000000 · radius 8px · padding 0px 8px · 400 11px patpat-Medium
- **Navigation item** (“Featured Christmas Pajamas ComfortTech™ ”): transparent background · text #22292d · radius 0px · padding 0px · 400 17px patpat-Regular · shadow rgb(34, 41, 45) 0px 0px 0px 0px inset

## Do

- Use the blush canvas as the main background.
- Let campaign and family photography carry the seasonal color.
- Pair expressive serif headlines with readable sans-serif interface copy.
- Keep navigation and shopping actions softly rounded.
- Use lavender as a contained product-grid section band.
- Separate long sections with generous breathing room.

## Don't

- Do not turn the page into a dark interface.
- Do not use campaign-art colors as broad interface backgrounds.
- Do not add heavy shadows to every card.
- Do not make labels or product information compete with imagery.
- Do not replace the editorial headline style with generic geometric display type.
- Do not crowd the full-width story sections with dense controls.

## Agent prompt

Build a family-fashion storefront page in PatPat’s warm editorial style. Use Blush Canvas (#fdf6f3) for the main page, Soft Charcoal (#22292d) for navigation and everyday text, and Gallery White (#ffffff) for clean panels. Keep Lilac Haze (#ede5ef) confined to a product-merchandising band; use Lavender Badge (#9c7aca) only for small product labels. Create a photo-led seasonal hero, then alternate broad editorial imagery, fabric or category cards, a compact product grid, newsletter signup, FAQ, and service assurances. Use expressive serif headlines with friendly sans-serif interface text, generous section breathing room, and rounded navigation and CTA controls. Keep borders subtle, shadows rare, and product details easy to scan. Treat orange, red, and black campaign colors as part of photography, not the site-wide UI palette.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Announcement and rounded navigation above full-bleed seasonal hero media. | shipping announcement, category navigation, shopping CTA, carousel indicators | charcoal announcement strip, pale pill navigation, serif display headline, campaign photography |
| 2 | logo-cloud | A horizontal strip of partner and press marks below the hero. | press recognition | small monochrome logos, open pale background |
| 3 | feature-grid | Editorial heading above one wide media card and three narrow fabric cards. | fabric discovery, card links | asymmetric card row, close-up fabric imagery, small labels |
| 4 | feature-grid | Section heading and action above three evenly arranged feature cards. | category exploration, feature links | three-column card row, decorative seasonal details, serif headings |
| 5 | feature-split | Two-column feature area with visual media beside a white information panel. | collection discovery, CTA | split layout, serif section title, dark rounded action |
| 6 | video | Full-width story heading followed by large video-led media. | brand storytelling, video viewing | full-bleed media, minimal text |
| 7 | product-grid | Product heading above a horizontal row of four shopping cards. | product browsing, carousel navigation, sale badges | lavender section band, white product areas, rounded merchandising badges |
| 8 | newsletter | Family photo and signup content arranged side by side in a wide panel. | email signup, first-order offer | serif offer headline, rounded input, dark pill button |
| 9 | faq | Centered informational heading, introductory content, and a vertical FAQ list. | expandable answers, show more, shopping guidance | text-led section, fine dividers, compact rows |
| 10 | stats | Four evenly spaced service cards in one horizontal row. | returns reassurance, shipping information, support access | light cards, small service icons, short headings |
| 11 | footer | Dark full-width footer with link columns, signup controls, social links, and legal details. | footer navigation, newsletter signup, social destinations | charcoal surface, light text, multiple link groups |

## Source CSS custom properties (selected)

```css
--font-color-black: #1A1A1A;
--color-text: #22292d;
--color-text-8-percent: rgba(34, 41, 45, 0.08);
--color-text-alpha: rgba(34, 41, 45, 0.35);
--color-text-meta: rgba(34, 41, 45, 0.6);
--color-text-link: #22292d;
--color-text-error: #D02F2E;
--color-text-success: #478947;
--color-background: #ffffff;
--color-background-semi-transparent-80: rgba(255, 255, 255, 0.8);
--color-background-semi-transparent-90: rgba(255, 255, 255, 0.9);
--color-background-transparent: rgba(255, 255, 255, 0);
--color-border: #AAAAAA;
--color-border-meta: rgba(170, 170, 170, 0.6);
--color-overlay: rgba(0, 0, 0, 0.7);
--color-background-meta: #f5f5f5;
--color-background-meta-alpha: rgba(245, 245, 245, 0.6);
--color-background-darker-meta: #e8e8e8;
--color-background-darker-meta-alpha: rgba(232, 232, 232, 0.6);
--color-background-placeholder: #e8e8e8;
--color-background-placeholder-lighter: #f0f0f0;
--color-foreground-placeholder: rgba(34, 41, 45, 0.4);
--color-border-input: #AAAAAA;
--color-border-input-alpha: rgba(170, 170, 170, 0.25);
--color-text-input: #22292d;
--color-text-input-alpha: rgba(34, 41, 45, 0.04);
--color-text-button: #faf7c3;
--color-background-button: #242526;
--color-background-button-alpha: rgba(36, 37, 38, 0.6);
--color-background-outline-button-alpha: rgba(36, 37, 38, 0.1);
--color-background-button-hover: #56585a;
--color-icon: rgba(34, 41, 45, 0.4);
--color-icon-darker: rgba(34, 41, 45, 0.6);
--color-text-sale-badge: #d21404;
--color-background-sold-badge: #414141;
--color-text-sold-badge: #ffffff;
--color-text-header: #22292d;
--color-text-header-half-transparent: rgba(34, 41, 45, 0.5);
--color-background-header: #ffffff;
--color-background-header-transparent: rgba(255, 255, 255, 0);
```

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