핏펫 DESIGN.md

Design System Inspiration of Fitpet

Overview

Visual Theme & Atmosphere

Fitpet (핏펫) is Korea's pet-healthcare and pet-commerce brand — an at-home health-check kit, a curated product mall, and an animal-hospital booking flow, all under one confident blue. The system spans two surfaces with one identity: a clean, editorial corporate flagship (fitpet.co.kr) that reads like a modern healthcare brand, and a dense, warm commerce mall (fitpetmall.com) built for browsing food, treats, and supplies. The connective tissue is a single saturated brand blue — #0050ff — which is literally the dominant color of the logo and the fill of the mall's primary action button. Text sits in a near-black #1b1e21 on the mall (never pure black for product copy) and pure #000000 on the corporate site, both on a bright #ffffff canvas softened by a pervasive cool-grey surface tint (#f4f7fa).

The typographic personality is split by job. The corporate flagship pairs Noto Sans KR for hangul headlines — 40px at weight 600 for hero lines like "반려동물의 건강을 집에서 1분만에 확인" ("Check your pet's health at home in one minute"), scaling up to an 85px weight-600 stat ("16만+") — with Poppins for the latin nav labels at a tight 13px / 700. The commerce mall switches to Pretendard, the de-facto Korean product font, running section titles at 24px / 700 ("오늘의 핫딜"), page titles at 19px / 700, and product-card titles at a quiet 17px / 400 in slate #42494f. Heavy where it persuades, calm where it lists.

What distinguishes Fitpet from heavier commerce peers is its near-flat depth. Live inspection found box-shadow: none almost everywhere; separation is carried by the #f4f7fa tint, hairline borders (rgba(0, 0, 0, 0.03), #eef1f5, #dfe3e8), and rounded geometry rather than elevation. Corners cluster at ~10px for cards and inputs, and everything interactive leans into the pill — the primary button at ~28px radius, filter chips at a full 999px. Accents are used sparingly and semantically: a coral-red #ff5967 for discount percentages, a rating yellow #ffd633 for stars and points, a light-blue #edf4ff for coupon strips, and a lighter marketing blue #1482ff plus a deep navy #0035a8 as secondary brand tones. The logo also carries a warm orange #ff9300 paw accent.

Key Characteristics:

• Single saturated brand blue (#0050ff) — logo dominant and the mall's primary-action fill
• Lighter marketing blue (#1482ff) and deep navy (#0035a8) as secondary brand tones
• Pervasive cool-grey surface tint (#f4f7fa) doing the segmentation work instead of shadows
• Near-flat depth: box-shadow: none; separation via rgba(0, 0, 0, 0.03) / #eef1f5 / #dfe3e8 hairlines
• Pill-forward geometry — ~28px primary button, 999px filter chips, ~10px cards and inputs
• Two-font split: Noto Sans KR + Poppins on the corporate flagship, Pretendard on the mall
• Semantic accents only: coral #ff5967 for discounts, yellow #ffd633 for ratings/points, #edf4ff for coupon strips
• Near-black #1b1e21 (mall) and pure #000000 (corporate) heading text on a bright #ffffff canvas

Primary tasks

• Check a pet's health at home instead of an immediate vet visit
• Buy food, treats, and supplies chosen against health criteria
• Find a good animal hospital and book an appointment
• Search the mall for a product

Brand Narrative

Fitpet (핏펫) is a Korean pet-healthcare and pet-commerce company founded in 2017, built around a simple premise: that caring for a companion animal's health should be as easy as checking your own. Its best-known product is an at-home health-check experience — the homepage's central promise is "반려동물의 건강을 집에서 1분만에 확인" ("check your pet's health at home in one minute") — which lowered the barrier between noticing something and knowing something about a pet's wellbeing. (2017 founding is widely-documented public knowledge; the mission framing here is quoted from the live homepage.)

From that health-check root the brand grew outward into a full "건강한 반려생활" ("healthy companion life") platform: Fitpet Mall (fitpetmall.com) curates food, treats, and supplies chosen against health criteria ("엄격한 기준으로 고른 제품"), and a hospital-finding and booking flow closes the loop ("좋은 병원 찾고 진료 예약까지"). The "16만+" stat on the corporate hero is the trust anchor — scale as evidence that the health-first approach works.

What Fitpet's design refuses is the heavy, anxious chrome of both legacy commerce (shadow-stacked cards, banner clutter) and clinical healthcare (cold institutional palettes). What it embraces is a single friendly blue, a near-flat surface system, rounded pill geometry, and plain, warm Korean copy — signalling a brand that wants pet health to feel approachable, not intimidating.

Principles

1. Health first, commerce second. Products exist to serve the pet's wellbeing, not the other way around. UI implication: lead with health benefit and curation criteria; keep sale urgency scoped to clearly-labeled deal modules.
2. One action, one blue. #0050ff means "do this." UI implication: reserve the saturated brand blue for the single primary action so the next step is never ambiguous.
3. Flat and fast. Mobile-native clarity beats decorative depth. UI implication: no shadows; separate with the #f4f7fa tint and hairlines; keep the grid quick to scan.
4. Approachable, not clinical. Pet health should feel warm. UI implication: rounded pills, friendly Pretendard type, and plain Korean labels instead of cold veterinary framing.
5. Trust through concreteness. UI implication: prefer real numbers (the 85px "16만+" stat) and specific claims over adjectives; make discounts and ratings literal with the coral #ff5967 and yellow #ffd633.

Personas

Personas below are fictional archetypes informed by publicly observable Fitpet user segments (Korean pet owners managing health and shopping for supplies), not individual people.

김하늘, 31, 서울. A first-time dog owner who worries about spotting health issues early. Uses Fitpet's at-home check because a one-minute test at home is less stressful than an immediate vet visit. Trusts the brand because the copy explains rather than alarms.

이준호, 38, 경기. A busy cat owner who buys food and litter monthly on Fitpet Mall. Values the curated "엄격한 기준으로 고른 제품" framing and the clearly-labeled hot deals; scans the flat product grid quickly on his phone.

박서연, 44, 부산. A multi-pet household manager who uses Fitpet to find a good animal hospital and book appointments. Appreciates that finding care and shopping live in one calm, non-intimidating app.

Colors

Primary

• Fitpet Blue (#0050ff): The brand's signature saturated blue. It is the dominant color of the logo and the background fill of the mall's primary action button — the system's single "do this" color.
• Deep Navy (#0035a8): A darker brand navy used for emphasis text and dense-blue surfaces on the mall.
• Marketing Blue (#1482ff): A lighter, brighter blue used as the accent on the corporate flagship (links, active nav, highlight blocks).

Accent

• Paw Orange (#ff9300): The warm secondary in the logo mark — a friendly counterweight to the blue.
• Sale Coral (#ff5967): Reserved for discount-percentage badges on product cards.
• Rating Yellow (#ffd633): Star ratings, points, and reward highlights on the mall.

Text Hierarchy

• Ink (#1b1e21): Primary near-black for mall headings and titles — warmer than pure black.
• Corporate Ink (#282828): Near-black used on the corporate flagship's dark bands and blocks.
• Body Slate (#42494f): Standard body and product-title text on the mall.
• Muted Slate (#727a82): Secondary text, captions, metadata.
• Muted Alt (#8c949c): Alternate muted slate for supporting labels.
• Faint Grey (#a7aeb5): Lowest-emphasis text — placeholders, disabled labels.
• Pure Black (#000000): Corporate flagship body and nav text.
• On-Dark (#eeeeee): Light text on the corporate dark bands.

Neutral & Surface

• Pure White (#ffffff): Page background, card surfaces, text on blue/dark.
• Surface Grey (#f4f7fa): The dominant cool-grey tint — segments sections, fills the search field, backs product areas.
• Promo Tint (#edf4ff): Light-blue background for coupon and first-purchase promo strips.
• Hairline (#eef1f5): Thin borders and dividers on white cards.
• Border (#dfe3e8): Standard border for containers and chip outlines.
• Border Strong (#c2c8cf): Higher-contrast outline for filter chips and toggled controls.

Typography

Font Family

• Corporate display / hangul: Noto Sans KR — hero headlines and stats on fitpet.co.kr, at weight 600.
• Corporate latin / nav: Poppins — latin nav labels and the logotype, at weight 700.
• Mall / product: Pretendard (with system fallbacks) — every headline, title, and body string on fitpetmall.com.

Hierarchy

Principles

• Two fonts, two surfaces: Noto Sans KR + Poppins carry the corporate brand story; Pretendard carries the commerce product. They never mix on the same surface.
• Weight as the persuade/inform switch: headlines and section titles sit at 600–700; product titles and body drop to 400. The weight jump is the primary hierarchy signal.
• Big, confident hero numbers: the 85px weight-600 stat is the corporate site's boldest typographic move — scale communicates trust ("16만+" pets checked).
• Hangul-first body sizing: mall body sits at a legible 16px in the search field and 17px for product titles, dense enough for information-rich commerce.

Layout

Spacing System

• Base rhythm: 4 / 8 / 15 / 16 / 24 / 39 px (measured paddings)
• Notable: corporate nav uses a tall 39px vertical padding for a spacious 100px header; ghost CTA runs 10px 50px for a wide tap target
• Mall chips and buttons use tighter 7–14px horizontal padding for dense browsing

Grid & Container

• Corporate flagship: centered single-column hero anchored by the 40px headline and the 85px stat, alternating white and dark (#282828) editorial bands
• Mall: grid of product cards on a #f4f7fa surface, horizontally-scrolling category/filter chip rows, coupon strips in #edf4ff
• Cards group related products at a consistent 10px radius

Whitespace Philosophy

• Flat segmentation: sections separate by background tint (#f4f7fa vs #ffffff) and hairlines, not by shadow
• Editorial calm on brand, dense grid on commerce: the corporate site breathes; the mall packs product cards efficiently while keeping generous chip spacing
• Pill rhythm: repeated 999px chips and ~28–30px buttons create a soft, consistent horizontal cadence

Border Radius Scale

• Small (5px): discount badges, fine-grained tags
• Medium (10px): cards, inputs, promo strips — the workhorse
• Chip (28–30px): primary buttons, ghost CTAs
• Full (999px): filter chips, fully-rounded pills

Responsive Behavior

Breakpoints

Touch Targets

• Primary button at 48px height, filter chips at 43px — comfortably tappable
• Search field at 50px height, full-width on mobile
• Corporate nav links inside a tall 100px header (39px vertical padding)

Collapsing Strategy

• Corporate hero: 40px headline and 85px stat scale down on mobile, weight 600 maintained
• Mall category / filter chips: horizontal scroll on narrow viewports
• Product grid: multi-column collapses to 2-up then single column
• Tinted (#f4f7fa) and white bands maintain full-width treatment

Image Behavior

• Product imagery and illustrations carry no shadow at any size, consistent with the flat system
• Cards maintain the 10px radius across breakpoints

Elevation & Depth

Shadow Philosophy: Fitpet is a near-shadowless system. Live inspection found box-shadow: none across the corporate hero, nav, and the mall's cards, chips, and buttons; the only depth cue is a whisper-thin rgba(0, 0, 0, 0.03) border repeated across product cards. Grouping is communicated entirely through the flat #f4f7fa tint and thin #eef1f5 / #dfe3e8 hairlines. This keeps a data-dense commerce grid feeling fast, mobile-native, and calm rather than heavy. When emphasis is needed the system reaches for color — the blue #0050ff, the coral #ff5967, the yellow #ffd633 — never elevation.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.none: none
• shadow.hairline: rgba(0, 0, 0, 0.03) 0px 0px 0px 1px

Motion & Easing

Durations:

Easings:

Motion rules: Motion is functional and quiet, matching the flat, fast aesthetic. Pill chips and buttons respond to press with a subtle scale/opacity shift; product cards and results fade in from below at motion-standard / ease-enter. No bounce or spring — a pet-health brand signals steadiness and care, not playfulness. Under prefers-reduced-motion: reduce, all transitions collapse to instant and the product stays fully functional.

Components

Buttons

Primary Action

• Background: #0050ff
• Text: #ffffff
• Radius: 28px
• Padding: 7px 17px
• Height: 48px
• Font: 13px Pretendard weight 400
• Use: Primary / recommend action button on the mall ("추천") — the single high-emphasis action

Ghost Pill (over imagery)

• Text: #ffffff
• Border: 2px solid #ffffff
• Radius: 30px
• Padding: 10px 50px
• Height: 42px
• Font: 12px Poppins weight 600
• Use: Outline CTA over corporate hero imagery ("일반채용")

Inputs & Forms

Search Field

• Background: #f4f7fa
• Text: #000000
• Radius: 10px
• Padding: 1px 50px
• Height: 50px
• Font: 16px Pretendard
• Placeholder: #a7aeb5 ("검색어를 입력해 주세요.")
• Use: Filled, borderless search field on the mall

Cards & Containers

Product Card

• Background: #ffffff
• Border: 1px solid #eef1f5
• Radius: 10px
• Shadow: none
• Use: Product card on the grey #f4f7fa surface — hairline separation, no elevation

Promo Strip

• Background: #edf4ff
• Text: #42494f
• Radius: 10px
• Use: First-purchase / coupon promo strip ("첫 구매 시 인기상품 한정 특가!")

Badges

Discount Badge

• Background: #ff5967
• Text: #ffffff
• Radius: 5px
• Padding: 5px
• Font: 12px Pretendard weight 700
• Use: Discount-percentage badge on product cards ("55%")

Filter Chip

• Text: #42494f
• Border: 1px solid #c2c8cf
• Radius: 999px
• Padding: 0 14px
• Height: 43px
• Font: 13px Pretendard weight 400
• Use: Category / filter chip on the mall ("펫루키")

Navigation

• Text: #000000
• Font: 13px Poppins weight 700
• Padding: 39px 15px
• Active: violet-blue #1482ff text on active item
• Use: Corporate top-nav ("회사 소개", "팀 문화", "개발 채용", "TECH BLOG", "FAQ")

---

Verified: 2026-07-02 (omd:add-reference CREATE — Tier 1 live inspect, two surfaces) Tier 1 sources: https://fitpet.co.kr/ | https://www.fitpetmall.com/ | https://fitpet.medium.com/ Tier 2 sources: getdesign.md/fitpet (0 DESIGN.md files — no entry); styles.refero.design/?q=fitpet (not listed — generic results only) Conflicts unresolved: none

States

Do's and Don'ts

Do

• Reserve the brand blue (#0050ff) for the single primary action — keep it the one "do this" color
• Use the #f4f7fa surface tint and #eef1f5 / #dfe3e8 hairlines to separate sections, not shadows
• Keep card and input corners at ~10px and interactive pills at 28px–999px
• Use near-black #1b1e21 for mall headings and slate #42494f for product titles instead of pure black
• Use Pretendard on commerce surfaces and Noto Sans KR + Poppins on the corporate brand site
• Use the coral #ff5967 only for discount percentages and the yellow #ffd633 only for ratings/points
• Back coupon and first-purchase strips with the light #edf4ff tint
• Let big weight-600 numbers (the 85px stat) carry trust on the corporate hero

Don't

• Spread the brand blue across many elements — it dilutes the single-action signal
• Add drop shadows for elevation — Fitpet is a flat, hairline-and-tint system
• Mix a third accent color into the palette — blue is the brand, coral and yellow are strictly semantic
• Use sharp square corners on interactive controls — everything is rounded or a pill
• Set mall body or product titles in pure #000000 — use #1b1e21 / #42494f
• Swap the two font systems across surfaces — Pretendard is the mall, Noto Sans KR / Poppins is corporate
• Use the sale coral or rating yellow as decorative fills unrelated to price or rating
• Crowd the corporate hero — it relies on editorial whitespace and one bold stat

Voice & Tone

Fitpet's voice is warm, reassuring, and health-first — it treats companion animals as family and the owner as a caretaker who deserves clarity, not upsell. The corporate flagship speaks in plain, benefit-led Korean ("반려동물의 건강을 집에서 1분만에 확인" — "Check your pet's health at home in one minute"), while the mall is practical and friendly, labeling deals and categories in everyday language. The through-line is trust: health claims are concrete, and commerce copy stays low-pressure even during sales.

Voice samples (verbatim from live surfaces):

• "반려동물의 건강을 집에서 1분만에 확인" — corporate hero (health-first promise). (verified live 2026-07-02)
• "건강한 반려생활의 시작 - 핏펫" — mall page title / positioning line. (verified live 2026-07-02)
• "좋은 병원 찾는 것도 핏펫에선 쉽게 병원 찾고 진료 예약까지" — corporate section (end-to-end care). (verified live 2026-07-02)

Forbidden register: fear-based pet-health scare copy, aggressive sales urgency beyond clearly-labeled deals, undefined veterinary jargon left unexplained, exclamation-heavy hype outside the deal context.

Agent Prompt Guide

Quick Color Reference

• Primary action: Fitpet Blue (#0050ff)
• Deep navy emphasis: (#0035a8)
• Corporate accent: Marketing Blue (#1482ff)
• Sale badge: Coral (#ff5967)
• Ratings / points: Yellow (#ffd633)
• Heading (mall): Ink (#1b1e21)
• Body / product title: Slate (#42494f)
• Muted text: (#727a82), (#8c949c), (#a7aeb5)
• Background: White (#ffffff)
• Surface tint: (#f4f7fa)
• Promo tint: (#edf4ff)
• Hairlines: (#eef1f5), (#dfe3e8), (#c2c8cf)

Example Component Prompts

• "Create a mall product card: white #ffffff background, 1px solid #eef1f5 border, 10px radius, no shadow, on a #f4f7fa surface. Title 17px Pretendard weight 400, #42494f. Discount badge top-left: #ff5967 background, white text, 5px radius, 12px weight 700."
• "Build a primary action button: #0050ff background, white text, 28px radius, 7px 17px padding, 48px height, 13px Pretendard."
• "Design a search field: #f4f7fa background, no border, 10px radius, 50px height, 16px Pretendard, placeholder #a7aeb5."
• "Create a filter chip row: transparent background, 1px solid #c2c8cf border, 999px radius, 0 14px padding, 43px height, 13px Pretendard, #42494f text."
• "Design a corporate hero: white canvas, Noto Sans KR headline 40px weight 600 #000000, an 85px weight-600 stat, a ghost pill CTA (transparent, 2px solid #ffffff, 30px radius) over imagery. Nav links 13px Poppins weight 700, #1482ff on active."

Iteration Guide

1. Blue (#0050ff) is the single action color — don't spread it
2. No shadows — separate with #f4f7fa tint and #eef1f5 / #dfe3e8 hairlines
3. ~10px radius for cards/inputs; 28–999px pills for buttons/chips
4. Mall text is #1b1e21 / #42494f, never pure black; corporate text is #000000
5. Coral #ff5967 = discount only; yellow #ffd633 = rating/points only
6. Pretendard on the mall; Noto Sans KR + Poppins on the corporate site

---

Governance

Known Gaps

• Contrast, discount-badge. Text #ffffff on #ff5967 measures 3.05:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.