Design System Inspiration of Danawa

1. Visual Theme & Atmosphere

Danawa (다나와) is Korea's original price-comparison commerce platform, and its interface is the antithesis of the airy, whitespace-luxurious fintech aesthetic — it is a dense, utilitarian information machine built to render thousands of products, prices, and specs at a glance. The canvas is pure white (#ffffff) layered with faint warm-grey surfaces (#f8f8f8) and cool blue-tinted panels (#f7faff, #e3f1fa) that segment the relentless catalog into scannable zones. Text runs in a near-black ladder — pure #000000 for the densest body, #0f0f0f for prices and emphasis, #333333 and #555555 for product names and meta — packed tightly because density, not breathing room, is the value proposition. Separation comes almost entirely from thin hairlines (#e0e0e0, #ebebeb) rather than shadows: the system is essentially flat.

The color economy is strict and role-driven. A single saturated brand green (#06b87f) is reserved almost exclusively for the master "전체 카테고리" menu trigger — the one anchor that opens the entire catalog tree — so green reads as "the gateway." The dominant interactive accent, though, is a workhorse blue (#2070eb), which carries over a thousand uses on a single result page: links, sort controls, active filters. A bright commerce red (#ff3b3b) is the price-and-deal signal, with a deeper alt-red (#e53b38) for sale emphasis. A muted slate (#afbbc8) tags ranked items ("인기 순위 1/2/3"), and an occasional purple (#8b38e5) marks promotional callouts. This is a palette engineered for wayfinding through information overload, not for mood.

Typographically the system is unromantic and efficient: Pretendard across the board, the de-facto Korean product sans, optimized for dense hangul legibility at small sizes. There is no display typeface, no heavy weight theatre — the hero "비교하고 잘 사는, 다나와" wordmark sits at a modest 16px / weight 700, while the real work happens at 12–13px: product titles at 12px / 400, prices at 13px / 700. Geometry mixes a fully-rounded 52px search pill at the top with sharp 2px/4px utility buttons and 8px content cards below — pragmatic, never decorative. The overall impression is of a tool that respects the shopper's time over their eyes: maximum information, minimum ornament.

Key Characteristics:

• Pretendard everywhere at small dense sizes (12–13px workhorse, 16px headings) — no display face, no weight theatre
• Single brand green (#06b87f) reserved for the master "전체 카테고리" gateway button
• Workhorse blue (#2070eb) as the dominant interactive/link accent across the catalog
• Commerce red (#ff3b3b) as the price-and-deal signal; alt-red (#e53b38) for sale emphasis
• Near-black text ladder (#000000 → #0f0f0f → #333333 → #555555 → #767676 → #919191)
• Flat, shadowless depth — separation by hairlines (#e0e0e0, #ebebeb) and tinted surfaces (#f8f8f8, #f7faff)
• Mixed geometry: 52px rounded search pill up top, sharp 2px/4px utility buttons and 8px cards below
• Slate rank badges (#afbbc8) and occasional purple (#8b38e5) for ranked / promotional callouts

2. Color Palette & Roles

Primary & Interactive

• Danawa Green (#06b87f): Primary brand color. Reserved for the master "전체 카테고리" menu button — the single green anchor that opens the catalog tree. White text on green.
• Link Blue (#2070eb): The dominant interactive accent. Links, sort controls, active filters, focus marks — over a thousand uses on a single catalog page.
• Bulk Blue (#0e68f0): A slightly deeper blue used for the "대량구매" (bulk-purchase) B2B pill on product rows.
• Deep Blue (#0313aa): Darkest blue for selected/active strong states and emphasized link text.

Commerce Signals

• Price Red (#ff3b3b): The price-and-deal signal — sale flags, discount emphasis, hot-deal markers. The most semantically loaded accent.
• Sale Red (#e53b38): A slightly deeper alt-red for sale labels and emphasized price drops.
• Promo Purple (#8b38e5): Occasional accent for promotional callouts and special-event labels.

Text Ladder

• Ink (#000000): The densest body text and product detail copy.
• Ink Soft (#0f0f0f): Prices and primary emphasis text.
• Body (#333333): Product-name links and standard list copy.
• Muted (#555555): Secondary labels, compact button fills, placeholder text.
• Muted Alt (#767676): Tertiary meta text.
• Faint (#919191): Quietest captions, disabled-adjacent labels.
• Disabled (#d2d2d2): Disabled controls and inactive pager states.

Surfaces & Hairlines

• Canvas (#ffffff): Page background, card surfaces, search-bar fill.
• Surface (#f8f8f8): Warm-grey segmenting panels and alternating blocks.
• Surface Blue (#f7faff): Cool blue-tinted surface behind the "대량구매" pill and info panels.
• Tint Blue (#e3f1fa): A lighter blue tint for highlighted info zones.
• Hairline (#e0e0e0): Standard borders on buttons, pagers, and cards.
• Hairline Alt (#ebebeb): Lighter dividers between dense list rows.

Structural Accents

• Nav Dark (#33373d): Near-black charcoal for dark utility bars and overlay chrome.
• Rank Slate (#afbbc8): Muted blue-grey for "인기 순위 N" rank overlays on product thumbnails.
• On Primary (#ffffff): Text and icons placed on green, dark, or colored fills.

3. Typography Rules

Font Family

• Primary: Pretendard, with system fallbacks: -apple-system, system-ui, Malgun Gothic, 맑은 고딕, 돋움, dotum, 굴림, gulim, Arial, Apple SD Gothic Neo
• There is no separate display or monospace face — Pretendard carries the entire system, leaning on weight (400 vs 700) and size rather than typeface variety.

Hierarchy

Principles

• Density over comfort. The working type sizes are 12–13px — unusually small — because the product is information throughput. The shopper is scanning, not reading prose.
• Weight, not typeface, does the hierarchy. A single family (Pretendard) covers everything; emphasis is carried by 700 vs 400 and by size, never by switching fonts.
• Bold reserved for price and rank. Weight 700 appears on prices, the master category button, and rank labels — the three things a price-comparison shopper actually decides on.
• Hangul-first legibility. Pretendard is chosen specifically for dense Korean text rendering at small sizes; the fallback stack degrades to Malgun Gothic / 돋움 for older environments.

4. Component Stylings

Buttons

Category Master (전체 카테고리)

• Background: #06b87f
• Text: #ffffff
• Radius: 8px 8px 0px 0px
• Padding: 11px 16px
• Font: 16px / 700 / Pretendard
• Height: 44px
• Use: The single green anchor that opens the full category tree

In-Result Search

• Background: #555555
• Text: #ffffff
• Radius: 2px
• Font: 12px / 400 / Pretendard
• Height: 24px
• Use: Compact search submit on the catalog surface

Result-Filter (결과 내 검색)

• Background: #333333
• Text: #ffffff
• Radius: 2px
• Font: 12px / 400 / Pretendard
• Height: 28px
• Use: Dark utility button to search within current results

Pager (이전 / 다음)

• Background: #ffffff
• Text: #000000
• Border: 1px solid #e0e0e0
• Radius: 4px
• Font: 13px / 400 / Pretendard
• Height: 20px
• Use: Carousel and list prev/next controls

Inputs

Master Search Bar

• Background: #ffffff
• Text: #0f0f0f
• Radius: 52px
• Padding: 10px 0px 10px 20px
• Font: 18px / 400 / Pretendard
• Height: 44px
• Use: The top global search pill — the one fully-rounded element in the chrome

Cards

Promo / Event Tile

• Background: #ffffff
• Border: 1px solid #e0e0e0
• Radius: 8px
• Height: 168px
• Use: Brand-event and promotion card tiles, hairline-only (no shadow)

Surface Panel

• Background: #f8f8f8
• Radius: 8px
• Use: Segmenting content panels and alternating blocks

Badges

Bulk Purchase (대량구매)

• Background: #f7faff
• Text: #0e68f0
• Radius: 4px
• Font: 12px / 700 / Pretendard
• Height: 20px
• Use: B2B bulk-purchase pill on product rows

Rank Overlay (인기 순위)

• Background: #afbbc8
• Text: #ffffff
• Radius: 0px
• Font: 12px / 700 / Pretendard
• Height: 16px
• Use: Numbered popularity-rank tag overlaid on product thumbnails

List Items

Product Result Row

• Text: #333333
• Border: 1px solid #ebebeb
• Font: 12px / 400 / Pretendard
• Use: Dense product row — near-black title link with bold #0f0f0f price and #767676 meta

Navigation

• Top utility nav (최근 / 관심 / 로그인) in #333333 Pretendard at 13px / 400
• Active nav item shifts to link blue #2070eb
• Category bar items in white on dark chrome at 14px / 700
• Sticky white header, hairline-separated, shadowless

---

Verified: 2026-06-11 Tier 1 sources: https://www.danawa.com (homepage, live computed style — nav, hero wordmark, master search pill, category button); https://prod.danawa.com/list/?cate=112758 (dense catalog/result surface, live computed style — product rows, prices, bulk/rank badges, pagers, sort tabs) Tier 2 sources: getdesign.md/danawa — "No designs found"; styles.refero.design/?q=danawa — no Danawa-specific style entry (search returned only the generic browse list) Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: 8px, but the system freely uses sub-8 increments (2px, 4px) because dense catalog rows demand tight packing
• Observed paddings: 11px 16px (category button), 10px 20px (search pill), 6px 8px (category links), 4px-15px asymmetric (utility nav)
• The scale is intentionally dense at the small end — every pixel is fought for in a thousand-row result list

Grid & Container

• Wide fixed-width content column (~1280px) optimized for desktop scanning
• Result pages: left filter rail + right product list + right-rail promotions — classic three-zone commerce layout
• Homepage: stacked horizontal modules (category tree, deal carousels, ranking lists, news), each a hairline-bounded block
• High module density — many independent widgets share one viewport, segmented by #f8f8f8 / #f7faff surfaces

Whitespace Philosophy

• Density is the product. Unlike whitespace-luxurious designs, Danawa packs maximum information per screen. Gaps are minimized to fit more rows, prices, and specs above the fold.
• Hairlines do the separating. With no shadows, thin #e0e0e0 / #ebebeb borders and tinted surfaces carve the dense grid into legible cells.
• Tinted surfaces as zoning. #f8f8f8 warm-grey and #f7faff cool-blue panels group related controls without spending vertical space on margins.

Border Radius Scale

• Sharp (2px): compact utility buttons (검색, 결과 내 검색)
• Standard (4px): pagers, bulk-purchase pills, small controls
• Content (8px): promo cards, surface panels, category button top corners
• Pill (52px): the master search bar — the single fully-rounded element
• Full (9999px): occasional circular toggles and dots

6. Depth & Elevation

Shadow Philosophy: Danawa is a deliberately shadowless system. Across the homepage and the catalog surface, box-shadow is none on the hero, nav, headings, cards, and product rows. Depth is communicated by hairlines and tinted background fills, never by elevation. This is a pragmatic choice for an information-dense commerce tool: shadows cost rendering and visual noise, and in a thousand-row list they would create chaos. The only "elevation" is the semi-transparent black scrim (rgba(0,0,0,0.6–0.7)) behind modal overlays and image lightboxes.

7. Do's and Don'ts

Do

• Use Pretendard at dense small sizes (12–13px) for product rows and meta — density is the value
• Reserve brand green (#06b87f) for the master category gateway, nothing else
• Use link blue (#2070eb) as the default interactive/link accent across the catalog
• Use price red (#ff3b3b) only for prices, deals, and sale emphasis — it is a semantic signal
• Separate content with hairlines (#e0e0e0, #ebebeb) and tinted surfaces (#f8f8f8, #f7faff), not shadows
• Carry hierarchy with weight (700 vs 400) and size, on a single Pretendard family
• Keep utility buttons sharp (2px / 4px radius); reserve the 52px pill for the master search bar

Don't

• Add drop shadows for elevation — the system is intentionally flat
• Spend vertical whitespace that could show another product row — density beats breathing room
• Use green for general interactive elements — it is the category-gateway anchor only
• Use price red for non-price UI — it would dilute the deal signal
• Introduce a second display typeface — Pretendard plus weight covers everything
• Make product titles bold — bold (700) is reserved for prices, ranks, and the category button
• Round utility buttons heavily — sharp corners match the dense, tool-like character

8. Responsive Behavior

Breakpoints

Touch Targets

• Master search pill at 44px height — comfortable tap target
• Category button at 44px — primary navigation entry
• Dense utility controls (검색, pager) at 20–28px on desktop; the mobile property enlarges these
• Product rows rely on full-row tap zones rather than small buttons on mobile

Collapsing Strategy

• Homepage modules stack vertically; deal carousels become swipeable on mobile
• Three-zone result layout collapses to a single column with a filter sheet
• Dense product tables reflow to card-style rows on narrow viewports
• The separate m.danawa.com property handles mobile rather than a fully fluid single codebase

Image Behavior

• Product thumbnails maintain consistent aspect within hairline-bounded cells
• Rank overlays (#afbbc8) anchor to the thumbnail corner
• Promo card tiles keep 8px radius and #e0e0e0 hairline at all sizes

9. Agent Prompt Guide

Quick Color Reference

• Primary / gateway: Danawa Green (#06b87f)
• Interactive / link: Link Blue (#2070eb)
• Bulk / B2B accent: Bulk Blue (#0e68f0)
• Price / deal: Price Red (#ff3b3b), Sale Red (#e53b38)
• Promo accent: Purple (#8b38e5)
• Heading / body text: Ink (#000000), Body (#333333)
• Price text: Ink Soft (#0f0f0f)
• Muted text: Muted (#555555), Muted Alt (#767676), Faint (#919191)
• Surfaces: Canvas (#ffffff), Surface (#f8f8f8), Surface Blue (#f7faff)
• Hairlines: #e0e0e0, #ebebeb
• Rank tag: Rank Slate (#afbbc8)

Example Component Prompts

• "Create a price-comparison product row: white background, 1px solid #ebebeb bottom hairline, no shadow. Product title link at 12px Pretendard weight 400 color #333333. Price at 13px weight 700 color #0f0f0f ('649,000원'). Meta ('구매 930+') at 12px color #767676. A '대량구매' badge: #f7faff background, #0e68f0 text, 4px radius, 12px weight 700."
• "Build the master category button: #06b87f green background, white 16px Pretendard weight 700 text, radius 8px 8px 0 0, padding 11px 16px, 44px height. No shadow."
• "Design the global search bar: white fill, 52px radius pill, 44px height, padding 10px 20px, text 18px Pretendard color #0f0f0f, placeholder #555555."
• "Create a rank overlay badge: #afbbc8 slate background, white 12px weight 700 text, square (0 radius), anchored to a product thumbnail corner ('인기 순위 1')."
• "Build a dense filter rail: white background, hairline #e0e0e0 dividers, 13px Pretendard labels in #333333, active filter in link blue #2070eb. Sharp 2px/4px controls, no shadows."

Iteration Guide

1. Default to flat — no shadows. Use hairlines (#e0e0e0 / #ebebeb) and tinted surfaces (#f8f8f8 / #f7faff) for separation.
2. Pretendard only. Hierarchy = weight (700 vs 400) + size. Working sizes are small (12–13px).
3. Green (#06b87f) is the category-gateway anchor; blue (#2070eb) is the everyday interactive accent.
4. Red (#ff3b3b) is the price/deal signal — never decorative.
5. Density first: pack rows tightly, minimize margins, fight for every above-the-fold product.
6. Sharp utility buttons (2px/4px), the one 52px pill for the master search bar.
7. Bold (700) only on prices, ranks, and the category button.

---

10. Voice & Tone

Danawa's voice is practical, trustworthy, and value-obsessed — the tone of a savvy friend who has already done the comparison shopping for you. The slogan "비교하고 잘 사는, 다나와" ("Compare and shop well, Danawa") is the entire register in five words: it is about smart, informed purchasing, not aspiration or luxury. Copy is concrete and number-forward — prices, discount percentages, purchase counts, popularity ranks — because the product's promise is empirical, not emotional. There is no marketing froth; the interface tells you what something costs and where, and trusts you to decide.

Forbidden phrases. Luxury or aspirational framing ("프리미엄 라이프스타일"). Empty superlatives without a number ("최고의 쇼핑경험" with nothing to back it). Hype emoji on product/price UI. Hedging that obscures the actual price or seller. Anything that buries the comparison — the comparison IS the brand.

Voice samples:

• "비교하고 잘 사는, 다나와" — the live homepage slogan / wordmark (verified on danawa.com).
• "양질의 쇼핑정보를 제공하여 소비자의 구매결정을 돕고" — from the official 회사소개 (about) page, verified via WebFetch.
• "결과 내 검색" / "대량구매" — live UI labels on the catalog surface (illustrative of terse task-verb tone).

11. Brand Narrative

Danawa (다나와, "다 나와" — roughly "everything's here / come on out") was founded in April 2000 by Sung Jang-hyun (성장현), who began by databasing the PC-component prices of the Yongsan Electronics Market (용산전자상가) merchants and publishing them online (나무위키, 위키백과). What started as a hobbyist price list for computer parts became the country's reference point for "what does this actually cost, and where is it cheapest" — first for PC hardware, then expanding into appliances, mobile, fashion, and household goods. The company listed on the KOSDAQ in 2011 (전자신문 상장기업 분석).

Sung has attributed Danawa's durability to 소비자의 신뢰 — consumer trust — saying that from the start the company obsessed over what shoppers actually wanted and built content shoppers would genuinely value rather than chasing seller-friendly monetization. That consumer-first, data-as-truth posture is the brand's DNA: Danawa accumulated price histories measured in the billions of records, becoming less a store and more an oracle of market price.

In 2021 Danawa was acquired (~₩400B) by the e-commerce firm Koreacenter, which then reverse-merged into Danawa and rebranded the combined entity ConnectWave (커넥트웨이브) (머니투데이, 커넥트웨이브 보도). Through the corporate changes the consumer-facing brand and its mission held constant: "양질의 쇼핑정보를 제공하여 소비자의 구매결정을 돕고" — provide quality shopping information to help consumers decide. The design reflects exactly this: a dense, unsentimental, number-forward tool that puts comparison first.

12. Principles

1. Comparison is the product. Every layout decision serves side-by-side evaluation — dense rows, aligned prices, rank tags. UI implication: never bury the price or the seller; tabular alignment and consistent price typography (13px / 700 / #0f0f0f) are non-negotiable.
2. Density over comfort. The shopper wants to see more options per screen, not more whitespace. UI implication: minimize margins, work at 12–13px, fit another product row above the fold before adding padding.
3. Numbers are the truth. Price, discount, purchase count, and rank carry the message; adjectives don't. UI implication: surface concrete figures (price red #ff3b3b, purchase counts, "인기 순위 N") over descriptive copy.
4. One green gate, one blue current. Color is rationed by role. UI implication: green (#06b87f) only for the category gateway; blue (#2070eb) for everyday interaction; red for price/deal. Don't let roles leak.
5. Flat and fast. No shadows, no decoration that costs render time or attention. UI implication: separate with hairlines (#e0e0e0) and tinted surfaces, never elevation.

13. Personas

Personas below are fictional archetypes informed by publicly observable Danawa user segments (PC-build enthusiasts, deal-hunting households, B2B bulk buyers), not individual people.

Kang Min-su, 27, Seoul. PC-build hobbyist assembling a gaming rig. Lives in Danawa's PC견적 (build-estimate) tool, cross-referencing CPU and GPU prices across sellers daily. Trusts Danawa's price history more than any single shop's "sale." Would be annoyed by any redesign that added whitespace at the cost of showing fewer parts per screen.

Lee Hyun-jung, 41, Suwon. Household manager comparing appliances and groceries. Sorts by 최저가, scans purchase counts ("구매 930+") and ranks before buying, and treats the price-red figures as the only thing that matters. Values that Danawa shows free-shipping ("무료") inline so the real total is obvious.

Park Dae-ho, 38, Incheon. Small-business buyer who uses the "대량구매" path for office equipment. Needs bulk pricing and seller comparison in one view. Reads Danawa as a procurement tool, not a lifestyle store.

14. States

15. Motion & Easing

Durations:

Easings:

Explicitly avoided. No spring, bounce, or overshoot. A price-comparison tool is steady and quick — playful motion would undercut the data-as-truth posture and slow down dense scanning.

Signature motions.

1. Deal-banner carousel. Homepage promo carousels auto-rotate at slow ~5s intervals with motion-standard / ease-standard horizontal slides; prev/next pagers (이전 / 다음) jump immediately.
2. Category-tree expand. The "전체 카테고리" mega-menu opens with a quick motion-fast / ease-enter — speed matters because it is the primary wayfinding gate.
3. In-place re-sort. Re-sorting a result list is near-instant (motion-fast); rows reorder without a full reload so the shopper keeps context.
4. Reduce motion. Under prefers-reduced-motion: reduce, carousels stop auto-rotating and all motion-* tokens collapse to motion-instant. The catalog stays fully functional — scanning never depends on animation.