Design tokens (YAML front matter)

name: MUSTIT
colors:
  primary: '#d00000'
  brand: '#1f1f2c'
  canvas: '#ffffff'
  surface: '#fafafa'
  foreground: '#222222'
  muted: '#888888'
  on-primary: '#ffffff'
  accent-info: '#3083e4'
  accent-outlet: '#8c1e46'
  surface-mid: '#f5f5f5'
  hairline: '#e6e6e6'
  border-subtle: '#f0f0f0'
  disabled: '#cccccc'
typography:
  display:
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.35
    use: Section hero titles
  title-l:
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.33
    use: Modal, page headers
  title-m:
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.35
    use: Section headers
  title-s:
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.5
    use: Card group titles
  body-l:
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    use: Navigation links
  body-m:
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.47
    use: Button labels, product name
  body-s:
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.43
    use: Product price, form labels
  caption-l:
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.38
    use: Search keyword, chips
  caption-s:
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.33
    use: Metadata, sizes
  label:
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.45
    use: Badges, micro-copy
  fine:
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.6
    use: Legal, cart count
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  full: 9999px
components:
  button-primary:
    type: button
    backgroundColor: '#333333'
    textColor: '#ffffff'
    rounded: 4px
    height: 48px
    padding: 0 16px
    typography: 15px / 600
    use: Primary black CTA
  button-confirm:
    type: button
    backgroundColor: '#d00000'
    textColor: '#ffffff'
    border: '1px solid #d00000'
    rounded: 4px
    height: 48px
    typography: 18px / 500
    use: Red confirm CTA
  button-outline:
    type: button
    backgroundColor: '#ffffff'
    textColor: '#222222'
    border: '1px solid #333333'
    rounded: 4px
    height: 32px
    typography: 13px / 600
    use: Secondary action
  button-disabled:
    type: button
    backgroundColor: '#ffffff'
    textColor: '#888888'
    border: '1px solid #dddddd'
    rounded: 4px
    use: Disabled action
  tab:
    type: tab
    textColor: '#aaaaaa'
    typography: 16px / 500
    active: '2px solid #222222 bottom border, fg #222222, 16px / 700'
    use: Section tabs
  badge-outlet:
    type: badge
    backgroundColor: '#8c1e46'
    textColor: '#ffffff'
    rounded: 2px
    height: 22px
    padding: 0 8px
    typography: 11px / 700
    use: Outlet badge
  badge-info:
    type: badge
    textColor: '#3083e4'
    border: '1px solid #3083e4'
    rounded: 2px
    height: 24px
    typography: 12px / 400
    use: Info tag
  chip:
    type: badge
    border: '1px solid #cccccc'
    rounded: 17px
    height: 34px
    active: '1px solid #d00000'
    use: Filter chip
  input-search:
    type: input
    backgroundColor: '#ffffff'
    textColor: '#222222'
    rounded: 4px
    height: 40px
    padding: 0 12px
    typography: 15px / 600
    use: 'Search input, placeholder #aaaaaa'
omitted:
  - section: spacing
    reason: No verified values in current evidence.
fonts:
  roles:
    sans: Pretendard
    mono: Pretendard

MUSTIT

Korea’s leading luxury resale marketplace connecting 1,300+ luxury brands and millions of monthly shoppers through a mobile-first, discovery-driven experience.

Overview

Visual Theme & Atmosphere

MUSTIT projects a disciplined luxury-marketplace aesthetic: a near-black (#1F1F2C) and white canvas that recedes so individual product photography can dominate, accented by a single assertive brand red (#D00000) that marks every price-cut, badge, and primary CTA. The official brand philosophy — “Smart Luxury — Make the Best Discovery” — is made tangible through high-density list grids, tight typographic hierarchy in Pretendard, and a periscope-lens symbol (M SCOPE) that signals personal curation. Shadow use is deliberately restrained (max rgba(0,0,0,.05)), surfaces feel flat and minimal, and the red accent creates instant visual priority in a visually busy product grid.

Primary tasks

Check authenticity badges and discounts before a first luxury purchase
Find a specific brand item seen on someone else
Filter a large catalogue and compare sellers and price history
Browse curated shelves and find something unexpected
Add an item to the cart and see it confirmed

Brand Narrative

MUSTIT (머스트잇) launched in 2011 as Korea’s first dedicated luxury goods marketplace, solving a single friction: accessing authenticated global luxury brands without travelling abroad or paying full retail. The platform grew into a multi-sided market, adding seller tools, authentication guarantees, and eventually a price-comparison engine across 1,300+ brands and 3.7 million+ product listings (2022 figures).

The company’s second chapter, captured in the tagline “Smart Luxury — Make the Best Discovery,” shifts emphasis from access to personalised taste-curation. Where early MUSTIT competed on price and breadth, today it competes on intelligence: surfacing the right item from an enormous catalogue for each individual shopper. The M SCOPE periscope symbol — introduced in the 2020s rebrand — encodes this shift from “shopping” to “exploration.”

At its core, MUSTIT positions luxury not as an exclusive club but as an everyday enrichment layer. The brand promises that even a person who has never bought a designer item before can “minimise the risk of failure” through personalised guidance — democratising taste without cheapening aspiration.

Principles

Discovery over search. Every surface should surface the unexpected, not just confirm known intent. UI implication: Prioritise curated carousels and personalised shelf rows over pure search-result grids.
Trust before conversion. Authentication guarantees and seller ratings must be visible at the product card level, not buried in PDP fine print. UI implication: Show authenticity badges inline on thumbnails; never hide them behind a tap.
Speed as luxury. A slow page is a brand failure in a segment where impatience is typical. UI implication: Use WebP images, skeleton loading, and SSR; never show empty-state jumps on first paint.
Red means action. The brand red is a semantic signal, not a decoration. UI implication: Apply #D00000 only to discount labels, CTA buttons, and active states — never to illustrative or informational copy.
Mobile is the brand. The desktop experience is secondary. UI implication: Design all layouts at 375px width first; use fixed px font sizes; lock zoom.

Personas

Illustrative persona A — “명품 입문자” (Luxury Newcomer): A mid-20s professional buying their first designer piece. Price-sensitive but aspirational, anxious about authenticity. Scans price discounts and authentication badges before product names. Expects clear return/guarantee copy.

Illustrative persona B — “셀럽 팔로워” (Trend Follower): A late-20s social-media-active consumer chasing the same items worn by influencers or K-pop idols. Arrives via specific brand + item searches. Values speed of finding the item and peer review signals over price.

Illustrative persona C — “컬렉터” (Collector): A 35–50 connoisseur who tracks rare or discontinued items across multiple platforms. Filters heavily, compares price histories, and values seller reputation data. Low churn once trusted.

Illustrative persona D — “선물 구매자” (Gift Buyer): An occasional visitor purchasing for a birthday or anniversary. Needs curated “best-seller” shelving, category gift guides, and express delivery confidence. Highly reactive to the discount badge.

Colors

Brand Navy: #1F1F2C — official primary brand color (CI logotype, hero backgrounds, brand header)
Brand Red: #D00000 — primary action color; discount price labels, primary CTA button, cart badge, active filter, sale tag
Text Primary: #222222 — body text, product titles, prices, headings
Text Secondary: #888888 — captions, secondary metadata, placeholder
Text Tertiary: #555555 — supporting body copy, sub-descriptions
Text Disabled: #cccccc — disabled input labels, muted controls
Info Blue: #3083e4 — informational tags, delivery status, link text
Outlet Burgundy: #8c1e46 — outlet badge background
Background White: #ffffff — page and card backgrounds
Surface Light: #fafafa — list section backgrounds, hot deal section
Surface Mid: #f5f5f5 — divider fills, skeleton base
Border Default: #e6e6e6 — card borders, divider lines
Border Subtle: #f0f0f0 — tab underlines, light dividers

Typography

Primary typeface: Pretendard (all UI copy); secondary: SD Gothic Neo (legacy web); display: Archivo Expanded (brand marketing/corp headings).

Token	Size	Weight	Line-height	Usage
Display	28px	700	1.35	Section hero titles
Title L	24px	700	1.33	Modal, page headers
Title M	20px	700	1.35	Section headers
Title S	18px	600	1.5	Card group titles
Body L	16px	500	1.5	Navigation links
Body M	15px	600	1.47	Button labels, product name
Body S	14px	700	1.43	Product price, form labels
Caption L	13px	700	1.38	Search keyword, chips
Caption S	12px	700	1.33	Metadata, sizes
Label	11px	700	1.45	Badges, micro-copy
Fine	10px	400	1.6	Legal, cart count

Layout

MUSTIT is built mobile-first as a Nuxt.js SPA served from m.web.mustit.co.kr. The standard content gutter is 16px on each side. Product grids use a 2-column layout with an ~8px gap between cards. Sections are separated by a 10px gray divider strip (#f5f5f5) or a 1px border line (#f0f0f0). The bottom fixed action bar (buy / cart) sits above the native safe-area inset. Maximum content width on desktop is 360–420px, centered with a white card. Sticky top navigation height is 44–56px.

Responsive Behavior

The primary product is a mobile web app (max-width ~360–428px). The viewport is locked: user-scalable=no, initial-scale=1.0. At wider breakpoints the layout centers in a white card against a neutral background. The product grid collapses from a 2-column to a 1-column detail view on PDP. Images use Cloudflare /_dims_/format/webp/autorotate/on for adaptive delivery. Font sizes do not scale with viewport — they are fixed px values throughout.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

spacing: [8,10,12,16]

Elevation & Depth

Surfaces are intentionally flat. Elevation is expressed through subtle shadows, not strong drop shadows:

Level 0 — flat (no shadow): content sections, list items
Level 1 — box-shadow: 0 2px 4px 0 rgba(0,0,0,.03): product cards, filter chips
Level 2 — box-shadow: 0 2px 8px 0 rgba(0,0,0,.05): bottom sheets, filter buttons
Overlay — background: rgba(0,0,0,.5): modal/sheet backdrop
Dark scrim — rgba(0,0,0,.03) pseudo-overlay on product thumbnails

Bottom sheets use border-radius: 15px 15px 0 0; modals/alerts use border-radius: 8px.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

shadow.level1: 0 2px 4px 0 rgba(0,0,0,.03)
shadow.level2: 0 2px 8px 0 rgba(0,0,0,.05)

Motion & Easing

Token	Duration	Easing	Usage
Micro	150ms	`ease-out`	Icon rotation (dropdown arrow), tap highlight
Fast	200ms	`ease`	Slide-up toast entry, top/bottom position change
Standard	250ms	`ease-out`	Fade in/out, bottom-sheet slide up/down
Medium	400ms	`cubic-bezier(.25,.46,.45,.94)`	Sheet slide + opacity composite
Spring	400ms	`cubic-bezier(.47,1.64,.41,.8)`	Toast bounce-in
Slow	500ms	`ease`	Pagination indicator slide, banner swipe
Wish	400ms	`ease-in`	Wishlist heart animation (on/off)

Rules:

Enter animations use ease-out; exit animations use ease-in
Never animate product image loads — swap instantly to avoid layout shift
Sheet overlays fade backdrop at 250ms separate from content slide
All interaction animations ≤ 500ms total; prefer ≤ 250ms for taps

Components

Button

Primary (Black)

Background: #333333
Text: #ffffff
Radius: 4px
Height: 48px
Font: 15px / 600
Padding: 0 16px

Primary (Red / Confirm)

Background: #D00000
Text: #ffffff
Border: 1px solid #D00000
Radius: 4px
Height: 48px
Font: 18px / 500

Outline (Secondary)

Background: #ffffff
Text: #222222
Border: 1px solid #333333
Radius: 4px
Height: 32px
Font: 13px / 600

Disabled

Background: #ffffff
Text: #888888
Border: 1px solid #dddddd
Radius: 4px

Tab

Active

Text: #222222
Font: 16px / 700
Border-bottom: 2px solid #222222

Inactive

Text: #aaaaaa
Font: 16px / 500

Badge

Outlet

Background: #8c1e46
Text: #ffffff
Radius: 2px
Height: 22px
Padding: 0 8px
Font: 11px / 700

Info Tag

Text: #3083e4
Border: 1px solid #3083e4
Radius: 2px
Height: 24px
Font: 12px / 400

Filter Chip

Default

Border: 1px solid #cccccc
Radius: 17px
Height: 34px

Active

Border: 1px solid #D00000
Radius: 17px

Search Input

Default

Background: #ffffff
Text: #222222
Radius: 4px
Height: 40px
Padding: 0 12px
Font: 15px / 600

Placeholder

Text: #aaaaaa
Font: 15px / 400

States

Empty — search no results: White background, centered illustration, heading “검색 결과가 없어요” in #222, subtitle in #888; height fills viewport minus nav
Loading — product grid: 2-column skeleton grid; each card shows a #f5f5f5 rectangle (image placeholder) and two #f5f5f5 text lines at 14px and 12px height; no shimmer animation measured
Error — network failure: Toast-style slide-up notification in #333 background, white text, 0.4s cubic-bezier spring entry
Error — sold-out PDP: Primary CTA replaced with a disabled-styled gray button (#ddd border, #888 text); “품절” (sold out) label in #D00000
Success — add to cart: Slide-up toast message confirms addition; green check in #12cf35; auto-dismiss at 2–3 s
Skeleton — product card: border-radius: 0 image block + two placeholder lines in #f5f5f5 rendered before data arrives
Disabled — form field: background: #fafafa, border: 1px solid #f0f0f0, label text #ccc
Active filter chip: border: 1px solid #D00000; badge counter circle background: #D00000, color: #fff, border-radius: 9px

Do’s and Don’ts

Do

Use #D00000 exclusively for price discounts, sale badges, and primary conversion CTAs
Keep all button radius at 4px for UI elements; use 17px+ only for pill chips/filter controls
Use Pretendard weight 700 for all prices and product names to create scan hierarchy
Keep section backgrounds alternating between #ffffff and #fafafa for visual rhythm
Apply transition: all 0.2s ease for interactive micro-feedback (hover/active states)
Use the 16px horizontal gutter consistently across all list and card views

Don’t

Don’t mix the brand red #D00000 with decorative elements — reserve it for urgency/action signals
Don’t use more than two typeface families in any single view (Pretendard + one brand face)
Don’t apply heavy shadows (rgba >0.1) — the luxury positioning demands minimal depth cues
Don’t round product image containers — keep them square with sharp corners to frame merchandise
Don’t use the outlet burgundy #8c1e46 outside of the Outlet category badge context

Voice & Tone

Three adjectives: Direct, Discovery-forward, Confident

Do	Don’t
Use active, action-oriented verbs (“발견하세요”, “탐험하세요”)	Use passive constructions or vague luxury puffery
Keep copy concise — product names and discount percentages speak	Over-explain or add unnecessary adjectives
Lead with the deal / discovery hook	Lead with brand philosophy in transactional flows
Mix Korean and brand/product names naturally	Force awkward Konglish or all-Korean transliterations

Illustrative voice samples:

Illustrative: “세상 모든 럭셔리 취향을 탐험하세요.” — broad, aspirational, discovery-forward
Illustrative: “정품 200% 보장. 오늘 핫딜 특가를 놓치지 마세요.” — direct, urgency-led, trust-anchored
Illustrative: “1,300개 해외명품 브랜드. 매일 달라지는 특가.” — data-led, no fluff, scan-friendly

Agent Prompt Guide

When generating MUSTIT-style UI:

Mobile-first, max-width 428px, 16px side padding
Color: #222 body, #D00000 price/CTA, #888 secondary, #fafafa section background
Font: Pretendard; body 14px/700 for prices, 13px/700 for captions, 15px/600 for buttons
Buttons: bg #333, color #fff, radius 4px, height 48px — or red #D00000 for confirm actions
Cards: no radius, white bg, box-shadow: 0 2px 4px 0 rgba(0,0,0,.03), 1px #f0f0f0 border
Tabs: border-bottom: 2px solid #222 active, color: #aaa inactive
Chips: border-radius: 17px, border: 1px solid #ccc default, #D00000 active
No heavy gradients in product areas; hotdeal sections may use deep purple-to-teal gradients
Keep all decorative shadow under rgba(0,0,0,.05)

Governance

Known Gaps

Contrast, button-disabled. Text #888888 on #ffffff measures 3.54:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.

MUSTIT

Palette

At a glance

Design System · MUSTIT

MUSTIT

Overview

Visual Theme & Atmosphere

Primary tasks

Brand Narrative

Principles

Personas

Colors

Typography

Layout

Responsive Behavior

Values kept in prose

Elevation & Depth

Values kept in prose

Motion & Easing

Components

Button

Tab

Badge

Filter Chip

Search Input

States

Do’s and Don’ts

Do

Don’t

Voice & Tone

Agent Prompt Guide

Governance

Known Gaps

Pinkoi

Uniqlo (ユニクロ)

Fastcampus

PayPay (ペイペイ)

kintone (キントーン)

MUJI (無印良品)

Palette

At a glance

Design System · MUSTIT

MUSTIT

Overview

Visual Theme & Atmosphere

Primary tasks

Brand Narrative

Principles

Personas

Colors

Typography

Layout

Responsive Behavior

Values kept in prose

Elevation & Depth

Values kept in prose

Motion & Easing

Components

Button

Tab

Badge

Filter Chip

Search Input

States

Do’s and Don’ts

Do

Don’t

Voice & Tone

Agent Prompt Guide

Governance

Known Gaps

More like MUSTIT

Pinkoi

Uniqlo (ユニクロ)

Fastcampus

PayPay (ペイペイ)

kintone (キントーン)

MUJI (無印良品)