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
| Token | Value | Role |
|---|
ink/primary | rgb(19, 21, 24) ≈ #131518 | GNB items, nav, headings on white |
ink/default | rgb(51, 51, 51) ≈ #333 | Card titles, mid-weight copy |
ink/body | rgb(102, 102, 102) ≈ #666 | Body default (also body element color) |
ink/muted | rgb(136, 136, 136) ≈ #888 | Meta lines, inactive pagination |
ink/disabled | rgb(170, 170, 170) ≈ #AAA | Disabled |
ink/neutral-dark | rgb(47, 48, 48) ≈ #2F3030 | Active pagination fill |
ink/neutral-alt | rgb(69, 76, 83) ≈ #454C53 | "신상 더보기" outline button text |
ink/neutral-alt-2 | rgb(80, 88, 95) ≈ #50585F | Footer links / company-info button |
ink/neutral-alt-3 | rgb(117, 125, 134) ≈ #757D86 | Chip text |
surface/white | #FFFFFF | Ground (≈ all chrome) |
surface/paper | rgb(246, 247, 249) ≈ #F6F7F9 | Filter strip / quiet panels |
line/default | rgb(229, 231, 234) ≈ #E5E7EA | Chip + card border |
line/thin | rgb(235, 235, 235) ≈ #EBEBEB | 1px tile separator (heart-button border) |
flag/sale | rgb(246, 92, 96) ≈ #F65C60 | "세일" pill |
flag/best | rgb(240, 90, 94) ≈ #F05A5E | "베스트" badge ring + text |
flag/same-day | rgb(243, 116, 183) ≈ #F374B7 | "오늘드림" |
flag/coupon | rgb(155, 206, 38) ≈ #9BCE26 | "쿠폰" (closest live token to brand olive) |
flag/gift | rgb(111, 207, 247) ≈ #6FCFF7 | "증정" |
accent/promo-salmon | rgb(242, 115, 112) ≈ #F27370 | Promotional shelf accent on /best |
nextjs/dark-bg | #0a0a0a | Next.js subtree fallback background var |
nextjs/dark-fg | #ededed | Next.js subtree fallback foreground var |
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
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):
| Do | Don't |
|---|
| "쿠폰가 보기" | "지금 안 사면 손해예요" |
| "내 피부톤에 맞는 쿠션 골라보기" | "당신을 위해 골랐어요" |
| "오늘 받는 상품만 보기" | "오늘 안 받으면 후회해요" |
Voice samples (3 fresh illustrative reconstructions — not Olive Young copy):
- "오늘 도착 가능한 상품만 모았어요." — same-day filter affordance
- "회원이면 ₩2,000 더 저렴해요." — soft commercial nudge, declarative not imperative
- "이 색상은 다음 주에 다시 들어올 것 같아요." — 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
- 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.
- 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.
- 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.
- 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.
- 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
| State | Pattern |
|---|
| Empty (search 0-result) | Centered "이전 페이지 / 홈으로 가기" pair — outline white-bg + filled-black; observed on getGoodsDetail.do ProductNotFound shell (Next.js) |
| Loading | No skeleton observed on legacy chrome; Next.js subtree presumed (not captured this pass — flagged) |
| Error — 404 | ProductNotFound_btn-area__Q_xDU two-button shell, neutral chrome, no error red |
| Error — form | Not captured this pass; flagged for UPDATE |
| Success — added to cart | Toast pattern presumed; not captured |
| Skeleton | Likely tile-shaped on Next.js detail; not captured |
| Disabled (button) | Inferred — opacity-driven on legacy (no dedicated token) |
| Hover (chip / pill) | Static — no shadow gain, no lift; depth stays line-only |
| Active (pagination) | Fill flip transparent → #2F3030 + radius 0 → 50% + text flip #888 → #FFF |
| Active (category pill) | Fill flip #FFF → #000 + text flip #757D86 → #FFF, radius unchanged at 20px |
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)