Design System Inspiration of Fitpet

1. 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

2. Color Palette & Roles

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.

3. Typography Rules

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.

4. Component Stylings

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

5. Layout Principles

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

6. Depth & Elevation

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.

7. 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

8. 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

9. 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

---

10. 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.

11. 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.

12. 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.

13. 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.

14. States

15. 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.