Design System Inspiration of Pet Friends

1. Visual Theme & Atmosphere

Pet Friends (펫프렌즈) is Korea's self-described "반려동물 1등 쇼핑몰" (No.1 pet shopping mall), and its interface reads like a friendly, high-energy commerce app built for anxious-but-loving pet parents (집사님). The canvas is pure white (#ffffff) broken up by soft grey product surfaces (#f8f8f8) and warm pink tints (#fff1f5), so the page feels bright and merchandising-forward rather than clinical. Text sits in a soft charcoal (#2d3035) — never a harsh pure black for reading copy — which keeps the dense product grids legible without feeling heavy. The signature move is color as emotion: a single vivid pink (#ff4081, Material's Pink A400) carries the brand's affection and doubles as the "do this" action color.

The typographic personality is warm and declarative. Section headlines run in the brand's custom Lific typeface at 18px / weight 700 with tight -0.2px tracking, and the persuasive word in each headline jumps to weight 900 in pink (#ff4081) — e.g. "재구매율 89%", "최저가 도전 사료 모음!", "집사님을 위한 오늘 특가!". Body and product-name text drop to Lific / Noto Sans KR at 13–14px weight 400, optimized for dense hangul product listings. This heavy-pink-emphasis-over-quiet-grey-body split is the core tension of the system: shout the deal, whisper the detail.

What distinguishes Pet Friends from generic marketplaces is its commitment to friendly geometry and near-flat depth. Interactive chrome leans hard into the pill and the rounded rectangle: category chips at 36px radius on a pink tint (#fff1f5), soft-pink search-keyword pills (#ffaac7) at ~19px radius, product cards at a comfortable 16px, and circular avatars. Live inspection returned box-shadow: none on chips, inputs, and headings — separation comes from tinted surfaces, thin #e9ebec hairlines, and a near-black image overlay (#1c1e21), not from elevation. Price urgency gets its own dedicated signal red (#f33f46) for discount percentages and a deeper magenta (#ea306f) for sale copy, keeping the primary pink from being diluted by commerce noise. A periwinkle accent-blue (#6078e4) and alternate light surface (#fafafa) show up on promotional landing bands.

Key Characteristics:

• Custom Lific typeface with Noto Sans KR fallback — one warm family across display and body
• Single vivid pink (#ff4081) as both emotional brand color and primary action fill
• Heading emphasis in weight 900 pink; quiet 13–14px weight-400 grey body (#2d3035)
• Friendly geometry — 36px chips, ~19px keyword pills, 16px cards, circular avatars
• Near-flat / shadowless: tint surfaces (#f8f8f8, #fff1f5) + #e9ebec hairlines do the separating
• Dedicated commerce signals: signal red (#f33f46) for discount %, deeper magenta (#ea306f) for sale copy
• Near-black overlay (#1c1e21) for image counters instead of drop shadows
• Muted grey ladder (#9ca1aa) for secondary/metadata text

2. Color Palette & Roles

Primary

• Pet Friends Pink (#ff4081): The brand's signature vivid pink (Material Pink A400). Used for weight-900 emphasis words in headlines, solid primary-action button/badge fills, and brand accents. The system's single "do this" color.
• Deep Magenta (#ea306f): A deeper pink-magenta for sale copy and secondary emphasis text where the primary pink would be too light.

Text

• Ink Charcoal (#2d3035): Primary text, headings, product names, labels. A soft near-black used instead of pure black for reading comfort in dense grids.
• Pure Black (#000000): Maximum-contrast text used on some hero headings and chip labels.
• Muted Grey (#9ca1aa): Tertiary text, captions, metadata, disabled labels.

Commerce Signals

• Signal Red (#f33f46): The discount-percentage color — used almost exclusively on the bold "17%", "50%", "36%" markdown that drives conversion.

Surface & Neutral

• Pure White (#ffffff): Page background, card surfaces, and text on pink/dark fills.
• Product Grey (#f8f8f8): The light-grey image surface behind product photography in cards and carousels.
• Alt Surface (#fafafa): A slightly warmer alternate light surface for promotional landing bands.
• Surface Pink (#fff1f5): A pale pink tint used as the background of header category / delivery chips.
• Soft Pink (#ffaac7): The soft pink of the trending search-keyword pills (rendered at 0.5 alpha over the hero imagery).
• Hairline (#e9ebec): Thin borders, input outlines, and dividers — the primary separation device given the shadow-free system.
• Overlay Ink (#1c1e21): A near-black used (at ~0.6 alpha) for image overlays and carousel index counters.

Accent

• Accent Blue (#6078e4): A periwinkle blue used sparingly on promotional / event landing bands as a secondary accent to the pink.
• On-Primary White (#ffffff): Text and iconography on pink, magenta, and dark overlay fills.

3. Typography Rules

Font Family

• Brand: Lific — Pet Friends' custom typeface, used across headings, UI, and body.
• Fallback: Noto Sans KR — the hangul fallback that carries dense product-listing and body copy.

Hierarchy

Principles

• Bold pink emphasis, quiet grey body: Headlines carry a weight-900 pink phrase for the persuasive beat; product names and body drop to weight 400 charcoal. The weight-and-color jump is the primary hierarchy signal.
• Tight negative tracking on headings: -0.2px on titles, -0.32px on discount figures. Body stays at normal tracking.
• Hangul-first sizing: Product titles sit at a deliberate 13px, body at 14px — dense enough for merchandising grids, legible for hangul.
• One warm family: Lific covers display and UI; Noto Sans KR is the reading/fallback voice. There is no second display typeface competing for attention.

4. Component Stylings

Buttons

Primary Action (Pink)

• Background: #ff4081
• Text: #ffffff
• Font: 16px Lific weight 700
• Use: Primary brand action — the solid vivid-pink fill used for add-to-cart / buy and headline CTAs

Category / Delivery Chip

• Background: #fff1f5
• Text: #000000
• Radius: 36px
• Padding: 4px 8px 4px 12px
• Height: 32px
• Use: Header chips for category ("강아지") and delivery-address ("배송지 입력") selection

Inputs

Search Field

• Background: #ffffff
• Text: #2d3035
• Border: 1px solid #e9ebec
• Radius: 6px
• Padding: 15px 44px 15px 16px
• Height: 52px
• Font: 20px Lific weight 500
• Use: Main product search — placeholder "어떤 상품을 찾으시나요?"

Cards

Product Card

• Background: #f8f8f8
• Radius: 16px
• Use: Light-grey image surface behind product photography in grids and carousels

Badges

Search-Keyword Pill

• Background: #ffaac7
• Text: #ffffff
• Radius: 19px
• Padding: 3px 15px
• Height: 30px
• Use: Trending search-keyword pills on the hero (rendered at 0.5 alpha)

Image Counter Overlay

• Background: #1c1e21
• Text: #ffffff
• Radius: 20px
• Padding: 5px 8px
• Use: Carousel index / image counter ("2/14"), rendered at ~0.6 alpha over media

Avatars

Circular Frame

• Radius: 9999px (border-radius 50%)
• Use: Circular avatar / icon frame in list and community surfaces

---

Verified: 2026-07-02 (omd:add-reference CREATE — Tier 1 live inspect, 3 surfaces) Tier 1 sources: https://www.pet-friends.co.kr/ , https://m.pet-friends.co.kr/main/product/list/16982 Tier 2 sources: getdesign.md/petfriends (0 files) ; styles.refero.design/?q=petfriends (no genuine Pet Friends entry — returns generic default styles) Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base units (measured): 4px, 8px, 12px, 15px, 16px, 44px
• Notable: chip padding lands at an asymmetric 4px 8px 4px 12px (room for a trailing chevron icon); the search field reserves a 44px right gutter for its search/clear icon

Grid & Container

• Mobile-first, single-column app shell (the desktop www host redirects to the m. mobile commerce surface)
• Sticky header: category + delivery chips over a full-width search field
• Trending-keyword pill row directly beneath search
• Product merchandising in horizontally scrolling carousels and 2-up grids, each product on a #f8f8f8 card at 16px radius
• Section headlines ("최저가 도전 사료 모음!") anchor each merchandising band

Whitespace Philosophy

• Merchandising density with breathing room: product grids are information-rich, but each card gets a clean grey surface and generous rounding so the page never feels cramped.
• Flat segmentation: sections separate by background tint (#f8f8f8 grey, #fff1f5 pink, #fafafa alt) and #e9ebec hairlines, not shadow.
• Pill rhythm: repeated rounded chips and pills create a consistent, friendly horizontal cadence.

Border Radius Scale

• Small (6px): search input
• Medium (8px): icon buttons, small controls
• Large (16px): product cards, content containers — the workhorse
• Pill (36px): category / delivery chips
• Full (9999px / 50%): keyword pills, avatars, circular frames

6. Depth & Elevation

Shadow Philosophy: Pet Friends is a near-shadowless, flat system. Live inspection returned box-shadow: none across the header chips, search input, and headings. Depth and grouping come from flat tinted surfaces (#f8f8f8, #fff1f5), thin #e9ebec hairlines, and — where content sits on photography — a near-black #1c1e21 overlay rather than a cast shadow. This keeps the commerce UI feeling fast, bright, and mobile-native. When emphasis is needed the system reaches for color (pink #ff4081, red #f33f46), never elevation.

7. Do's and Don'ts

Do

• Use the custom Lific typeface (with Noto Sans KR fallback) across headings and body
• Reserve the vivid pink (#ff4081) for emphasis words and the primary action — keep it the single "do this" color
• Put the persuasive word of a headline in weight 900 pink; keep the rest quiet grey
• Use signal red (#f33f46) only for discount percentages, and deeper magenta (#ea306f) for sale copy
• Use soft charcoal (#2d3035) for reading text instead of pure black
• Separate sections with flat tints (#f8f8f8, #fff1f5) and #e9ebec hairlines, not shadows
• Use friendly geometry — 36px chips, 16px product cards, circular avatars
• Apply the #1c1e21 overlay for counters/scrims on top of product imagery

Don't

• Spread the pink across many elements — it dilutes the single-action signal
• Use drop shadows for elevation — Pet Friends is a flat, shadow-free system
• Use signal red (#f33f46) for anything other than price/discount urgency
• Set headline emphasis in a light weight — the persuasive word is always weight 900
• Use pure black (#000000) for long-form body text — reserve charcoal #2d3035
• Introduce a competing display typeface — Lific owns the voice
• Use sharp square corners on chips, cards, or pills — everything is rounded
• Let the periwinkle accent-blue (#6078e4) compete with pink as a primary action

8. Responsive Behavior

Breakpoints

Touch Targets

• Category / delivery chips at 32px height with asymmetric padding — comfortably tappable
• Search field at 52px height, full-width
• Keyword pills at 30px height, 3px 15px padding

Collapsing Strategy

• Header: category + delivery chips stay pinned above the search field
• Product carousels scroll horizontally on narrow viewports
• Merchandising bands stack vertically, each keeping its tinted background
• Product cards maintain 16px radius across breakpoints

Image Behavior

• Product photography sits on #f8f8f8 card surfaces at all sizes, no shadow
• Media carousels carry the #1c1e21 overlay counter regardless of viewport
• Cards maintain consistent 16px radius

9. Agent Prompt Guide

Quick Color Reference

• Primary action / emphasis: Pet Friends Pink (#ff4081)
• Sale copy: Deep Magenta (#ea306f)
• Discount %: Signal Red (#f33f46)
• Background: Pure White (#ffffff)
• Product surface: Product Grey (#f8f8f8)
• Chip tint: Surface Pink (#fff1f5)
• Keyword pill: Soft Pink (#ffaac7)
• Text / headings: Ink Charcoal (#2d3035)
• Muted text: Muted Grey (#9ca1aa)
• Hairline: #e9ebec
• Overlay: #1c1e21
• Accent: Periwinkle (#6078e4)

Example Component Prompts

• "Create a mobile commerce header on white. A row of pill chips: #fff1f5 background, #000000 text, 36px radius, 4px 8px 4px 12px padding, 32px height (category + '배송지 입력'). Below it a 52px search field: white background, 1px solid #e9ebec border, 6px radius, 20px Lific text, placeholder '어떤 상품을 찾으시나요?'."
• "Design a section headline in Lific 18px weight 700, letter-spacing -0.2px, #2d3035, with the key phrase in weight 900 pink #ff4081 — e.g. 최저가 도전 사료 모음!."
• "Build a product card: #f8f8f8 background, 16px radius, no shadow. Product title 13px Lific weight 400, #2d3035. Discount percentage 16px weight 700 in signal red #f33f46."
• "Create a trending-keyword pill row: soft pink #ffaac7 background, white text, 19px radius, 3px 15px padding, 30px height."

Iteration Guide

1. Lific (Noto Sans KR fallback) everywhere; no second display face
2. Pink (#ff4081) is the single action / emphasis color — don't spread it
3. Headline emphasis word = weight 900 pink; body = weight 400 charcoal
4. No shadows — separate with #f8f8f8 / #fff1f5 tint and #e9ebec hairlines
5. Discount % is always signal red #f33f46; sale copy is deep magenta #ea306f
6. Friendly geometry — 36px chips, 16px cards, circular avatars
7. Overlay counters on media use #1c1e21 at low alpha, never a cast shadow

---

10. Voice & Tone

Pet Friends' voice is warm, playful, and reassuring — it speaks to owners as fellow "집사" (butlers/servants of their pets) raising "내새꾸" (my babies), turning the transactional act of buying pet food into a caring, community-flavored ritual. The register is upbeat and benefit-first, unafraid of a pun: the search placeholder reads "어떤 상품을 찾고 있개?" — swapping 개 (dog) into "찾고 있어?" for a smile. Copy leads with the deal and the emotional payoff, then backs it with hard numbers (재구매율 89%, 최저가).

Voice samples (verbatim from live surfaces):

• "반려동물 1등 쇼핑몰, 펫프렌즈" — page title / positioning. (verified live 2026-07-02)
• "내새꾸 친구들에게 재구매율 89%를 보이는 영양/기능" — merchandising headline (proof-backed care). (verified live 2026-07-02)
• "육아비는 펫프랑 나눠요\n집사님을 위한 오늘 특가!" — section headline (community + deal). (verified live 2026-07-02)
• "어떤 상품을 찾고 있개?" — search placeholder (pet pun). (verified live 2026-07-02)

Forbidden register: cold marketplace/logistics jargon, guilt-based pet-parent pressure, undefined promotional fine print, hype that isn't backed by a concrete number.

11. Brand Narrative

Pet Friends (펫프렌즈) launched in 2015 and grew into Korea's leading pet-commerce platform, positioning itself plainly on every surface as the "반려동물 1등 쇼핑몰" (No.1 pet shopping mall). Its founding premise addressed a specific Korean pain point: pet owners buying food and supplies across fragmented offline shops and generic marketplaces, with little curation and slow delivery. Pet Friends reframed the category around fast (same-day / dawn) delivery of pet essentials, data-driven product curation, and a community of owners who trust each other's reviews.

The product's identity is built around the emotional relationship between owner and pet — the recurring "집사님" (butler) and "내새꾸" (my baby) language treats customers as devoted caregivers rather than shoppers. Merchandising leans on social proof ("재구매율 89%", "심쿵 체험단" trial squads) and price confidence ("최저가 도전"), reflecting a business that competes on trust, speed, and value at once.

What Pet Friends refuses, visible in its design: the cold, shadow-heavy chrome of a generic logistics marketplace, and the guilt-driven marketing sometimes used in the pet category. What it embraces: a bright, near-flat mobile-first interface; a single affectionate pink; playful, punny copy; and a relentless, number-backed focus on the deal — all in service of making caring for a pet feel joyful and effortless.

12. Principles

1. Pink means love and action. The vivid pink (#ff4081) is both the brand's warmth and its call-to-action. UI implication: reserve pink for emphasis words and the primary action so affection and "do this" read as the same gesture.
2. Owner as devoted caregiver. Customers are 집사 raising 내새꾸, not buyers. UI implication: copy and empty states speak with warmth and play (the 개 pun), never cold transaction language.
3. Prove the promise. Trust is earned with numbers — 재구매율 89%, 최저가, 체험단. UI implication: pair every persuasive headline with a concrete figure in red or bold.
4. Flat and fast. A mobile-native commerce app should feel bright and quick. UI implication: no shadows; separate with tint and #e9ebec hairlines; keep cards clean and rounded.
5. Friendly geometry. Rounded chips, pills, and cards make a data-dense store feel approachable. UI implication: use 36px chips, 16px cards, and circular frames; avoid sharp corners.

13. Personas

Personas below are fictional archetypes informed by publicly observable Pet Friends user segments (Korean dog and cat owners buying food and supplies online), not individual people.

김서연, 32, 서울. A first-time puppy owner who orders food, treats, and pads weekly. Values same-day delivery and the "심쿵 체험단" trials that let her test products before committing. Chose Pet Friends because the app feels warm and the reviews feel honest, not like a faceless marketplace.

이준호, 41, 경기. A two-cat household manager who buys in bulk and chases "최저가 도전" deals. Scans the red discount percentages first, then the product title. Appreciates that the price signal is unmistakable without hunting through fine print.

박민지, 27, 부산. A dog owner active in the community and 체험단 program. Loves the playful copy ("찾고 있개?") and the sense that Pet Friends is run by fellow 집사. Trusts the "재구매율 89%" style proof more than star ratings.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is friendly but quick — consistent with the bright, fast commerce feel. Pill chips respond to press with a subtle scale/opacity shift; product carousels slide at motion-standard / ease-enter; add-to-cart confirmations pop briefly in the pink tone. No heavy bounce that would slow browsing. Under prefers-reduced-motion: reduce, all transitions collapse to instant and the store remains fully functional.