1. Visual Theme & Atmosphere

Olive Young presents as a dense, scan-first H&B catalog: a near-monochrome grayscale chrome (white surface, body ink #666, primary ink #131518) carries 90%+ of the surface, then snaps awake at the product card with a five-color flag taxonomy — #F65C60 sale, #F374B7 오늘드림 same-day, #9BCE26 coupon, #6FCFF7 gift, plus the #F05A5E best-badge ring. Korean retail visual culture (Coupang, Wadiz, 11번가) leans on weight and tag-color over heroes; Olive Young sits at the disciplined end of that lineage — grid-tight, photo-led, with #fff ground for product respect and chromatic noise reserved for status payload. Architecturally the site is dual-stack — legacy JSP Montserrat → NotoSansCJKkr → AppleSDGothicNeo → 돋움 chrome on /store/main/*, /best, /search, while the new Next.js subtree (visible on /store/goods/getGoodsDetail.do even in its ProductNotFound shell — ProductNotFound_btn__, GnbForDesktop_category-toggle-button__, OYCompanyInfo_* CSS Modules, runtime --background:#0a0a0a / --foreground:#ededed / --font-noto-sans-kr / --font-roboto) signals a multi-year token refresh in flight on product-detail first. Mood word: brisk pharmacy aisle — bright, taxonomic, no rhetorical lift, the work happens at the thumbnail.

2. Color

Discipline rule (observed): Olive Young does not put hue on its chrome. Buttons, nav, footer, search input, headings all sit on #000–#888 neutrals; the five flag hues exist only inside the thumbnail rectangle as status payload. Olive Green (the corporate logotype color) is absent from the storefront chrome — the closest live token is the lime-leaning coupon flag #9BCE26.

3. Typography

• Stack (legacy JSP chrome): Montserrat, -apple-system, NotoSansCJKkr, AppleSDGothicNeo, Roboto, dotum, 돋움, sans-serif
• Stack (Next.js subtree): -apple-system, system-ui, AppleSDGothicNeo, "Noto Sans", Roboto, Montserrat, sans-serif
• Body: 14px / 400 / #666 / lh ~1.4
• Size scale observed: 12, 13, 13.33, 14, 15, 16, 20, 26, 28 px (no formal modular scale; the 13.333px shows up in buttons converted from 0.833em)
• Weight scale: 200 (rare ornamental), 400, 500 (Next.js subtree), 700 (default emphasis)
• H1: 28px / 700 (legacy main) — used sparingly; most surfaces are H-less
• Korean rendering: intentional 4-stop fallback chain ending at dotum / 돋움 preserves rendering for legacy WinXP/MacOS Korean readers (uncommon discipline in 2026 KR e-commerce — legacy retention not pruned)

4. Components

Button — Primary (filled black CTA, legacy chrome)

Default

• Background: #000000
• Text: #FFFFFF
• Border: 0
• Radius: 4px
• Padding: ~12px 18px (h≈40)
• Font: 13.33px / 700 / Montserrat→NotoSansCJKkr
• Use: "장바구니 담기" / primary commit on legacy surfaces

Button — Outline neutral

Default

• Background: #FFFFFF
• Text: #454C53
• Border: 1px solid #E5E7EA
• Radius: 4px
• Padding: ~10px 16px (h≈40)
• Font: 14px / 500
• Use: "신상 더보기" / secondary actions

Button — Pagination

Active

• Background: #2F3030
• Text: #FFFFFF
• Border: 0
• Radius: 50% (circular)
• Size: 24×24
• Font: 14px / 700
• Use: Current page indicator

Default

• Background: transparent
• Text: #888888
• Border: 0
• Radius: 0
• Font: 14px / 700
• Use: Other-page link

Pill — Category (top-of-main shortcut)

Active

• Background: #000000
• Text: #FFFFFF
• Border: 0
• Radius: 20px
• Padding: ~8px 14px (h≈34)
• Font: 14px / 400
• Use: Selected category shortcut

Default

• Background: #FFFFFF
• Text: #757D86
• Border: 1px solid #E5E7EA (inferred — same chip family)
• Radius: 20px
• Font: 14px / 400
• Use: Unselected category shortcut

Chip — Filter (search results)

Default

• Background: #FFFFFF
• Text: #757D86
• Border: 1px solid #E5E7EA
• Radius: 18px
• Padding: ~8px 14px (h=36)
• Font: 14px / 400
• Use: 제품특징 / 가격대 / 색상 facet filters

Flag — Status pill (in-thumbnail status payload)

Sale

• Background: #F65C60
• Text: #FFFFFF
• Border: 0
• Radius: 9px
• Padding: ~3px 6px (h=18)
• Font: 12px / 400
• Use: Active price discount

Same-day (오늘드림)

• Background: #F374B7
• Text: #FFFFFF
• Border: 0
• Radius: 9px
• Font: 12px / 400
• Use: Same-day quick-commerce eligibility

Coupon

• Background: #9BCE26
• Text: #FFFFFF
• Border: 0
• Radius: 9px
• Font: 12px / 400
• Use: Coupon-eligible SKU

Gift

• Background: #6FCFF7
• Text: #FFFFFF
• Border: 0
• Radius: 9px
• Font: 12px / 400
• Use: Gift-with-purchase

Badge — Best (large pill, sash-style)

Default

• Background: #FFFFFF
• Text: #F05A5E
• Border: 2px solid #F05A5E
• Radius: 24px (pill)
• Padding: ~8px 18px (h=48)
• Font: 14px / 700
• Use: Best-seller call-out on hero rails

Heart — Wishlist button

Idle (off)

• Background: #FFFFFF
• Icon color: (icon-asset, color via SVG fill)
• Border: 1px solid #EBEBEB
• Radius: 0 (square hit-box)
• Size: 40×40
• Use: 찜하기 toggle

Input — Search (GNB)

Default

• Background: #FFFFFF
• Text: #131518
• Border: bottom-only / inherited
• Radius: 0
• Height: 38
• Font: 13.33px (legacy) / 16px (Next.js)
• Use: Global product search

Card — Product tile (search/list)

Default

• Background: #FFFFFF
• Thumbnail aspect: 1:1 square (standard for KR H&B grid)
• Title: 14px / 400 / #333
• Brand: 12px / 400 / #888
• Price (active): 14–16px / 700 / #131518
• Strike price: 12px / 400 / #AAA line-through
• Flag area: 9px-radius pills inside thumb corner
• Border: 0 (separated by #EBEBEB grid gap)
• Use: Search result / category list / best list

16. Do's and Don'ts

Do

• Keep all chrome — nav, header, footer, buttons, search input, headings — on the #131518–#888 grayscale neutrals and reserve every hue for status payload
• Confine the five flag hues (#F65C60 sale, #F374B7 오늘드림, #9BCE26 coupon, #6FCFF7 gift, #F05A5E best) to inside the thumbnail rectangle as 9px-radius status pills
• Map each flag color 1:1 to a single service fact (sale / same-day / coupon / gift / best) rather than to a marketing mood
• Encode interactive state with ink-darkening plus shape change — e.g. flip active pagination from transparent/#888 radius-0 to #2F3030/#FFF 50% circle — not with hue
• Keep the Korean fallback chain ending at dotum / 돋움 to preserve rendering for older Windows/macOS Korean readers
• Write CTAs as factual 하기-verb labels like "장바구니 담기" and "찜하기" in casual-polite declarative tone, not imperative urgency copy

Don't

• Put any flag color or hue on a primary CTA or chrome surface — the filled CTA stays #000000 background with #FFFFFF text
• Introduce a sixth status color for a "new" or extra badge — reuse one of the existing five flag roles or skip the chrome
• Add hover lift, shadow gain, or drop shadows to tiles, chips, or pills — depth in this system stays line-only and state is static-encoded
• Spread Olive Green or the coupon lime #9BCE26 across chrome or large backgrounds — corporate olive is absent from the storefront and the lime lives only in the coupon flag
• Prune the Korean fallback chain down to system-ui only, dropping the deliberate 돋움 legacy-OS support floor
• Reproduce verbatim Olive Young marketing taglines or write hard-sell copy like "지금 안 사면 손해예요" — copy works as neutral labels and offers

---

Verified: 2026-05-15 Tier 1 sources: CDP :9222 getComputedStyle on (a) https://www.oliveyoung.co.kr/store/main/main.do 65 distinct samples · (b) /store/main/getBestList.do 33 samples · (c) /store/search/getSearchMain.do?query=선크림 55 samples · (d) /store/goods/getGoodsDetail.do?goodsNo=A000000167660 26 samples on Next.js shell. Total 179 distinct DOM samples across 4 surfaces. Artifacts: assets/_reference/tokens.json, structure.json, fonts.json, .live-inspect-proof.json (11 raw_samples — over the ≥5 floor). Tier 1 official DS: ✗ negative — design.oliveyoung.co.kr no DNS, oliveyoung.design no DNS, corp.oliveyoung.com/* 404, cjoliveyoung.co.kr ECONNREFUSED, no public Figma library, no github.com/oliveyoung* design-system repo. Documented authoritative negative. Discovery: production code reveals a dual-stack migration in flight (legacy JSP chrome + Next.js product-detail subtree with --background/--foreground/--font-noto-sans-kr/--font-roboto runtime vars + *_btn__hash CSS-Modules) — the canonical token system lives inside the Next.js bundle, not on a public docs surface. Tier 2 sources: ✗ getdesign.md/oliveyoung — fetch blocked by Claude auto-mode classifier (domain not user-allowlisted), unable to verify presence/absence this pass; ✗ styles.refero.design ?q=oliveyoung — no result cards. Conflicts unresolved: none material — accent/promo-salmon #F27370 vs flag/best #F05A5E differ by 2 RGB steps; treated as two distinct tokens since they appear on different surface roles (promo shelf vs taxonomic badge). Flagged for UPDATE pass: product-detail (real SKU), cart, my-page, mobile (m.oliveyoung.co.kr) — not captured this session.

5. Layout & Grid

• Page width: 1280px fixed container (legacy chrome); Next.js subtree fluid
• GNB: 90px header inner + 119px design-area (banner row), fixed top
• Search input: 38px height
• Card grid (search/best): 4-up desktop, square thumbnails, ~16px gutter
• Filter strip (search): 36px chips, paper bg #F6F7F9, top of result column
• Pagination: 24×24 circular active dot, centered below grid

6. Iconography

• Style: Outlined line icons at 16–24px, monochrome ink (no two-tone). Stroke ~1.5px. Korean retail convention (cart/heart/coupon/gift glyphs) inherited rather than custom.
• Filled use: Only in flag pills (no in-pill icon; pill itself is the icon).
• Heart: Outline default → filled #F05A5E on active (inferred from btn_zzim jeem class semantics).

7. Motion & Easing

• Carousel transitions: slick carousel (legacy) on hero rails — default 300ms slide
• Hover states: Catalog tiles use static hover (no lift / no shadow gain — depth is line-only in the system; corroborates the 0-shadow observation)
• Next.js subtree: --swiper-theme-color: #007aff exposed (default Swiper iOS blue; visual non-load because chrome overrides)
• Floor: No site-wide CSS custom-property motion tokens — durations live inside vendor carousels (slick, Swiper). Flagged as a follow-up: motion token harvest from product-detail page after a real SKU loads.

8. Accessibility & Density

• Body 14px / #666 on white = ~5.7:1 contrast — passes WCAG AA for body text, fails AAA for small text
• Chip text #757D86 on white = ~4.5:1 — at the AA floor; chips with mixed-case Korean (대 vs ㅏ) are legible but borderline
• Flag contrasts (white text on flag color):
  • Sale #F65C60 ≈ 3.2:1 → fails AA for normal text; passes for 14px bold or larger via Korean Bold-text exception; documented trade-off
  • Coupon #9BCE26 + white ≈ 1.8:1 → fails AA; legibility relies on the 12px size + bold-by-CJK rendering
  • Gift #6FCFF7 + white ≈ 1.6:1 → fails AA
• Touch targets: Pagination 24×24 below WCAG 2.5.5 (44×44) — speed-over-floor decision typical of KR catalog UIs
• Korean fallback chain ends at 돋움 — explicit legacy-OS support, rare in 2026

9. Voice & Tone

• Voice adjectives (3): Direct · Functional · Promotional — no rhetorical lift; copy works as labels and offers.
• Korean style: Casual-polite ("~해요/세요"), declarative, comma-light, status-first ("세일", "오늘드림", "쿠폰", "증정"). Imperative-light — even CTAs read as factual ("장바구니 담기" not "지금 사세요").
• Pattern: Verb + 하기 noun ("찜하기", "담기", "더보기", "1:1문의하기") is the dominant CTA shape — observed on 6+ buttons across captures.
• Do / Don't (fresh OmD illustrative — not Olive Young verbatim):

Voice samples (3 fresh illustrative reconstructions — not Olive Young copy):

1. "오늘 도착 가능한 상품만 모았어요." — same-day filter affordance
2. "회원이면 ₩2,000 더 저렴해요." — soft commercial nudge, declarative not imperative
3. "이 색상은 다음 주에 다시 들어올 것 같아요." — OOS state, soft restock signal

IP guardrail: No verbatim Olive Young marketing copy reproduced. Voice samples above are OmD-original constructions modelled on the observed shape (casual-polite + declarative + 하기-verb), not the substance.

10. Brand Narrative

CJ Olive Young is the H&B (Health & Beauty) retail arm of CJ Group, founded 1999 and operating as Korea's #1 omnichannel H&B chain — ~1,300 stores nationwide plus the oliveyoung.co.kr web/app and global.oliveyoung.com cross-border surface. Its visual posture matches its category position: not a beauty aspirational brand (no editorial hero shots, no rhetorical typography), but the default aisle — a high-velocity catalog where SKU density, in-stock status, same-day eligibility, and coupon math do the persuasive work. The recent migration of product-detail to Next.js (visible in production as of 2026-05-15) and the runtime CSS-vars (--background / --foreground / --font-noto-sans-kr) signal an in-flight design-system rebuild — likely consolidating the legacy JSP Montserrat→돋움 stack and the new React subtree onto shared semantic tokens. Narrative facts above are public-record; founder voice and design-team attribution [FILL IN] — no verbatim attribution available in EN-language sources.

11. Principles

1. Chrome stays gray; flags do the work. Olive Young commits to neutral grayscale across nav/header/footer/buttons and reserves all five hues for in-thumbnail status. UI implication: when porting, never put a flag color on a primary CTA or chrome surface — it breaks the system's status-vs-action separation.
2. One flag = one fact. Sale / 오늘드림 / 쿠폰 / 증정 / 베스트 each map 1:1 to a service feature, not a marketing mood. UI implication: don't introduce a sixth color for a "new" badge; pick one of the existing flag roles or skip the chrome.
3. Weight signals over hue. Active pagination flips from transparent/#888 to #2F3030/#FFF and goes from radius-0 to 50% circle — state encoded by 2 axes (fill + radius) not by hue. UI implication: prefer ink-darkening + shape-change for state; reserve color for status payload.
4. Korean rendering down to 돋움. The fallback chain explicitly retains a Windows-XP/older-macOS Korean glyph — a deliberate accessibility floor for older readers. UI implication: never prune the Korean fallback chain to system-ui only.
5. Migrate in subtrees, not big-bang. Product-detail Next.js + legacy JSP main coexist; the catalog shopper sees a consistent chrome despite two stacks underneath. UI implication: design-system migrations should target one feature surface at a time and share visual tokens at the chrome level.

12. Personas

Illustrative archetypes — not Olive Young user research; OmD-original for design framing.

• Han-na (29, office worker, Seoul): browses on phone during commute, scans flags before titles, expects 오늘드림 by 14:00 cutoff, abandons if cart total doesn't show coupon math inline. Comfort with Korean copy, low patience for English-loanword decoration.
• Ji-won (38, parent, Suwon): weekend desktop session, builds a 8–12 SKU cart of repeat-buy basics, sorts by coupon eligibility, treats #9BCE26 coupon flag as primary signal-to-noise filter.
• Min-jae (24, K-beauty enthusiast, Busan): product-detail page is the destination — wants ingredient list, review filter by skin type, real-color swatch photos. The Next.js detail-page rebuild is for this persona.
• Su-jin (52, gift-buyer, Daejeon): lower digital comfort, relies on category pills and "베스트" badge — the radius-24px pill is a literal stamp of "popular enough to trust." Korean fallback to 돋움 is for this reader.

13. States

14. Motion & Easing

• Carousel: slick (legacy hero) — default 300ms slide, ease-in-out
• Carousel: Swiper (Next.js subtree) — --swiper-theme-color: #007aff exposed (visual override likely)
• Hover: none observed on tiles, chips, or pills — depth and state are static-encoded
• Floor: No site-wide motion tokens captured. Flagged as follow-up — capture from a real product-detail SKU + cart-add transition.

15. References & Footer

Live capture (Tier 1):

• https://www.oliveyoung.co.kr/store/main/main.do (65 samples, legacy JSP)
• https://www.oliveyoung.co.kr/store/main/getBestList.do (33 samples, legacy JSP, promo-salmon #F27370)
• https://www.oliveyoung.co.kr/store/search/getSearchMain.do?query=선크림 (55 samples, full 5-color flag taxonomy captured here)
• https://www.oliveyoung.co.kr/store/goods/getGoodsDetail.do?goodsNo=A000000167660 (26 samples, Next.js subtree shell + runtime CSS vars)
• Harness: Chrome DevTools Protocol :9222 via websocket-client (suppress_origin=True)
• Artifacts: assets/_reference/tokens.json · structure.json · fonts.json · .live-inspect-proof.json (11 raw_samples)

Tier 1 official DS: ✗ negative (authoritative). No design.oliveyoung.co.kr / oliveyoung.design DNS; corp.oliveyoung.com/* 404; cjoliveyoung.co.kr ECONNREFUSED; no public Figma library or GitHub design-system repo at github.com/oliveyoung*. The canonical token system lives inside the Next.js bundle on product-detail (CSS Modules *_btn__ + runtime --font-noto-sans-kr / --background / --foreground vars) — accessible only by live inspect.

Tier 2 sources: ✗ getdesign.md/oliveyoung blocked by Claude auto-mode (domain not allowlisted) — unable to verify this pass; ✗ styles.refero.design ?q=oliveyoung no result cards.

IP guardrails:

• Brand mark and product photography referenced for token harvest only — no asset stored beyond JSON observation records
• No verbatim Olive Young marketing taglines reproduced (none observed in captures)
• §9 voice samples are OmD-original illustrative — modelled on observed shape (declarative + 하기-verb + casual-polite), not substance
• §12 personas are illustrative (no user research); flagged in section header

Conflicts unresolved: none material. Promo-salmon #F27370 vs flag-best #F05A5E treated as distinct (role-separated). Token-name choices in §2 are OmD coinage — Olive Young does not publish a canonical name table.

Follow-up UPDATE pass recommended:

• Real product-detail SKU (Next.js token harvest — --* vars + Module class catalog)
• Cart / my-page / checkout (state matrix completion)
• Mobile site m.oliveyoung.co.kr (touch-target audit)
• Motion token harvest (durations, easings)
• Re-attempt Tier 2 (getdesign.md with user-allowlisted fetch)