Design System Inspiration of 11st

1. Visual Theme & Atmosphere

11st (11번가) is one of Korea's largest open-market e-commerce platforms, and its homepage is built for one job: get a shopper from a vast, dense catalog to a purchase decision as fast as possible. The atmosphere is high-density and utilitarian — a white canvas (#ffffff) packed edge-to-edge with product tiles, prices, badges, and navigation. This is not the airy, whitespace-luxury aesthetic of a Western SaaS landing page; it is the deliberate, information-rich layout of a Korean mega-mall portal where every pixel of above-the-fold real estate earns its place. The reading temperature is set by a neutral gray body color (#666666) on near-black headings (#111111), keeping the chrome quiet so that color can do exactly one thing: signal commerce urgency.

That single signal is the 11st brand red. The live DOM reveals a sharp, saturated red (#ff0038) on active and focused states, paired with a slightly warmer discount-accent red (#f43142) for promotional emphasis like discount-rate flags. Against the otherwise grayscale field, red is never decorative — it marks the thing you should act on or the saving you should notice. This restraint is the system's core discipline: a dense gray-and-white grid in which red is the only loud color, so the eye is trained to follow it straight to a CTA or a markdown.

Typography is Korean-first. The stack leads with Noto Sans KR, falling back through Apple SD Gothic Neo and Malgun Gothic — the standard high-legibility Hangul stack tuned for small sizes at high density. Most text runs at 14px, the workhorse size of Korean portal UIs, with prices escalating to a bold 24px (#111111, weight 700) as the loudest unit on any product card. There is almost no shadow and almost no rounding in the base chrome; depth and softness are reserved, appearing only as gentle ambient elevation on hover and a distinctive 25px-radius pill on the integrated search-scope selector.

Key Characteristics:

• White canvas (#ffffff) with a high-density grid — information-rich, portal-style, anti-whitespace
• Brand red #ff0038 as the single action/urgency color on active and focused states
• Warmer discount red #f43142 reserved for promotional markdown emphasis
• Noto Sans KR Hangul-first stack tuned for small-size legibility at high density
• 14px body workhorse; bold 24px price (#111111 weight 700) as the dominant card emphasis
• Strikethrough original price in muted gray (#a9a9a9) beside the red-adjacent discount figure
• Near-flat chrome — minimal shadow, minimal rounding — with a signature 25px search-tab pill
• Grayscale field (#111111/#666666/#a9a9a9) so red reads as pure intent

2. Color Palette & Roles

Primary

• 11st Red (#ff0038): The brand's signature commerce red. Active/focused search-tab state, primary CTA backgrounds, urgency markers. A sharp, fully saturated red that anchors the entire system.
• Near-Black Ink (#111111): Primary heading and price color. Not pure black — a dense near-black that reads as authoritative without harshness on white.
• Pure White (#ffffff): Page background, card surfaces, search field fill, CTA text on red.

Accent

• Discount Red (#f43142): Slightly warmer red used on promotional emphasis — discount-rate flags, "관련 상품" accent emphasis. Distinct from the action-red #ff0038; this is the markdown/savings register.

Neutral Scale

• Body Gray (#666666): Secondary text, navigation links, labels, the default reading color across chrome.
• Muted Gray (#a9a9a9): Strikethrough original price (판매가), de-emphasized metadata, the "before discount" register.
• Hairline (#eeeeee): Card borders, dividers, search-field underlines, the quiet structural lines of the dense grid.

Surface & Ink

• Ink (#000000): True black reserved for fine iconography and maximal-contrast micro-elements.
• On-Primary (#ffffff): Text and icon color on the red CTA surface.

3. Typography Rules

Font Family

• Primary: Noto Sans KR
• Fallback: Apple SD Gothic Neo, Malgun Gothic, 맑은 고딕, 돋움, sans-serif
• The Hangul-first stack is chosen for crisp legibility at the small sizes (11px–14px) that dominate a dense commerce grid.

Hierarchy

Principles

• 14px is the workhorse. The vast majority of chrome, navigation, and labels sit at 14px — the standard Korean portal reading size that balances density against legibility.
• Price is the headline. There is no 48px hero type here. The biggest, boldest text on the page is a price (24px / 700). In a commerce-first system, the number IS the headline.
• Weight binary. The system runs on 400 (everything) and 700 (headings, prices, emphasis). There is no light-weight display register; this is functional type, not luxury type.
• Hangul-first legibility. Noto Sans KR is engineered for the small sizes the dense grid demands; the fallback chain keeps Hangul rendering consistent across OSes.

4. Component Stylings

Buttons

Primary CTA

• Background: #ff0038
• Text: #ffffff
• Padding: 12px 24px
• Radius: 4px
• Font: 16px Noto Sans KR weight 700
• Use: Primary commerce action (구매하기 / 장바구니 / 주문하기)

Ghost / Secondary

• Background: #ffffff
• Text: #111111
• Padding: 10px 20px
• Radius: 4px
• Border: 1px solid #eeeeee
• Use: Secondary actions, filters, quiet controls

Search Tab (integrated scope selector)

• Active label color: #ff0038
• Radius: 25px (the system's signature pill seat)
• Padding: 0px 20px 2px
• Font: 16px weight 400
• Use: Switching search scope (통합검색 / 아마존). The 25px-radius pill is the one place softness appears in the chrome.

Search Input

• Background: #ffffff
• Text: #666666
• Radius: 4px
• Padding: 0px 12px
• Border: hairline #eeeeee underline/border
• Font: 16px weight 400

Cards & Containers (product tile)

• Background: #ffffff
• Border: 1px solid #eeeeee
• Radius: 8px
• Shadow: none at rest; ambient rgba(0,0,0,0.06) 0px 2px 8px on hover
• Contents: thumbnail, title at 14px, discount-rate badge, 24px/700 discount price, strikethrough original price at 13px #a9a9a9

Badges

Discount-Rate Flag

• Background: #ffffff
• Text: #f43142
• Padding: 1px 6px
• Radius: 4px
• Font: 11px weight 700
• Use: Discount percentage (13%할인) — red figure on white

Navigation (GNB / category)

• Row text: #666666 at 14px weight 400
• Hover: text shifts to #111111
• Radius: 0px (square, dense rows)
• White background, hairline #eeeeee dividers

Tier 1 sources: https://www.11st.co.kr, https://about.11st.co.kr

5. Layout Principles

Spacing System

• Base unit: 4px
• Scale: 4px, 8px, 12px, 16px, 20px, 24px, 40px
• The dense small-end steps (4–12px) reflect a layout that packs many tiles and labels into limited vertical space.

Grid & Container

• Wide centered content column (~1240px) holding multi-column product grids
• Above-the-fold is information-maximal: GNB, integrated search, category rail, promo banners, and product rails all compete for the first screen
• Product tiles arranged in dense responsive grids (typically 4–6 across on desktop)

Whitespace Philosophy

• Density as a feature. Unlike whitespace-forward Western design, 11st treats density as a service to the shopper — more products visible means fewer scrolls to a decision. Gaps are tight and functional.
• Hairlines over gaps. Structure is communicated by #eeeeee hairlines and borders rather than large empty margins, keeping the grid legible while maximizing content.

Border Radius Scale

• Square (0px): Nav rows, dividers, many structural blocks
• Small (4px): Buttons, badges, inputs — the workhorse rounding
• Medium (8px): Product cards, thumbnails
• Pill (25px): The integrated search-scope tab — the signature soft accent
• Full (9999px): Circular icon buttons (scroll-to-top, category toggle)

6. Depth & Elevation

Shadow Philosophy: 11st is a near-flat system. At rest, the chrome carries no shadow at all — structure comes from hairlines and color blocks, not elevation. Shadow appears only as a soft ambient lift on hover and as a slightly deeper layer for floating menus. This restraint keeps the dense grid visually calm; if every tile cast a shadow, the page would become noise. Depth is an interaction affordance here, not a decorative style.

7. Do's and Don'ts

Do

• Use #ff0038 as the single action/urgency color — CTAs, active states, focus
• Reserve #f43142 for discount/markdown emphasis (rate flags, savings)
• Make the price the loudest element: 24px weight 700 in #111111
• Pair the discount price with a muted #a9a9a9 strikethrough original
• Use Noto Sans KR and keep body text at 14px for portal-grade density
• Communicate structure with #eeeeee hairlines, not large gaps
• Keep chrome flat; reserve ambient shadow for hover/floating layers only
• Use the 25px pill only on the integrated search-scope tab — it is a signature, not a default

Don't

• Don't introduce a second loud color — red is the only urgency signal
• Don't use pure black (#000000) for headings; use near-black #111111
• Don't add airy whitespace at the expense of product density — density is the value
• Don't pill-round buttons or cards; rounding stays at 4–8px outside the search tab
• Don't shadow resting tiles — flat-at-rest keeps the dense grid calm
• Don't shrink the price below its 24px/700 dominance on a card
• Don't mix #ff0038 and #f43142 arbitrarily — action-red vs markdown-red are distinct roles
• Don't substitute a Latin-first font stack; Hangul legibility leads

8. Responsive Behavior

Breakpoints

Touch Targets

• Primary CTA at 12px/24px padding gives a comfortable tap surface
• Nav rows and category items spaced for thumb reach on mobile
• Circular icon buttons (scroll-to-top, category toggle) sized for tap

Collapsing Strategy

• Product grid: 6-column → 4 → 3 → 2 → 1 across breakpoints
• GNB: full horizontal nav → hamburger/category drawer on mobile
• Integrated search: persistent and often sticky at the top on mobile
• Price block maintains its 24px/700 dominance; surrounding metadata wraps or truncates first

Image Behavior

• Square product thumbnails with 8px radius, consistent across breakpoints
• Promo banners scale full-width and swap to mobile-cropped variants
• Lazy-loaded tiles below the fold to keep the dense grid performant

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA / urgency: 11st Red (#ff0038)
• Discount / markdown accent: Discount Red (#f43142)
• Background: Pure White (#ffffff)
• Heading / price: Near-Black (#111111)
• Body text / nav: Body Gray (#666666)
• Strikethrough / muted: Muted Gray (#a9a9a9)
• Border / hairline: (#eeeeee)
• CTA text: White (#ffffff)

Example Component Prompts

• "Create a product card: white background, 1px solid #eeeeee border, 8px radius, no shadow at rest. Discount-rate badge in #f43142 (11px / 700) top-left. Title at 14px Noto Sans KR #666666. Discount price at 24px weight 700 #111111. Strikethrough original price at 13px #a9a9a9 beside it. On hover, ambient shadow rgba(0,0,0,0.06) 0px 2px 8px."
• "Build a primary CTA: #ff0038 background, white text, 16px Noto Sans KR weight 700, 12px 24px padding, 4px radius. Label '구매하기'."
• "Design an integrated search bar: white field, 16px #666666 text, hairline #eeeeee border, 4px radius, with a 25px-radius scope tab whose active label is #ff0038."
• "Create a dense GNB row: white background, #666666 14px links, hover to #111111, #eeeeee divider hairlines, 0px radius square rows."

Iteration Guide

1. Keep #ff0038 as the only loud color — if a second bright hue appears, remove it.
2. The price is the headline: 24px / 700 / #111111, never smaller than its surroundings.
3. Body stays at 14px Noto Sans KR; weight is binary (400 / 700).
4. Structure with #eeeeee hairlines, not whitespace — density is intentional.
5. Chrome is flat at rest; shadow only on hover (rgba(0,0,0,0.06) 0px 2px 8px) or floating layers.
6. Rounding stays at 4–8px; the 25px pill is exclusive to the search-scope tab.
7. Distinguish #ff0038 (action) from #f43142 (markdown) by role, never interchangeably.

---

10. Voice & Tone

11st's voice is brisk, transactional, and benefit-forward — the register of a Korean open-market that competes on price, speed, and selection. Microcopy is short and action-oriented: 구매하기 (buy), 장바구니 (cart), 할인 (discount), 무료배송 (free shipping). Numbers do the persuading — discount rates, final prices, point rewards — so prose stays out of the way. There is warmth in promotional energy (events, coupons, time-limited deals) but the underlying tone is efficient and shopper-respecting: tell me the price, the saving, and the action, in that order.

Forbidden register. Avoid airy lifestyle-brand prose that buries the price. Avoid burying the discount under adjectives. Avoid a second loud color competing with red for attention. The shopper came to compare and buy — respect that with numbers and clear actions, not mood copy.

11. Brand Narrative

11st (11번가) launched in 2008 as the open-market e-commerce platform of SK in South Korea, entering a market already contested by Gmarket and Auction. It grew into one of Korea's largest online marketplaces, and in 2018 the e-commerce business was spun off into a standalone company, Eleven Street Co., Ltd., under the SK Square / SK Telecom orbit. The name "11번가" — literally "11th Street" — frames the service as a bustling commercial street where countless sellers and shoppers meet, an open marketplace rather than a single first-party retailer.

The platform's defining strategic move in recent years has been its Amazon Global Store partnership, surfacing Amazon's catalog to Korean shoppers directly inside 11st — which is why the integrated search even offers an "아마존" scope alongside 통합검색. This positions 11st not just as a domestic open-market but as a gateway to cross-border selection, competing on breadth of catalog and price.

The design system follows directly from this identity. An open-market with millions of SKUs and thousands of sellers cannot afford editorial whitespace; it must surface as many comparable options as possible, as fast as possible. Hence the dense grid, the price-as-headline hierarchy, and the single disciplined use of red to mark action and savings. 11st's brand promise is selection and value, and the UI is engineered to deliver both at a glance.

12. Principles

1. Density serves the shopper. More products visible means fewer steps to a decision. Tight grids and hairline structure are a service, not a compromise.
2. The price is the headline. In open-market commerce, the most important information is the number. It gets the largest, boldest type on the card.
3. Red means act or save. A single saturated red (#ff0038) marks the action; a markdown red (#f43142) marks the saving. Red is never decorative.
4. Hangul-first legibility. Noto Sans KR at small sizes keeps a dense Korean grid crisp and scannable.
5. Flat at rest, lift on intent. No resting shadows; elevation is an interaction affordance, keeping the busy grid calm.
6. Structure with lines, not gaps. #eeeeee hairlines organize density where whitespace would waste it.
7. One signature softness. The 25px search-scope pill is the single intentional curve in an otherwise square, functional chrome.
8. Selection is the brand. From domestic sellers to the Amazon Global Store, breadth of catalog is the promise the layout must honor.

13. Personas

Personas below are fictional archetypes informed by publicly observable 11st user segments (deal-seeking shoppers, mobile-first buyers, cross-border bargain hunters, third-party sellers), not individual people.

Ji-woo Park, 29, Seoul. Mobile-first deal hunter. Opens 11st during her commute to compare prices on a specific gadget across sellers. Scans discount-rate badges and final prices in seconds; the strikethrough original tells her how good the deal is. Abandons any page where she has to hunt for the price. Trusts the platform because the savings are always legible at a glance.

Min-jun Kim, 42, Daegu. Household-supplies bulk buyer. Uses 11st on desktop, filling a cart with everyday goods and chasing free-shipping thresholds and point rewards. Values the dense grid — he can see dozens of options without scrolling endlessly. Reads product titles like a spec sheet and ignores anything that looks like marketing fluff.

Seo-yeon Lee, 35, Bundang. Cross-border bargain shopper. Came to 11st specifically for the Amazon Global Store — she toggles the search scope to 아마존 to compare imported goods against domestic listings. Cares about total landed price and delivery estimate. The integrated search that spans both catalogs is exactly why she stays on 11st instead of using two sites.

Tae-hyun Jung, 38, Incheon. Third-party seller running a small electronics shop on the open-market. Thinks about how his listings render in the grid — thumbnail, title keywords, discount badge, price. Knows that a clear discount-rate flag and a competitive final price are what win the click in a sea of comparable tiles.

14. States

15. Motion & Easing

Durations:

Easings:

Restraint. Motion is functional, not playful. A dense commerce grid stays calm — hover lifts are quick (150ms) and small, panels slide with standard easing, and there is no bounce or spring that would make a busy page feel chaotic.

Signature motions.

1. Card hover lift. Product tiles raise with a fast (150ms) ambient shadow (rgba(0,0,0,0.06) 0px 2px 8px) — a small, quick affordance confirming the tile is interactive without disturbing the grid's calm.
2. Search-scope tab switch. Switching between 통합검색 and 아마존 transitions the active label to #ff0038 within the 25px pill seat using ease-standard — instant feedback on scope change.
3. Category drawer / cart layer. Slide-in panels use motion-standard with ease-enter; dismissals use ease-exit. The grid behind stays still.
4. Reduce motion. Under prefers-reduced-motion: reduce, hover lifts and panel slides collapse to instant. The dense grid remains fully functional; nothing essential depends on animation.