KREAM is Korea's limited-edition resale marketplace — a Naver-backed exchange where sneaker drops, luxury rotation, and hype-watch trading happen on a chrome that is, deliberately, almost without color. The home surface reads like a luxury catalog rendered in software: a stack of 1188×475 banner cards on #f5f5f5, each with a 16px corner radius, no shadows, no gradients, no chrome decoration. The page lets the product photography and the offer copy do all the persuasion; the system itself stays mute. Where Musinsa is street-utility and 29CM is editorial, KREAM is the trading floor — quiet, fast-scrolling, and ranked.
The defining typographic move is Pretendard Variable running the whole stack — body at 16px/400 on #222, display H1 at 32px/700, the homepage search query input itself at 24px/700 as if the user's keyword is the headline. Chrome controls drop down to 13px (chips, ghost buttons), and outside that single jump from 32px → 24px → 16px → 13px there is no other scale. The hierarchy is intentionally flat: hero banner → tabs (상품/스타일/프로필) → filter chips (배송·카테고리·성별·색상·브랜드·사이즈·가격대) → product grid.
Color is reduced to a grayscale ramp formalized as ~50 CSS custom properties (--greyscale-dark-* and --greyscale-white-alpha-*, observed at runtime on :root): a few inks (#000, #222, #404040, #4e4e4e, #616161, #787878, #909090, #a7a7a7, #bbb, #d3d3d3, #e6e6e6, #ebebeb, #f0f0f0, #f4f4f4, #fafafa), their alpha-overlay siblings on white and on black, and white. There is no brand red, no brand blue, no accent yellow in the chrome. A single teal — rgb(17, 161, 151) — surfaces twice on the home page, used as a price-watch / promo accent. The Swiper carousel library leaves #007aff as a CSS theme variable but it is not used in product chrome. The brand color is the grayscale system itself, indexed against pure white.
Radius is a four-step scale and each step has a job: 16px = banner card (hero / merchandising tile), 30px = pill chip (filter toggle), 8px = pill input or ghost button (auth & fallback chrome), 6px = list-row card and category quickrow button. State chrome inherits the base radius and changes only ink and fill — never radius — so the system reads as one shape language at every density.
Key Characteristics:
#ffffff page background, #222 as primary ink (not #000 — #000 is reserved for display heads and the H1 token):root under --greyscale-dark-* and --greyscale-white-alpha-* — a formal grayscale token systemrgb(17, 161, 151) teal, used sparingly for price-watch signaling#f4f4f4 — the workhorse navigation primitive#222 either way (weight, not hue, signals selection)#222222 — body text, card titles, default control color (observed 4,763 times on home — by far the dominant chroma)#000000 — H1 display only, never on body#ffffff — global canvas#f5f5f5 — hero / merchandising tile (rgb(245, 245, 245))#f4f4f4 — filter chip default, "chip-fill" CSS var token --greyscale-dark-4#fafafa — sub-card / quickrow row (--greyscale-dark-2)#f0f0f0 — divider (--greyscale-dark-6)#ebebeb — card outline (--greyscale-dark-8)#d3d3d3 — input border, separator (--greyscale-dark-20):root)| Token name | Hex |
|---|---|
--Greyscale-Dark-100 | #000 |
--greyscale-dark-90-dark | #222 |
--Greyscale-Dark-75 | #404040 |
--greyscale-dark-80-grey-dark | #333 |
--greyscale-dark-70-dark-80 | #4e4e4e |
--Greyscale-Dark-60 | #616161 |
--Greyscale-Dark-50 | #787878 |
--greyscale-dark-40-dark-50 | #909090 |
--greyscale-dark-35-dark-40 | #a7a7a7 |
--greyscale-dark-30-dark-30-grey-medium | #bbb |
--greyscale-dark-20-border-medium-grey | #d3d3d3 |
--Greyscale-Dark-10 | #e6e6e6 |
--greyscale-dark-8-border-light-grey | #ebebeb |
--greyscale-dark-6-border-extra-light-grey | #f0f0f0 |
--greyscale-dark-4-dark-5-fill-light-grey-grey-light-brand-ect | #f4f4f4 |
--greyscale-dark-2-grey-extra-light | #fafafa |
--greyscale-dark-0-white | #fff |
Alpha siblings on black (--greyscale-dark-alpha-*) at 6/8/10/20/30/35/40/50/60/70/75/80/90 and on white (--greyscale-white-alpha-*) at 2/4/6/8/10/20/30/35/40/50/60/70/75/80/90 are also exposed — used for overlays and disabled states.
rgb(17, 161, 151) — observed twice on home, used for price-movement / watchlist signal#007aff — exposed as --swiper-theme-color but not used in product chrome (carousel library default; informational only)rgba(0, 0, 0, 0.533) — caption ink (#1)rgba(0, 0, 0, 0.44) — secondary captionrgba(0, 0, 0, 0.345) — disabled-leaning inkrgba(34, 34, 34, 0.5) — subtitle ink on grayscale fillrgba(255, 255, 255, 0.804) — overlay-on-image labelPretendard Variable (primary) with system fallback stack:
"Pretendard Variable", Pretendard, -apple-system, system-ui,
Roboto, "Helvetica Neue", "Segoe UI",
"Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic",
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif
| Role | Size | Weight | Color | Use |
|---|---|---|---|---|
| Display / H1 | 32px | 700 | #000 | Page title |
| Search query (input) | 24px | 700 | #222 | The keyword the user typed |
| Tab label (active) | 16px | 700 | #222 | 상품 / 스타일 / 프로필 |
| Tab label (default) | 16px | 400 | #222 | Inactive tab |
| Body | 16px | 400 | #222 | Default copy |
| Card title | 16px | 700 | #222 | Banner card heading |
| Shortcut row | 16px | 400 | #222 | Popular keyword shortcut on #fafafa |
| Chip | 13px | 400 | #222 | Filter chip on #f4f4f4 |
| Ghost button | 13px | 300 | #000 | 404 fallback "홈으로 가기" |
KREAM uses weight, not size, to signal active state across tabs and toggle controls. Body and active-tab share 16px; only weight changes (400 → 700). This is the same pattern Apple uses on iOS tab bars and is consistent across KREAM's search, exhibition, and home tab strips.
Default
#f4f4f4#22230px0 12px (text-only chip, 30px height)13px / 400 / Pretendard Variable30pxActive (selected count > 0)
사이즈3)Default
#ffffff#2221px solid (observed light grey, ~#ebebeb)6px30px13px / 400Default
#fafafa#2226px48px16px / 400Default
#f5f5f5#222 (overlay caption)16px0 (image-led, copy positioned absolutely)1188 × 475 (desktop)Default
transparent#222024px / 700 — the typed keyword is rendered as if it were the page headline/searchDefault
transparent#0001px solid rgba(0, 0, 0, 0.6)8px13px / 30036pxActive tab
transparent#2222px solid #222 (observed pattern on 상품 / 스타일 / 프로필)016px / 70044pxDefault tab
transparent#2222px solid transparent16px / 400Weight, not color, signals selection.
Default
#ffffff130px (CSS var --global-header-height)HOME / STYLE / SHOP rendered as 16px text links in #222/search route (no inline search input in the page header on the home view)Verified: 2026-05-14 Tier 1 sources:
https://kream.co.kr/ — live CDP Runtime.evaluate + getComputedStyle at 2026-05-14T10:55:53Z; 40 raw component samples, 50+ --greyscale-* CSS custom properties extracted from :roothttps://kream.co.kr/search?keyword=nike — live CDP capture; 43 raw component samples covering filter chips, category pills, shortcut rows, search input, tab striphttps://kream.co.kr/shop (404 fallback) — captured ghost-button chromereferences/kream/assets/_reference/tokens.json, structure.json, fonts.json, .live-inspect-proof.jsonTier 2 sources:
getdesign.md/kream — no record (verified 2026-05-14)styles.refero.design/?q=kream — no record (verified 2026-05-14)Conflicts unresolved: none — Tier 1 live inspection is sole source; Tier 2 directories have no KREAM coverage (consistent with the KR-10 batch finding that 3rd-party EN-tooling indexes systematically miss Korean brands).
/fafafa listThe system reserves height as the signal of card-class importance: 475 = merchandising hero, 238 = product trade card, 48 = navigational shortcut, 30 = filter primitive.
#222 (search, profile, wishlist, cart) — not observed at depth in this pass#f5f5f5 banner card background — product cut-out, neutral lighting, no editorial overlayswiperjs ease curvesKREAM's chrome speaks like a trading terminal that wishes it were a luxury concierge: specific, ranked, time-boxed. Copy in banner cards leads with a fact (price-move %, drop window, coupon size), then frames the offer as a window the reader is currently inside ("5월 브랜드 위크 ~33% 할인", "오늘 구매 내일 도착"). Headlines are short and definite — they don't ask, they announce. Numbers are protagonists: percent-off, days remaining, point caps, brand-week names.
The brand uses Korean colloquial + English brand names without quote marks. "Top 100 Trending Items 지금 그의 위시리스트!" lives next to "주차별 드롭 리스트 이번 주, 지난 주, 그 전 주까지". Code-switching is treated as native to the audience (sneakerheads who already think bilingually about brand names).
What KREAM does not do: it does not soften with emoji, does not editorialize the product, does not narrate a backstory, does not apologize for prices. The voice is the marketplace's posture — "we list, you decide, the clock is ticking."
(Voice characterization above is OmD-original framing — no verbatim KREAM marketing copy is reproduced.)
:root, namespaced --greyscale-dark-* (solid greys) and --greyscale-dark-alpha-* / --greyscale-white-alpha-* (alpha overlays). The naming convention encodes both numeric scale (-0 / -2 / -4 / -6 / -8 / -10 / -20 / -30 / -40 …) and semantic role (-fill-light-grey-grey-light-brand-ect, -border-extra-light-grey) — the system was clearly designed for both designer and developer consumption.design.kream.co.kr, kream.design, or kream.co.kr/design. KREAM has no public DS hub (consistent with its parent Naver's mixed-public pattern; Naver Connect/Snow have docs, KREAM does not).--swiper-theme-color: #007aff).Three voice adjectives (OmD-original characterization, drawn from observed surface behavior):
| Do | Don't |
|---|---|
Lead with the number (~50% 쿠폰, ~33% 할인, 3% 적립) | Lead with an adjective (특별한 할인) |
Time-box the offer (이번 주, 5월 브랜드 위크, 오늘 구매 내일 도착) | Leave the window open-ended |
| Treat English brand names as native vocabulary, no quote marks | Italicize or quote "Nike" |
Rank the list (Top 100, 주차별, 급상승) | Float ungrouped items |
| Use sentence-case Korean with English brand caps where natural | Force ALL-CAPS Korean or fully title-cased English |
"이번 주 ~57% 드롭, 3일 남았어요." — category landing headline; leads with number, time-boxes the offer
"Air Max 95 — 시세 +12.3% 이번 주" — price-watch tile; English brand name unquoted, % movement signed
"Drop List · 5월 2주차 — 12 brands" — list header; ranked window + count
KREAM ("Korea REAction to Market") launched in 2020 as a Naver Financial / Snow Corp. subsidiary and has grown into Korea's dominant limited-edition resale platform — sneakers first, then luxury watches, bags, streetwear, collectibles, and trading cards. It sits in the same market layer as StockX (US) and POIZON (CN) and was, by 2023, the largest such platform in Korea by GMV. (Publicly reported figures and corporate filings; see references-cited below.)
The brand thesis is operational, not emotional: KREAM positions itself as the authentication-and-clearing infrastructure for hype goods. Every transaction passes through KREAM's appraisal center; the platform's chrome reflects that infrastructure posture — fast, ranked, time-stamped, intentionally undecorated. Where competitor StockX leans on a stock-ticker metaphor, KREAM leans on a Naver-style portal density: a lot of merchandising tiles, a lot of categories, a lot of windows-into-windows. The design language is the platform's promise: we move volume cleanly and we authenticate everything before it ships.
Strategically, KREAM matters because it is one of the cleanest examples of a Korean platform that competes by operational trust rather than brand emotion. The chrome's refusal of color, of shadow, of editorial flourish is the trust signal made visual.
(No founder/executive quote available in public English-language sources at the level of fidelity OmD requires for §11 attribution; this section is illustrative based on publicly-reported corporate facts.)
Number-first headlines. UI implication: Banner card titles lead with a quantity (percent, days, points, brand-week name). Reserve the largest weight for the number, not the noun.
Time-boxing is the persuasion.
UI implication: Every promotional surface declares a window. Build a reusable "window tag" pattern (이번 주, ~5/19, 7일 한정) — it's the recurring chrome element across home banners.
Weight signals state; hue stays grayscale.
UI implication: Active tab = 700, default = 400, both on #222. Selected chip = counter trailing the label, no fill change. Don't introduce a "selected color" — the system is designed to never need one.
Radius encodes card class. UI implication: 16px = merchandising, 6px = trading row, 30px = filter primitive, 8px = recovery / fallback. Never blend; never use a radius unmapped to a class.
Photography carries color.
UI implication: Chrome stays grayscale; product photography against #f5f5f5 provides all chromatic information. Don't introduce branded accent fills — they will fight the product image.
(Illustrative archetypes — sketched from observable site behavior, public KREAM marketing categories, and reported user demographics. Not from KREAM-published research.)
| State | Treatment |
|---|---|
| Empty (no results) | #222 ink message centered; ghost button 8px radius 13px/300 for recovery action |
| Loading (initial) | No skeleton observed in this pass — assume #fafafa block placeholders matching final card height (475 / 238 / 48) |
| Loading (subsequent / scroll) | Swiper carousel handles inline; product grid likely paginates via intersection observer |
| Error (404) | Ghost button "홈으로 가기" — 36px height, 8px radius, 1px solid rgba(0,0,0,0.6), 13px/300 — the apology is small and the action is plain |
| Error (network / auth) | Not captured in this pass — likely the same ghost button pattern with route-specific copy |
| Success (transaction) | Not captured (auth-gated) — typical pattern would be a centered tile with the ranked number ("거래 체결가 ₩483,000") and a window tag |
| Skeleton | #fafafa fill on the card-class-shaped rectangle, no shimmer observed |
| Disabled | Inferred from alpha tokens — text on --greyscale-dark-alpha-30 (#00000045), control fill keeps #f4f4f4, no opacity change on the chip itself |
States lean on the grayscale ramp, not on color. There is no "error red" or "success green" in the home chrome — those signals come from copy and counters, not fills.
Duration scale (inferred from Swiper defaults + observed carousel behavior)
fast: 150-200ms — chip selection counter updatebase: 300ms — Swiper slide (default)slow: 500-600ms — banner card cross-fade on auto-rotateEasing
ease-out for entering elements (banner card swap)ease-in-out for Swiper slide (library default)Motion rules
The brand's motion logic mirrors its voice: minimal, factual, time-boxed. Movement happens because the carousel needs to rotate, not because the chrome wants to perform.
References cited (Tier 1 + supporting):
https://kream.co.kr/ (live CDP capture, 2026-05-14)https://kream.co.kr/search?keyword=nike (live CDP capture, 2026-05-14)https://kream.co.kr/shop (ghost-button chrome)references/kream/assets/_reference/tokens.json — distilled token mapreferences/kream/assets/_reference/structure.json — surface IA observationreferences/kream/assets/_reference/fonts.json — type stack & scalereferences/kream/assets/_reference/.live-inspect-proof.json — 13 raw_samples + method logTier 2 (verified empty 2026-05-14):
getdesign.md/kream — no recordstyles.refero.design/?q=kream — no matchKREAM is Korea's limited-edition resale marketplace — a Naver-backed exchange where sneaker drops, luxury rotation, and hype-watch trading happen on a chrome that is, deliberately, almost without color. The home surface reads like a luxury catalog rendered in software: a stack of 1188×475 banner cards on #f5f5f5, each with a 16px corner radius, no shadows,
Accent
Neutrals
Type Scale
Rendered in system-ui to clearly show scale & weight.
Fonts
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | compact | |
| Base unit | 4px | |
| Section gap | 32px | |
| Card padding | 16px | |
| Element gap | 12px |
Border Radius
| Element | Value | Preview |
|---|---|---|
| buttons | 16px | |
| inputs | 16px | |
| cards | 16px | |
| dialogs | 16px | |
| badges | 8px |
Elevation
Filter chip
Category pill (quick-row)
Hero / merchandising banner card
Search input (homepage hero)
Ghost button (fallback / secondary)
Tab strip