Design System Inspiration of Gangnamunni (강남언니)

1. Visual Theme & Atmosphere

강남언니 is a Korean consumer service for finding and comparing medical-procedure information, hospitals, and event prices. Its current public product routes put this research task ahead of ornamental branding: the homepage and events surface use a white canvas, blue-grey text, quiet grey filter fills, and compact procedure controls that can be scanned quickly. The official team describes Cell as the system for the consumer app across iOS, Android, and mobile web, while Welchis is a separate PC back-office system; their component geometry must not be blended. The product’s public copy frames the service around confidence in a choice, and the design team’s writing guidance connects that confidence to clear, understandable information.

Key Characteristics:

• Current canvas #ffffff, foreground #131517, muted text #697683, and filter surface #eff2f5
• Loaded, visible consumer-product family PretendardVariable
• Compact outline CTA and 32px full-radius filter-chip geometry
• Cell consumer surfaces and Welchis back-office documentation are separate evidence domains

2. Color Palette & Roles

• Canvas (#ffffff): captured home feature-card action.
• Foreground (#131517): captured home outline CTA and filter chip.
• Muted (#697683): captured events-page tertiary label.
• Surface (#eff2f5): captured unselected home filter chip.
• Border (#b5bfc9): captured home outline CTA.

The catalog identity color in frontmatter was not retained as a current computed component value, so no orange value is offered as a reusable UI token.

3. Typography Rules

4. Component Stylings

Outline CTA

Small outline CTA

• Text: #131517
• Border: 1px solid #b5bfc9
• Radius: 6px
• Padding: 8px 12px
• Font: 13px / 600 / PretendardVariable
• Pressed: State captured; no changed pressed value retained.
• Use: home::[data-omd-capture="3"]; same fingerprint on home and events.

Procedure filter

Unselected fill chip

• Background: #eff2f5
• Text: #131517
• Radius: 9999px
• Height: 32px
• Padding: 0px 10px
• Font: 14px / 500 / PretendardVariable
• Selected: Separate selected-true DOM variant captured with #131517 background and #ffffff text; no interaction expansion.
• Use: home::[data-omd-capture="34"].

Media card action

Home feature-card action

• Background: #ffffff
• Text: #000000
• Radius: 20px
• Font: 16px / 400 / PretendardVariable
• Use: home::[data-omd-capture="20"]; 303px rendered height is context, not a portable token.

---

Verified: 2026-07-13 (verification v2; supplied current computed-style bundle plus first-party source review) Tier 1 sources: https://www.gangnamunni.com/ · https://www.gangnamunni.com/events · https://blog.gangnamunni.com/post/welchis/ · https://blog.gangnamunni.com/post/ui-text-guideline Tier 2 sources: https://getdesign.md/gangnamunni direct detail attempt returned an internal fetch error; https://styles.refero.design/?q=gangnamunni and https://styles.refero.design/?q=%EA%B0%95%EB%82%A8%EC%96%B8%EB%8B%88 direct search attempts returned internal fetch errors. No Tier 2 value was imported. Surface split: Home and events are consumer-product surfaces. The Welchis post is documentation context only; its typography and controls are not Cell/product tokens. Conflicts unresolved: none

No importable Tier 2 value was available to conflict with current Tier 1 observations.

5. Layout Principles

• Retained component observations include 8px and 12px CTA padding, 10px horizontal chip padding, 6px CTA radius, 20px media-card radius, and full-radius chips.
• These are public-surface samples, not a complete Cell scale or native-app layout specification.
• Cell is the consumer system; Welchis is the PC back office. Do not transfer documentation chrome between them.

6. Depth & Elevation

The retained component representatives report box-shadow: none. This describes those components only; it does not establish a global shadow, modal, or card-depth contract.

7. Do's and Don'ts

Do

• Name tokens by their captured product role and source surface.
• Use loaded PretendardVariable for a reconstruction of this consumer web capture.
• Preserve the captured 32px full-radius filter-chip geometry.
• Keep Cell consumer work separate from Welchis references.

Don't

• Don't promote catalog identity orange without a current component observation.
• Don't reuse blog pretendard or declared commitMono as the product family.
• Don't invent hover, focus, disabled, error, toast, or changed pressed values.
• Don't promote responsive 303px card height into a general token.

8. Responsive Behavior

The supplied evidence has one retained capture context and establishes no breakpoints, grids, mobile navigation, or native-app behavior. Treat responsive behavior as unresolved.

9. Agent Prompt Guide

"Recreate the current Gangnamunni consumer-web filter area with #ffffff canvas, #131517 foreground, #697683 muted labels, and #eff2f5 chips. Use loaded PretendardVariable; make chips 32px high with 9999px radius and 0px 10px padding. The small outline CTA uses 6px radius, 8px 12px padding, #131517 text, and a 1px #b5bfc9 border. Do not add an unobserved primary-orange CTA, shadows, or interaction states."

---

10. Voice & Tone

The official UI-text guideline calls for confident communication, easy-to-understand medical information, and one topic at a time. It permits restrained emphasis, including an exclamation mark, when it makes value or a completed journey clear; the earlier legacy claim banning exclamation marks has been removed.

11. Brand Narrative

The public product presents Gangnamunni as a place to compare procedure information and prices with confidence in a choice. The company’s design writing states a mission to make better medical services accessible to anyone and describes customer perspective as central to product work. Its engineering account separates Cell’s consumer mobile platforms from Welchis’s PC back office because their users and interaction patterns differ.

12. Principles

1. Make the next step understandable. UI implication: give an error a concrete recovery action when current evidence supports that state.
2. Keep a message to one topic. UI implication: separate unrelated procedure conditions or instructions.
3. Use the system for its user and platform. UI implication: do not import Welchis desktop geometry into Cell without direct evidence.

13. Personas

No named synthetic personas are included. First-party sources substantiate only consumer-app users (Cell) and PC back-office users (Welchis).

[FILL IN] Add research-backed decision, accessibility, and locale needs only when a user or first-party source supplies them.

14. States

[FILL IN] The supplied bundle has interactionCount: 0 and no current first-party contract for loading, empty, error, success, disabled, or selection behavior beyond the captured DOM variants.

15. Motion & Easing

[FILL IN] No current first-party motion token, duration, easing curve, or reduced-motion behavior was collected.