Design System Inspiration of Gangnamunni (강남언니)

1. Visual Theme & Atmosphere

강남언니's web surface is the rare medical platform that reads as warm rather than clinical. The page opens on pure white (#ffffff) with deep blue-gray text (#131517 — --cell-base-color-bluegray-900) and a single saturated orange (#d54300 / #FF540F accent) doing all the brand work. There is no "medical blue", no surgical green, no pastel reassurance palette. Instead the system commits to one warm hue and lets the rest of the canvas stay cool-neutral — bluegray, never true gray. The combination reads as honest information first, hospitality second — appropriate for a category (성형수술·피부시술 reviews and hospital discovery) where users arrive cautious and need facts before they need feelings.

The typography is Pretendard JP Variable (Korean: PretendardVariable) at five weights (300/400/500/600/700) across a 15-step size ramp (--cell-base-font-size-100 = 11px through --cell-base-font-size-1500 = 48px). Pretendard's tight metrics and excellent Korean-Latin pairing make it a natural choice for a market where every screen mixes 한글 (hospital names, body parts, procedure names) with Latin numerals and the occasional English brand term (보톡스, 필러, BTL EmFace). The system uses 600 weight for emphasis on labels, 700 for prices and amounts, and stays at 400 for body — no display-light experimentation, no Stripe-style weight 300 headlines. This is finance-precision typography in a beauty-medical context.

What truly distinguishes 강남언니 is what it refuses: no shadows on cards, no gradients on CTAs, no decorative illustrations on empty states, no warm-pink consumer-beauty cues despite the category. Elevation is communicated by 1px hairline borders in --cell-base-color-bluegray-200 (#d8dfe6) and surface tinting through bluegray-50 (#f7f9fa) or orange-50 (#fef6f4) instead of drop shadows. The footer is a single broad band of bluegray-100 (#f5f5f5) capped by a 4px solid #d6d6d6 top divider — the only "heavy" structural line in the whole layout, used like a paragraph break between content and meta.

The brand operates two design systems by name (confirmed by the team's own engineering blog at https://blog.gangnamunni.com/post/welchis/):

• Cell — mobile-first (iOS, Android, mobile web). Compiled tokens are visible on the public web bundle as --cell-base-* and --cell-semantic-*. This is what the consumer surface uses.
• Welchis — PC back-office system. Welchis Design (tone/manner/style) + Welchis UI (Figma library + web library). Storybook is the handoff bridge; no Zeplin pixel-measure.

This DESIGN.md focuses on Cell — the consumer-facing token system.

Key Characteristics:

• One brand hue: orange #d54300 (semantic strong) / #f66336 (semantic regular) / #FF540F (raw accent fill used on hot-deal and review badges)
• Pretendard JP Variable across all surfaces — Korean-Latin parity at every weight
• Bluegray 9-step neutral scale (50 → 900), never warm gray, never pure black
• Zero card shadows by default — elevation = 1px hairline borders + tinted surfaces
• 8px base spacing grid (--cell-base-dimension-scale-200)
• Radius ramp 2px → 32px → 9999px, with 16px (radius-400) as the default chrome radius for buttons / pills / cards
• Status palette already wired: green-400 success, red-500 danger, yellow-400 warning, blue-500 info — used sparingly
• Information-density bias: medical category data (price ranges, review counts, doctor specialties) gets list-and-table treatment, not card-hero treatment

2. Color Palette & Roles

Brand (Orange)

• Brand Strong (#d54300): --cell-base-color-orange-500. Deep brand orange. Used for the primary brand mark, brand-strong text, pressed states.
• Brand Regular (#f66336): --cell-base-color-orange-400. --cell-semantic-color-fg-brand-regular-default. Primary brand FG — links, icons, accent text.
• Brand Strong FG (#ab350c): --cell-base-color-orange-600. --cell-semantic-color-fg-brand-strong-default. Used where brand text must override a tinted background.
• Brand Subtle Border (#fa8563): --cell-base-color-orange-300. --cell-semantic-color-border-brand-subtle-default. Subtle orange-tinted border on selected pills, chip outlines.
• Brand Tint 100 (#feeee9): --cell-base-color-orange-100. Surface for promoted rows, hot-deal cards, brand-tinted badges.
• Brand Tint 50 (#fef6f4): --cell-base-color-orange-50. Lightest brand wash — section backgrounds, hover wash on neutral surfaces.
• Brand Accent Raw (#FF540F): Raw hex emitted by Tailwind utilities on the live home for "hot-deal" / review-flag fills. Slightly more saturated than #d54300; co-existent with the semantic ramp.

Neutral (Bluegray)

• Text Primary (#131517): --cell-base-color-bluegray-900. Headings, primary text, important labels.
• Text 800 (#21272d): --cell-base-color-bluegray-800. Strong border (--border-neutral-strong-default), inverse-bg text.
• Text Secondary (#3a444d): --cell-base-color-bluegray-700. Body text, secondary headings.
• Text 600 (#515e6a): --cell-base-color-bluegray-600. Long-form body.
• Text Tertiary (#697683): --cell-base-color-bluegray-500. Captions, meta info, timestamps.
• Text Placeholder (#8694a2): --cell-base-color-bluegray-400. Input placeholders, disabled text.
• Border 300 (#b5bfc9): --cell-base-color-bluegray-300. Stronger dividers.
• Border Default (#d8dfe6): --cell-base-color-bluegray-200. --cell-semantic-color-border-neutral-subtle-default. Default 1px border on cards, inputs, header sign-in button.
• Border Weak (#e4e8ec): --cell-base-color-bluegray-150. --cell-semantic-color-border-neutral-weak-default. Hairline dividers in lists.
• Surface Subtle (#eff2f5): --cell-base-color-bluegray-100. Card subtle bg, footer band, section break.
• Surface Faint (#f7f9fa): --cell-base-color-bluegray-50. Lightest surface wash.
• Pure White (#ffffff): --cell-base-color-white. Canvas, primary surface.

Status

• Success FG (#27a86d): --cell-base-color-green-400. Success badges, checkmarks.
• Success Strong (#1a8656): --cell-base-color-green-500. Strong success border, badge stroke.
• Danger (#d73f39): --cell-base-color-red-500. Field error, danger CTA, decline.
• Danger Weak (#f75e54): --cell-base-color-red-400. Inline error text accent.
• Warning (#f9c647): --cell-base-color-yellow-400. Caution badges (#fff8e9 tint surface).
• Info / Certification (#3270d6): --cell-base-color-blue-500. Verified-clinic badges, info banners.
• Payment (#0b819d): --cell-base-color-lightblue-500. Payment-flow accents, refund states.
• Trending (pink-300 ramp present): --cell-base-color-pink-300 is referenced by --cell-semantic-color-border-trending-subtle-default — soft pink for trending/popular chips. Used sparingly, never as primary brand.

Tinted Surfaces (for badges)

• Orange tint (#feeee9 / #fef6f4)
• Green tint (#e8f6ec / #d5ebdc)
• Red tint (#ffedeb / #fff6f5)
• Yellow tint (#fff0d3 / #fff8e9)
• Blue tint (#ebf2ff / #f5f9ff)

3. Typography Rules

Font Family

• Primary: Pretendard JP Variable, fallback PretendardVariable → PretendardVariable Fallback → sans-serif
• Monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
• CJK variants in the token system (selected by locale): Pretendard JP Variable (default/JP), Noto Sans JP, Noto Sans SC, Noto Sans TC, Noto Sans Thai, PingFang SC/TC, Hiragino Sans, Sukhumvit — the brand supports Korean, Japanese, Thai, and Chinese rendering through the same Cell semantic typography classes.

Weights

• 300 (light), 400 (regular), 500 (medium), 600 (semibold), 700 (bold) — all five emitted from --cell-base-font-weight-{300..700}. The product uses 400 for body, 500-600 for labels/buttons, 700 for prices and amounts. 300 exists in the ramp but is rare on-product.

Size Ramp (--cell-base-font-size-*)

Semantic typography classes (Cell)

The system emits 7 families × multiple sizes × {regular, strong, strongest, subtle}:

• cell-semantic-typography-display-{sm,md}-strongest
• cell-semantic-typography-title-{xs,sm,md,lg,xl}-strong
• cell-semantic-typography-label-{xxs,xs,sm,md,lg,xl}-{regular,strong,subtle}
• cell-semantic-typography-body-single-{sm,md,lg,xl}-{regular,strong,subtle}
• cell-semantic-typography-body-multi-{sm,md,lg,xl}-{regular,subtle}
• cell-semantic-typography-description-{xs,sm,md,lg,xl}-{regular,subtle}
• cell-semantic-typography-caption-*

Principles

• Pretendard everywhere. No serif, no display custom font, no script. Pretendard's Korean-Latin metrics are the brand's typographic constant.
• Numbers are bold (700). Prices, review counts ("후기 7,300건"), star ratings, distance ("0.4km") all use 700 weight against 400-weight body. The numeric weight contrast is how the eye picks out information.
• No tracking experiments. Letter-spacing token --cell-base-font-letterspacing-none is the default everywhere; letterspacing-200 exists only on display-strongest. No Stripe-style negative tracking on headlines.
• Display-strongest is rare. Display sizes (display-{sm,md}-strongest) appear on marketing surfaces; the consumer app surface stays in title-*-strong (20-32px) and below.

4. Component Stylings

Buttons

Primary Brand

• Background: #d54300
• Text: #ffffff
• Border: none
• Radius: 16px (--cell-base-radius-400)
• Padding: 12px 20px (spacing-300 vertical / spacing-500 horizontal)
• Font: 16px / 600 / Pretendard JP Variable
• Hover: Background #ab350c (orange-600)
• Pressed: Background #93250a (orange-700)
• Disabled: Background #fbb8a4 (orange-200)
• Use: Primary CTA — "병원 예약하기", "후기 작성하기", "이벤트 보기"

Primary Brand (raw accent variant)

• Background: #FF540F
• Text: #ffffff
• Border: 1px solid #FF540F
• Radius: 16px
• Padding: 12px 20px
• Font: 16px / 600 / Pretendard JP Variable
• Use: Hot-deal CTA, time-limited promo — raw Tailwind utility variant of the brand color, slightly more saturated than the semantic #d54300.

Outline / Secondary

• Background: #ffffff
• Text: #131517 (bluegray-900)
• Border: 1px solid #d8dfe6 (bluegray-200)
• Radius: 16px (32px → pill when small)
• Padding: 6px 14px (sign-in size) → 10px 16px (default) → 12px 20px (large)
• Font: 14-16px / 400-500 / Pretendard JP Variable
• Hover: Background #f7f9fa (bluegray-50)
• Disabled: Text #8694a2, border #e4e8ec
• Use: "로그인/가입" header CTA (32px tall, 16px radius — observed live), filter pills, neutral secondary action.

Ghost / Tertiary

• Background: transparent
• Text: #3a444d (bluegray-700)
• Border: none
• Radius: 16px
• Padding: 6px 12px
• Font: 14px / 500 / Pretendard JP Variable
• Hover: Background rgba(216,223,230,0.4)
• Use: Tab strip, in-card secondary action, "더보기".

Brand Subtle (tinted)

• Background: #fef6f4 (orange-50)
• Text: #d54300 (orange-500)
• Border: 1px solid #feeee9 (orange-100) — optional
• Radius: 16px
• Padding: 8px 14px
• Font: 14px / 600 / Pretendard JP Variable
• Use: Secondary-yet-brand CTA — "관심 병원에 추가", "쿠폰 받기".

Danger

• Background: #d73f39 (red-500)
• Text: #ffffff
• Border: none
• Radius: 16px
• Padding: 10px 16px
• Font: 14px / 600 / Pretendard JP Variable
• Hover: Background #b02b27 (red-600)
• Use: Destructive action — "예약 취소", "후기 삭제".

Icon Button

• Background: transparent
• Border: none
• Radius: 9999px (radius-full)
• Hit target: 40px × 40px (8px padding around 24px icon)
• Hover: Background #eff2f5 (bluegray-100)
• Use: Bookmark, share, dismiss.

Inputs & Forms

Text Input — Default

• Background: #ffffff
• Text: #131517
• Placeholder: #8694a2 (bluegray-400)
• Border: 1px solid #d8dfe6 (bluegray-200)
• Radius: 12px (radius-300)
• Padding: 12px 16px
• Font: 16px / 400 / Pretendard JP Variable
• Height: 48px
• Focus: Border #d54300 (orange-500), focus ring 2px outset of radius-300
• Error: Border #d73f39, ring red-500
• Disabled: Background #f7f9fa, text #8694a2, border #e4e8ec
• Use: Standard form field — sign-in, review form, hospital review search.

Search Input — Hero

• Background: #eff2f5 (bluegray-100) or #ffffff with border
• Text: #131517
• Placeholder: #697683 (bluegray-500) — "병원, 시술, 의사 검색"
• Border: none (pill) or 1px #d8dfe6
• Radius: 9999px (radius-full)
• Padding: 14px 20px (left icon 44px wide)
• Font: 16px / 500 / Pretendard JP Variable
• Height: 52px
• Use: Hero search bar above category nav.

Cards & Containers

Doctor / Clinic Card

• Background: #ffffff
• Border: 1px solid #d8dfe6 (bluegray-200) — or none on grid layouts where the bluegray-50 page bg provides separation
• Radius: 12px (radius-300)
• Padding: 16px
• Shadow: none by default — elevation is conveyed by border + bluegray-50 page wash
• Hover: Background tint #f7f9fa, no shadow change
• Title: 16-18px / 700 / #131517
• Meta row: 13px / 400 / #697683 — "강남구 · 0.4km · 후기 7,300건"
• Price row: 14px / 700 / #131517 with strikethrough on --list-price in #8694a2
• Use: Hospital list cards, doctor cards, treatment cards.

Review / Article Card (gap-2 column flex)

• Background: transparent (image-led)
• Border: none
• Radius: 12px on the image, no container border
• Title: 16px / 400 / #000000 (live-observed as rgb(0,0,0) — slightly heavier than the semantic bluegray-900 on rich-media surfaces)
• Padding: 0 (image touches container edges, text below)
• Height observed: 330px (image + title + meta)
• Use: 칼럼/community article grid.

Event / Promo Card (orange-tinted)

• Background: #fef6f4 (orange-50)
• Border: 1px solid #feeee9 (orange-100)
• Radius: 12px
• Padding: 16px
• Heading accent: #d54300 or #FF540F flag tag (top-left)
• Use: 핫딜 / 이벤트 / 한정 promo block.

Badges, Tags & Pills

Brand Badge ("HOT", "특가")

• Background: #FF540F
• Text: #ffffff
• Border: none
• Radius: 4px (radius-100)
• Padding: 2px 6px
• Font: 11-12px / 700 / Pretendard JP Variable
• Use: Time-sensitive flags overlaid on event cards.

Success Badge ("인증 병원")

• Background: #e8f6ec (green-100)
• Text: #1a8656 (green-500)
• Border: 1px solid #aed2ba (green-200) — optional
• Radius: 9999px
• Padding: 2px 8px
• Font: 12px / 600 / Pretendard JP Variable
• Use: Verification, success indicators.

Info Badge ("의료광고 사전심의")

• Background: #ebf2ff (blue-100)
• Text: #1b59bd (blue-600)
• Border: none
• Radius: 4px
• Padding: 2px 6px
• Font: 11px / 600 / Pretendard JP Variable
• Use: Regulatory / certification labels.

Neutral Pill (category)

• Background: #ffffff
• Text: #131517
• Border: 1px solid #d8dfe6
• Radius: 9999px
• Padding: 6px 12px
• Font: 13-14px / 500 / Pretendard JP Variable
• Selected: Background #fef6f4 (orange-50), text #d54300, border #fa8563
• Use: Category filter strip — "보톡스", "필러", "리프팅", "지방성형".

Navigation

Global Header

• Background: #ffffff
• Border-bottom: 0px solid #f5f5f5 (effectively a hairline divider via Tailwind utility — visually a subtle seam)
• Height: 48px (observed live)
• Logo left, sign-in button right (outline variant — 32px tall, 16px radius)
• Font: 16px / 400 / Pretendard JP Variable on link labels

Category Nav (icon + label, horizontal)

• Item: 88px tall (icon 56px stacked above 13px label)
• Background: transparent
• Font: 13px / 400 / #131517
• Use: Procedure category grid on home (제모 / 가슴성형 / 보톡스 / 필러 / 리프팅 / 모발이식 ...)

Bottom Nav (mobile primary chrome)

• Background: #ffffff (translucent on iOS via backdrop-blur on real mobile shell)
• Border-top: 1px solid #d8dfe6
• Height: 64-65px
• Five items: 홈 / 병원 / 이벤트 / 커뮤니티 / 칼럼
• Active state: icon and label switch to #d54300 (orange-500)
• Font: 11px / 500 / Pretendard JP Variable on label

Footer

• Background: #f5f5f5 (bluegray-100 alias)
• Border-top: 4px solid #d6d6d6 — the system's heaviest single divider
• Padding: 30px
• Text: 13-14px / 400 / #3a444d
• Link rows: Company / PR / 병원입점신청 / 이용약관 / 인재영입 / 위치기반서비스 이용약관 / 개인정보처리방침
• No social icon row inline — kept text-only.

Status & Inline States

Field Error

• Border: 1px solid #d73f39 on input
• Helper text: 12-13px / 400 / #d73f39 below input
• Icon: optional 16px info glyph in #d73f39

Toast (bottom-center)

• Background: #131517 (bluegray-900)
• Text: #ffffff 14px / 500
• Border: none
• Radius: 12px
• Padding: 12px 16px
• Duration: 3s

Skeleton

• Background: #eff2f5 (bluegray-100)
• Radius: matches component being loaded (4 / 8 / 12 / 16)
• Shimmer: 8% white gradient sweep, 1.2s linear

---

Verified: 2026-05-13 Tier 1 sources: https://www.gangnamunni.com/ (live DOM getComputedStyle on header / sign-in button / category nav / article card / bottom nav / footer); https://next-static.gangnamunni.com/cheetah/rc-ad53c62/_next/static/css/d246c5b2edcb00b6.css (production CSS bundle — full --cell-base-* + --cell-semantic-* token map extracted); https://blog.gangnamunni.com/post/welchis/ (engineering blog confirming Cell + Welchis two-system architecture) Tier 2 sources: Tier 2: not found in getdesign/refero as of 2026-05-13 (getdesign.md/gangnamunni → "No designs found"; styles.refero.design/?q=gangnamunni and ?q=강남언니 → no brand-matched style cards) Conflicts unresolved: none (no Tier 2 data to conflict with Tier 1)

5. Layout Principles

Spacing System

• Base unit: 8px (--cell-base-dimension-scale-200 = 0.5rem)
• Full scale (rem): 25 → 0.0625 (1px), 50 → 0.125 (2px), 75 → 0.1875 (3px), 100 → 0.25 (4px), 150 → 0.375 (6px), 200 → 0.5 (8px), 250 → 0.625 (10px), 300 → 0.75 (12px), 350 → 0.875 (14px), 400 → 1 (16px), 500 → 1.25 (20px), 600 → 1.5 (24px), 700 → 1.75 (28px), 800 → 2 (32px), 900 → 2.25 (36px), 1000 → 2.5 (40px), 1200 → 3 (48px), 1400 → 3.5 (56px), 1600 → 4 (64px), 1800 → 4.5 (72px), 2000 → 5 (80px), 2400 → 6 (96px)
• Page-section vertical rhythm typically uses spacing-1200 (48px) between major sections, spacing-800 (32px) within sections.

Grid & Container

• Mobile-first; the consumer app surface is the primary design target. Web is a re-skin of the mobile layout.
• Max content width on web home: ~1200px centered with 24px side padding on tablet, 48px+ on desktop.
• Category nav: 4 columns mobile, 8-10 columns desktop, icons fixed 56px.
• Card grids: 2 columns mobile, 3-4 columns desktop, 16px gap (spacing-400).

Whitespace Philosophy

• Information density first. The category-discovery surface is intentionally dense — users scanning for a treatment do not want a hero. Spacing within cards is tight (16px paddings) while between cards remains generous (16-24px gaps).
• Footer-as-paragraph-break. The single 4px #d6d6d6 divider is the strongest horizontal rule in the layout — it tells the user "you've reached company info, what's above was content."
• Tint, not shadow. Section breaks use bluegray-50 or orange-50 washes rather than elevation. Saves visual budget for the few places where contrast really matters (price, review count, certified-clinic badge).

Border Radius Scale

• Micro (2-4px): Inline badges, small tags
• Small (6-8px): Inline chips, status pills
• Standard (12px): Cards, inputs — the workhorse
• Medium (16px): Default chrome radius — buttons, sign-in pill, search containers, primary CTA
• Large (20-24px): Bottom sheets, large card variants
• 32px raw: Special-case rounded chrome (e.g., floating action buttons, full-width media containers)
• full (9999px): Search bar, avatars, icon buttons, category pills

6. Depth & Elevation

Elevation philosophy. Gangnamunni's medical context demands trust, and dramatic shadows look "consumer-app fun" rather than "clinically clean". The system communicates depth through hairline borders + tinted backgrounds rather than shadow stacks. Drop shadows appear only at popover/sheet/modal levels — never on resting cards. The single heaviest divider (4px #d6d6d6 footer top) carries the structural break that other systems would use a section shadow for.

7. Do's and Don'ts

Do

• Use #d54300 (or raw #FF540F for time-sensitive flags) as the sole brand accent — orange is the entire brand identity
• Use bluegray for neutrals — never warm gray, never pure black on text
• Default to 1px #d8dfe6 borders on cards instead of drop shadows
• Use 700 weight for prices and quantitative data; let the numeric weight do the visual highlighting
• Use orange-50 (#fef6f4) as a tint surface for event/promo cards — keeps the brand orange visible without an overwhelming CTA-orange wash
• Pretendard JP Variable across all locales — the system is multilingual-by-design
• Use the 16px (radius-400) chrome radius for buttons and sign-in CTAs — confirmed by live header inspection
• Use bluegray-900 (#131517) for headings — not #000

Don't

• Don't introduce a second hue as a brand color — orange is singular
• Don't use pink as a primary CTA fill (the trending-pink token exists but is reserved for chips, never CTA)
• Don't apply drop shadows to resting cards — elevation = border + tint
• Don't pick a display-light weight (300) for headlines — the brand is in the 400-700 register
• Don't use pure black (#000000) for headings — always #131517 bluegray-900 (live-observed black-on-rich-media images is an exception)
• Don't substitute pure gray for the bluegray neutrals — the cool undertone is intentional
• Don't add tracking experiments on Korean text — letterspacing-none is the default
• Don't replace category icons with stock photography — the home is icon-grid-driven

8. Responsive Behavior

Breakpoints

Touch Targets

• Bottom nav items: 64px tall, ≥ 48px wide
• Sign-in button (header): 32px tall — small for desktop, the mobile shell uses a different chrome
• Category icons: 56px icon + 13px label = 88px total touch target
• Card-level tap zones span full card width (no hidden hit-targets)

Collapsing Strategy

• Header: full nav links → search icon + sign-in pill (mobile)
• Category nav: 8-10 columns → 4 columns, scrollable horizontal strip on narrow tablet
• Card grid: 4 → 3 → 2 → 1 column
• Footer: link grid stacks vertically below 640px

Image Behavior

• Doctor / clinic / event card images use 12px radius (matching card radius)
• Aspect ratios: 1:1 (doctor portrait), 4:3 (treatment), 16:9 (event banner)
• Always object-fit: cover — never stretched

9. Agent Prompt Guide

Quick Color Reference

• Primary brand: Orange #d54300 (--cell-base-color-orange-500)
• Brand FG regular: Orange #f66336 (--cell-base-color-orange-400)
• Brand accent raw: #FF540F
• Background canvas: #ffffff
• Surface subtle: Bluegray-100 #eff2f5 / Bluegray-50 #f7f9fa
• Heading: Bluegray-900 #131517
• Body: Bluegray-700 #3a444d
• Caption: Bluegray-500 #697683
• Border default: Bluegray-200 #d8dfe6
• Success: Green-400 #27a86d / Green-500 #1a8656
• Danger: Red-500 #d73f39
• Warning: Yellow-400 #f9c647
• Info: Blue-500 #3270d6
• Footer divider: #d6d6d6 (4px solid top border) on #f5f5f5 band

Example Component Prompts

• "Create a primary brand CTA: background #d54300, text #ffffff, 16px radius, padding 12px 20px, Pretendard JP Variable 16px weight 600. Hover background #ab350c."
• "Build a hospital card: white background, 1px solid #d8dfe6 border, 12px radius, 16px padding, no shadow. Title at 16px Pretendard weight 700, color #131517. Meta row '강남구 · 0.4km · 후기 7,300건' at 13px weight 400 color #697683. Price 350,000원 at 14px weight 700 color #131517 with list price strikethrough in #8694a2."
• "Design a hot-deal badge: background #FF540F, white text, 4px radius, 2px 6px padding, 12px Pretendard weight 700. Position absolute top-left of event card."
• "Create the global header: 48px tall, white background, hairline #f5f5f5 bottom seam, Pretendard 16px / 400 link text in #131517. Sign-in button on the right: 32px tall, white bg, 1px solid #d8dfe6 border, 16px radius, 6px 14px padding, 14px Pretendard 400, '로그인/가입' label."
• "Build the category nav: 4 columns mobile, 8 desktop. Each item is an 88px-tall stack: 56px icon, 8px gap, 13px Pretendard 400 label in #131517. Transparent background. Tap target spans full cell."
• "Design the footer band: #f5f5f5 background, border-top: 4px solid #d6d6d6, 30px padding, link text 13px Pretendard 400 in #3a444d. No social icons inline."

Iteration Guide

1. One brand hue only. If your CTA isn't orange, it isn't the primary CTA. Pink, blue, green are reserved for status, trending chips, or info badges — never primary.
2. Hairline > shadow. Default to 1px solid #d8dfe6 borders on resting cards. Only apply shadows when an element actually floats (popover, sheet, modal).
3. Bluegray, not gray. Always #697683 for caption, #3a444d for body, #131517 for heading. The cool undertone separates the brand from generic warm-neutral medical UI.
4. Numbers in 700. Prices, review counts, distances all switch to weight 700. Don't mix; numbers should always read "heavier" than surrounding body.
5. 16px radius for chrome. Buttons, sign-in pills, primary CTAs all use radius-400 (16px). Smaller pills (chips, badges) use 4-8px. Search bars and avatars go to radius-full.
6. No display-light. Stick to 400-700. The brand does not use weight 300 on display headlines.
7. Pretendard JP Variable is the only font. No serif, no display custom, no script.
8. Korean-first copy. UI labels and CTAs should be Korean by default. English exists in technical labels (BTL, IPL) but never on chrome buttons.

---

10. Voice & Tone

강남언니's voice is the careful clinician who happens to be on your side — informational first, reassuring second, never sales-y. The product handles a category where users are nervous (성형수술, 피부시술, 모발이식 are not impulse purchases) and where misinformation is the historical norm in Korean beauty media. So the copy refuses the consumer-beauty register: no "✨ 예뻐지자!", no exclamation marks on routine CTAs, no rounded "약 30만원~" pricing. Information is exact ("후기 7,300건", "강남구 · 0.4km · 1,234곳"), and the system explains why before asking the user to act.

Korean is the primary voice; English UI strings exist for overseas surfaces but are translations, not parity. Sentences in body copy end with .; CTA buttons do not. No emoji on medical-information surfaces.

Forbidden phrases. 예뻐지세요!, ~할 수 있어요! (with exclamation), 약 ~원 on primary pricing, rounded review counts (후기 약 7,000건), generic 오류가 발생했습니다, "✨", "💖", "🥺", any phrase that frames cosmetic surgery as cosmetic-only ("예쁘게"). Promotional sales-speak ("초특가", "100만원 할인!!") is restricted to flagged hot-deal cards with the #FF540F badge, never used in body copy.

Voice samples (verified against live home 2026-05-13).

1. 종아리 보톡스 맞으면 발목 두꺼워져? 효과·부작용·용량·주기 — article title; question form invites the user, mid-dot separator lists exactly what will be covered. No fluff. (Verified: gangnamunni.com home, observed via playwright snapshot 2026-05-13.)
2. 보톡스 입문자 가이드, 효과·비용·부작용부터 국산vs수입 차이까지 — same pattern: target reader + comma-separated index of contents. Sets expectation precisely. (Verified: gangnamunni.com home 2026-05-13.)
3. 로그인/가입 — the sign-in CTA. One slash, no "회원가입은 무료입니다!". Zero salesmanship. (Verified: gangnamunni.com header.)

11. Brand Narrative

강남언니 is the consumer brand of 힐링페이퍼 (Healingpaper), a Korean medtech company founded in July 2012 by 홍승일 (Hong Seung-il) — co-founder and CEO (Rocketpunch — 홍승일 / vanitymind, Rocketpunch — Healingpaper). The mission is straightforward and stated repeatedly in the company's own materials: "더 좋은 의료를 더 많은 사람들이 접할 수 있도록" (make better medical services accessible to more people). The product entered a Korean cosmetic-surgery information market that had been dominated by opaque pricing, paid placements masquerading as reviews, and 압구정 office-tower fliers — the design's refusal of beauty-app pinks-and-sparkles is a refusal of that media culture.

The company crossed the 예비 유니콘 (pre-unicorn) threshold by 2021 and as of recent funding has cumulative investment near 313억원 ($230M+) across multiple rounds: Seed 2015-07 (3억), Series A 2019-07 (45억) with Premier Partners / Stonebridge Ventures / Won-Ik Investment, Series B 2020-03 (185억) with Premier / Stonebridge / Legend Capital / Hana Ventures / KB Investment, and a Series D growth round of 428억원 in 2025-02 (Hankook Ilbo — 2025-02-17, TheVC — Healingpaper). The platform now serves 7M+ users globally across Korea, Japan, Thailand, and other markets — the overseas-only app Unni alone passed 700,000 users by March 2024.

The design system is named Cell (mobile: iOS / Android / mWeb) and Welchis (PC back-office for partner clinics) — the team published the rationale on their own engineering blog: "앱과 백오피스는 UX 패턴이 본질적으로 달라서 (앱은 바텀시트, 백오피스는 팝업·테이블), 한 시스템으로 묶기보다 둘로 나눴습니다." (the back-office and the consumer app have fundamentally different UX patterns — bottom sheets vs. popups-and-tables — so they're split rather than merged) (Welchis 소개 — gangnamunni blog). Welchis itself is split into Welchis Design (tone / manner / visual) and Welchis UI (Figma file + web component library), with Storybook as the design-engineering handoff bridge — explicitly replacing Zeplin pixel-measurement.

What 강남언니 refuses: the visual vocabulary of consumer-beauty apps (cartoon pinks, sparkle emojis, "예뻐지는 비결"), the opacity of legacy cosmetic-surgery media (rounded pricing, anonymous testimonials, undisclosed paid placements), and the institutional sterility of hospital websites (cold blues, medical iconography). What it embraces: exact numerals (후기 7,300건, 0.4km), single-hue brand restraint (orange-500 only), bluegray neutrals (warmer than pure gray, cooler than beige), and a footer that ends with 의료광고 사전심의 rather than social-media icons.

12. Principles

1. Information density is hospitality. A user opening 강남언니 is researching, not browsing for delight. Cards show price, distance, review count, and certification status simultaneously. Trimming any of those to "look cleaner" is unkind to the user's real task. UI implication: hospital cards never hide review count behind a hover; price is never rounded for visual cleanliness.
2. One hue, one job. Orange #d54300 (or its raw cousin #FF540F) is the only brand color. Every other color in the system has a specific semantic role (green = success / certified, red = danger / decline, blue = info / regulatory, yellow = warning). Brand never bleeds into status; status never decorates brand. UI implication: a "popular" tag cannot be orange; it goes pink-tinted or neutral. A success badge cannot use brand orange.
3. Trust comes from numerals. Prices in 350,000원 (comma-separated, weight 700) rather than 약 35만원. Distances in 0.4km rather than 근거리. Review counts in 7,300건 rather than 많음. The exactness signals "we have the data; we are not rounding to soften a sale." UI implication: numbers always tabular-weighted (700) and never abbreviated; ranges show both endpoints (300,000 – 450,000원), never a single rounded figure.
4. Hairlines over shadows. Default elevation is a 1px #d8dfe6 border, not a drop shadow. Shadows are reserved for surfaces that literally float (popover, sheet, modal). This is the system's strictest aesthetic line — consumer-app shadow stacks would make the surface feel less like a medical product. UI implication: resting cards never have box-shadow. A designer adding one is making the surface "less trusted," even if it looks "more polished."
5. Two systems, one voice. Cell (app) and Welchis (back-office) are split because their form differs, not because their voice differs. The tone of an error message on the partner-clinic dashboard reads the same as the tone of a review prompt on the consumer app — both refuse "오류가 발생했습니다" in favor of specific blameless guidance. UI implication: a designer working in Welchis cannot import consumer-app voice patterns directly, but they cannot drift into IT-admin sterility either.
6. Regulatory disclosure is part of the design. Korean medical advertising is regulated; 의료광고 사전심의필 and 보건복지부 지침 callouts are mandatory and visible on the footer. The system treats those badges as part of trust rather than legal afterthought — they're typeset with the same care as a UI label. UI implication: never hide regulatory text in a sub-modal. It belongs on the surface, near the action.
7. Korean is primary, not localized. The product is a Korean medical platform first; English and other-locale strings (Japanese, Thai) are translations of the Korean source-of-truth, not parallel design targets. Pretendard JP Variable was chosen because it renders Korean and Japanese with equal care — but the design grammar is Korean-first. UI implication: a UI string that reads well in English but awkwardly in Korean must be rewritten. The reverse is acceptable.

13. Personas

Personas below are fictional archetypes informed by publicly observable 강남언니 user segments (Korean cosmetic-procedure researchers, overseas medical-tourism inbound users, partner-clinic operators using the Welchis back-office). Names are illustrative — they do not refer to real people.

지수 (Jisoo), 26, 서울 신촌. Marketing associate considering 코재수술 after her first rhinoplasty 4 years ago. Opens 강남언니 most evenings, scrolls 칼럼 articles for 30-45 minutes before bed, has saved 18 hospitals in her shortlist. Will not consult any clinic that doesn't have at least 200 후기 with photos on 강남언니. Reads the regulatory 의료광고 사전심의필 badge specifically as a trust marker — if the certification icon is missing, the clinic moves to a "not yet" list. Distrusts any banner that uses an exclamation mark.

선생님 박 (Dr. Park), 47, 강남. Plastic surgeon, head of a 4-doctor clinic. Uses the Welchis back-office daily to manage events, respond to consultations, and track inquiry-to-booking conversion. Has strong opinions about the consultation-response template UI — wants no animation delay between "new message" toast and the chat opening. Reads the Welchis Storybook component names ("HeaderDefault", "BookingTable") in the same language as his front-end developer son, which he considers oddly satisfying.

Mei (메이), 32, 上海 → 강남. Inbound medical-tourism user, uses the Unni overseas app in English with occasional 한글 cross-references when she sees a doctor's name. Decision factors in priority order: certification badge → before/after photos (수술 전후) → English-fluent staff indicator → price range → distance from her hotel. Will not book without a written quote in writing within the app — phone-call-only clinics are filtered out.

준호 (Junho), 34, 대구. Considering 모발이식 after a year of medication that plateaued. Browses on mobile during lunch breaks. Sensitive to pricing transparency — has bookmarked one clinic specifically because their event card shows 1,500모: 2,400,000원 (exact graft count, exact price) rather than the more common 상담 후 결정. Reads the 칼럼 article gateway titles ("탈모 정도별 추천 시술") as decision aids, not entertainment.

14. States

15. Motion & Easing

Durations.

Easings.

Explicitly forbidden. No spring, no bounce, no overshoot. The medical category cannot afford the consumer-app "delight" register. A button that wiggles on press reads less trustworthy. The system intentionally has no ease-spring token (unlike Toss, which licenses one specifically for the money-moved checkmark — 강남언니's confirmation surface uses motion-slow / ease-enter linear-checkmark draw instead, no overshoot).

Signature motions.

1. Bottom-sheet present (mobile). Sheets rise from y+40px with motion-standard / ease-enter, synchronized backdrop fade from rgba(19,21,23,0) to rgba(19,21,23,0.5). Dismissal uses motion-fast / ease-exit. The sheet is the dominant pattern for hospital-detail, doctor-detail, review-photo gallery.
2. Category pill select. When a user picks a procedure (보톡스 → selected), the pill background transitions from white → #fef6f4 over motion-fast / ease-standard, the text color transitions in parallel. Border stroke transition is on the same curve. No scale animation, no shadow pulse.
3. Booking confirmation entry. When 예약 완료 surface mounts: checkmark icon draws from center over motion-slow / ease-enter (stroke-dashoffset animation, no bounce). Body content fades in at motion-standard / ease-enter with a y+8px slide. The entire sequence reads as calm rather than celebratory — appropriate for a high-stakes medical-procedure booking.
4. Reduce motion. Under prefers-reduced-motion: reduce, all motion-* tokens collapse to motion-instant. The sheet appears in place. The checkmark renders complete. The app is fully usable without any kinetic feedback.