Design System Inspiration of SSG.COM

1. Visual Theme & Atmosphere

SSG.COM (쓱닷컴) is South Korea's flagship premium e-commerce platform, born from the convergence of Shinsegae department store prestige and the everyday convenience of emart. The homepage presents an uncluttered white canvas (#ffffff) layered over a neutral light-grey surface (#f5f5f5) — the visual equivalent of a well-lit department store floor: clean, spacious, and focused on the merchandise. Yet SSG's visual identity is unmistakably distinguished by a single bold brand accent: a vivid coral-red (#ff5452), used for discount badges, price highlights, sale labels, and promotional banners. That red is the price tag color of Korean retail made digital — assertive, urgent, and immediately legible.

The typographic base is Pretendard across all hierarchy levels, a contemporary Korean-optimized typeface valued for its hangul legibility and neutral, versatile weight range. Unlike other KR e-commerce platforms that split between a display face and a body face, SSG stays in one type family — distinction comes through weight (400 body → 500 labels → 600 prices → 700 active tabs) and size (11px badges → 12px base → 14px categories → 16px price + tabs). The result reads as information-dense but never chaotic.

What defines SSG's interaction language is its near-zero border-radius philosophy on most surfaces — product cards, navigation tabs, inputs, and layout blocks are essentially square. The only rounded shapes are the category "pill tabs" (24px radius) which create a soft contrast to the hard-edged commerce grid below. The system is deliberately non-playful: SSG competes on selection and trust, not personality. Color restraint (one accent, neutral greys, white canvas) and editorial flatness keep the experience premium without the minimalism becoming cold.

Key Characteristics:

• Pretendard as the sole typeface across all contexts — weight alone signals hierarchy
• Brand red (#ff5452) as the exclusive accent: discount badges, price highlights, CTAs
• Near-zero radius on core commerce surfaces (cards, grid, inputs, nav) — hard-edged, editorial
• Pill-shaped category tabs (24px radius) as the single curved element class
• Near-black (#222222) for active states and primary text weight
• Light-grey surface (#f5f5f5) as the page background; pure white for cards and containers
• No box-shadow on product cards — separation by #e5e5e5 borders only
• Light/tinted red (#fff2f2) for promotional surface backgrounds (sale zone headers)

2. Color Palette & Roles

Primary Brand

• SSG Red (#ff5452): The brand's sole saturated accent. Used on discount badges, "쓱특가" sale labels, promotional banners, price-emphasis text, and active-state markers. High-frequency on the homepage (148 element occurrences in live scan).
• Red Tint (#fff2f2): The ultra-light wash of brand red. Used for promotional section backgrounds, coupon box highlights, and sale zone surfaces — gives the page red energy without full saturation.

Neutral & Surface

• Pure White (#ffffff): Primary page background in most areas, product card backgrounds, header and footer surfaces.
• Surface Grey (#f5f5f5): The ambient page background — light neutral that separates sections without elevation. Most frequent background color in the DOM (663 occurrences).
• Ink Dark (#222222): Near-black for body text, active category tabs, icon fills, and anything needing maximum legibility. The text hierarchy anchor.
• Dark Nav (#31313b): Near-black with a slight blue-grey cast, used for the accessibility shortcut bar at top of page.

Text Hierarchy

• Ink Dark (#222222): Primary text, active tabs, labels, price values.
• Muted (#777777): Secondary text, inactive tab labels, metadata.
• Muted-2 (#666666): Tertiary text, utility links, sub-category labels.

System Colors

• Hairline (#cfcfcf): Primary border color for inputs, select dropdowns, navigation controls.
• Hairline-2 (#e5e5e5): Lighter separator for product card borders, carousel controls.
• Disabled BG (#e5e5e5): Background for sold-out / disabled state buttons.
• Disabled FG (#999999): Text on disabled elements.

3. Typography Rules

Font Family

• Pretendard — the sole typeface family for all UI text. No display-only face; weight is the only axis of variation.

Hierarchy

Principles

• One family, weight scale: Pretendard 400 → 500 → 600 → 700 carries the full hierarchy — no typeface switching.
• Korean-first sizing: Base at 12px is typical for information-dense KR e-commerce; product prices step up to 16px for emphasis.
• Weight + size = urgency: Price numbers at 16px/600 visually outrank category tabs at 14px/500, directing attention to the transaction layer.
• No tracking adjustments: No negative letter-spacing observed; SSG typography is legibility-first, not editorial-expressive.

4. Component Stylings

Tabs

Active Category Pill

• Background: #222222
• Text: #ffffff
• Radius: 24px
• Padding: 0px 16px
• Font: 16px / 700 / Pretendard
• Height: 46px
• Use: Selected main category pill (e.g. "오반장" active state)

Inactive Category Pill

• Background: #ffffff
• Text: #777777
• Radius: 24px
• Padding: 0px 16px
• Font: 16px / 500 / Pretendard
• Height: 46px
• Use: Unselected category pills

Active Sub-Category Tab

• Background: #222222
• Text: #ffffff
• Radius: 0px
• Padding: 0px 12px
• Font: 14px / 700 / Pretendard
• Height: 40px
• Use: Selected horizontal category tab (no border-radius, flat edge)

Inactive Sub-Category Tab

• Background: #ffffff
• Text: #666666
• Radius: 0px
• Padding: 0px 12px
• Font: 14px / 500 / Pretendard
• Height: 40px
• Use: Unselected horizontal category navigation tab

Buttons

Sold-Out (Disabled)

• Background: #cfcfcf
• Text: #777777
• Radius: 0px
• Font: 16px / 400 / Pretendard
• Height: 52px
• Use: 품절 (out-of-stock) state; square, no elevation

Inputs & Forms

Search Input

• Background: #ffffff
• Text: #222222
• Border: 1px solid #cfcfcf
• Radius: 0px
• Font: 13px / 400 / Pretendard
• Height: 36px
• Use: Header search field

Option Select

• Background: #ffffff
• Text: #222222
• Border: 1px solid #cfcfcf
• Radius: 5px
• Padding: 0px 39px 0px 14px
• Font: 14px / 400 / Pretendard
• Height: 38px
• Use: Product option selector dropdowns (색상선택, 사이즈 등)

Cards

Product Listing Card

• Background: #ffffff
• Text: #222222
• Border: 1px solid #e5e5e5
• Radius: 0px
• Use: E-commerce product card — no shadow, separated by thin hairline border only

Badges

Service Label Badge

• Background: #f5f5f5
• Text: #222222
• Radius: 0px
• Font: 11px / 500 / Pretendard
• Use: Shipping/service info tags (무료배송, 오늘출발)

Discount / Sale Badge

• Background: #ff5452
• Text: #ffffff
• Radius: 0px
• Font: 11px / 500 / Pretendard
• Use: Promotional discount badges, sale labels overlaid on product images

---

Verified: 2026-06-22 (omd:add-reference CREATE — Tier 1 live inspect) Tier 1 sources: https://www.ssg.com, https://www.ssg.com/disp/category.ssg?dispCtgId=6000013 Tier 2 sources: getdesign.md/ssg (404 — not listed) | styles.refero.design (searched "ssg" — no direct match found) Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: 4px
• Scale: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 48px
• Input padding: 14px 12px horizontal; option dropdowns 14px left, 39px right (for chevron clearance)

Grid & Container

• Multi-column product grid — standard 4~6 column layout at desktop 1440px
• Category pill tabs displayed in a single horizontal scrollable row
• Section alternation between white (#ffffff) and grey (#f5f5f5) backgrounds
• No max-width card constraint — product cards fill their grid cells

Whitespace Philosophy

• Density-oriented: SSG is a high-volume retail platform; spacing is efficient rather than editorial. Row margins tighter than premium fashion e-commerce.
• Flat separation: product cards use #e5e5e5 border hairlines, not shadows. Page sections separate by background color shift.
• Square geometry: the overwhelmingly square-cornered system signals "this is a store floor, not an editorial magazine" — efficiency and product visibility first.

Border Radius Scale

• None (0px): Product cards, sub-category nav tabs, inputs, layout wrappers, discount badges — the default
• Small (5px): Option select dropdowns — the only slightly rounded form element
• Medium (6px): Pagination/navigation control corner rounding
• Large (24px): Main category pill tabs — the single soft shape in the system
• Full (9999px): Not observed in live DOM

6. Depth & Elevation

Shadow Philosophy: SSG.COM operates a shadow-free design system. Live inspection confirmed box-shadow: none across all product cards, headers, navigation, and promotional sections. Elevation and grouping is communicated entirely through flat background-color tinting (#f5f5f5 vs #ffffff) and thin hairline borders (#e5e5e5, #cfcfcf). This flat approach keeps pages scannable and load-lightweight — appropriate for a high-traffic Korean retail platform where performance and product visibility take precedence.

7. Do's and Don'ts

Do

• Use Pretendard across all contexts — weight variation carries the full hierarchy
• Reserve brand red (#ff5452) for discount signals, price emphasis, and promotional elements
• Use near-zero border radius (0px) for commerce surfaces — cards, nav tabs, inputs
• Apply category pill (24px radius) only for the main "outing" category selector
• Separate sections with #f5f5f5 tinted backgrounds and #e5e5e5 hairlines — no shadows
• Set active tab state with #222222 background + white text + bold weight (700)
• Use #222222 near-black for primary text over pure black (#000000) for body legibility
• Keep badge/label text at 11px/500 — small but legible, weight 500 for retail density

Don't

• Add drop shadows to product cards — SSG is a flat, shadow-free system
• Apply border-radius to product cards or commerce grid elements — hard edges signal reliability
• Overuse brand red (#ff5452) beyond sale/discount contexts — it loses signal meaning
• Use a second accent color or introduce gradients — the system is deliberately monochromatic aside from the red
• Mix display typefaces — Pretendard is the sole family
• Make inactive tabs the same weight as active — weight contrast (500 → 700) is the active signal
• Use positive letter-spacing or decorative type treatments — the system is legibility-first

8. Responsive Behavior

Breakpoints

Touch Targets

• Category pill tabs at 46px height — comfortable tap target
• Sub-category tabs at 40px height — minimum tap-safe
• Option select at 38px — form interaction
• Sold-out button at 52px — prominent even when disabled

Collapsing Strategy

• Category pills maintain 24px radius on all viewports
• Sub-category tabs stay square across all sizes
• Product grid collapses from 6 → 4 → 2 → 1 columns

Image Behavior

• Product images carry no shadow or border radius
• Red badges (#ff5452) overlay product image corners — high-contrast on any image

9. Agent Prompt Guide

Quick Color Reference

• Brand accent: SSG Red (#ff5452)
• Red tint surface: (#fff2f2)
• Primary text: Ink Dark (#222222)
• Secondary text: Muted (#777777) / Muted-2 (#666666)
• Background: White (#ffffff) / Surface Grey (#f5f5f5)
• Borders: Hairline (#cfcfcf) / Lighter hairline (#e5e5e5)
• Active tab state: #222222 bg + #ffffff text
• Disabled: #e5e5e5 bg + #999999 text

Example Component Prompts

• "Build a product card: white #ffffff background, 0px radius, 1px solid #e5e5e5 border, no shadow. Product image full-width. Badge overlay top-left: #ff5452 bg, white text, 11px/500 Pretendard. Price: 16px/600 Pretendard #222222. Meta text: 12px/400 #777777."
• "Create category pill tabs: selected = #222222 bg, white text, 24px radius, 46px height, 16px/700 Pretendard. Unselected = #ffffff bg, #777777 text, same size, 16px/500."
• "Design a sale badge: #ff5452 background, white text, 11px/500 Pretendard, 0px radius — square flat label."
• "Flat sub-category nav: white #ffffff bg, 40px height tabs, 0px radius. Active: #222222 bg + white + 14px/700. Inactive: white + #666666 + 14px/500."

Iteration Guide

1. Pretendard is the only typeface — weight scale 400→500→600→700 for hierarchy
2. Red (#ff5452) = sale/discount signal only — don't bleed it into navigation
3. No shadows — border hairlines (#e5e5e5, #cfcfcf) do the separating
4. Square corners everywhere except the pill category tabs (24px)
5. #222222 for active states, #777777 / #666666 for inactive/secondary
6. Surface grey (#f5f5f5) segments page sections; white for card faces

---

10. Voice & Tone

SSG.COM's voice is confident, reliable, and value-forward — the platform of a department-store heritage brand that knows its product selection is the proposition. Copy is direct and functional; the headline on the site has always been "믿고 사는 즐거움 SSG.COM" ("The joy of shopping with trust, SSG.COM"), a phrase that fuses emotional warmth ("즐거움" / joy) with a trust promise ("믿고 사는" / buying with confidence). The brand never shouts or oversells — it positions itself as the authoritative curated destination.

Voice samples (verbatim from live homepage):

• "믿고 사는 즐거움 SSG.COM" — brand tagline / H1. (verified live 2026-06-22)
• "쓱-특가" — branded sale category tab. (verified live 2026-06-22)
• "오반장" — editorial curation section name, an SSG original (active tab). (verified live 2026-06-22)

Forbidden register: high-pressure flash-sale language, urgency timers with exclamation spam, gimmicky wordplay that dilutes the Shinsegae trust positioning.

11. Brand Narrative

SSG.COM (쓱닷컴) launched in 2014 as the unified digital commerce platform of Shinsegae Group, Korea's premier retail conglomerate. The name "SSG" is a phonetic playfulness — "쓱" (sseuk) is an onomatopoeia for a swift, smooth movement, captured in the platform's iconic "쓱~" brand campaign which turned a simple sound into one of Korea's most memorable retail phrases. The campaign starred celebrities Gong Yoo and Gianna Jun in a 2016 campaign that became a cultural touchstone, embedding the "쓱" (swipe/whoosh) as shorthand for effortless premium shopping.

The platform was conceived as the digital extension of the full Shinsegae ecosystem: Shinsegae Department Store (고급 백화점), emart (everyday hypermarket), and Traders (membership warehouse). SSG.COM unifies these channels under one digital destination — you can buy a Hermès bag and next-day delivery ramyeon in the same cart. This breadth-plus-trust positioning sets it apart from pure-play e-commerce rivals like Coupang (speed-first) or Gmarket (marketplace variety).

SSG.COM's design stance reflects this dual heritage: the clean, editorial restraint of premium department-store retail (white space, a single brand accent, squared precision) sits alongside the density and urgency of high-volume e-commerce (12px base size, red badges, information-dense product grids). The "쓱" brand is the synthesis — not just effortless, but effortlessly curated.

12. Principles

1. Trust through selection. SSG.COM's proposition is curation from a heritage retailer, not the widest marketplace. UI implication: editorial sections ("오반장") and department-store–quality categorization signal that not everything is sold — only trusted products.
2. One color, one signal. Brand red (#ff5452) means "deal, discount, value" — the same role the red sale tag plays on a department store rack. UI implication: red is reserved exclusively for price-reduction and promotional contexts; using it elsewhere erodes the discount-signal reflex.
3. Flat precision over decorative depth. A shadow-free, border-hairline system feels closer to print-quality product presentation than digital skeuomorphism. UI implication: no drop shadows; #e5e5e5 borders and #f5f5f5 surface shifts do all the separating.
4. Weight hierarchy over size hierarchy. Pretendard weight scales 400→700 within minimal size ranges, keeping the page compact and scannable. UI implication: promotion of text should happen through weight change before size change.
5. Square frames, curved selectors. Hard product-grid edges signal commerce and efficiency; the 24px pill on category tabs signals interactivity and personalization. UI implication: maintain the radius distinction — square for content, pill for choice.

13. Personas

Personas below are fictional archetypes informed by publicly observable SSG.COM user segments (Korean online shoppers spanning premium and everyday categories). Names are illustrative and do not refer to real individuals.

김수현, 38, 서울 강남. A working professional who shops Shinsegae Department Store online for fashion and beauty. Values brand trust and the assurance that products are genuine — not a marketplace replica. Comes to SSG.COM specifically for luxury and premium fashion categories; the editorial-department-store aesthetic reinforces that this isn't just another discount mall.

박지영, 32, 경기 분당. A busy parent who uses SSG.COM as an emart substitute — grocery, household, daily essentials with same-day or next-day delivery ("오늘출발"). The "무료배송" badge and transparent delivery promises are primary decision factors. Values the one-stop nature: from premium kitchen appliances to children's snacks in one cart.

이민준, 26, 부산. A trend-conscious consumer who shops "쓱-특가" and "마감세일" sections for discounted fashion items from reliable brands. The branded sale categories and red discount badges are the primary navigation path; the SSG trust positioning means the discount is real, not a manipulated "original price."

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: SSG.COM motion is functional and low-key — consistent with the flat, dense commerce aesthetic. The category pill tab switches states with a quick 100ms fill; banner carousels slide at 300ms/ease-enter. There are no bounce or spring effects — the department-store heritage demands an authoritative, steady feel, not playful motion. Discount badge animations (none observed in live inspect) are intentionally static — the red color itself is the signal, not motion. Under prefers-reduced-motion: reduce, all transitions collapse to instant, preserving full functionality.