MUSTIT DESIGN.md

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

1. 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.

2. 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.

3. 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.

4. 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.

5. 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).

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

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

Verified: 2026-06-03 Tier 1 sources: https://www.mustit.co.kr (homepage HTML + embedded CSS bundle, 1.2 MB), https://corp.mustit.co.kr/brand (CI/BI brand page HTML), https://corp.mustit.co.kr/lib/css/mustit-corp.css (corp brand CSS, 70 kB), https://static-ux.mustit.co.kr/ux/service/common/pretendard.css (font CSS) Tier 2 sources: getdesign.md/mustit — NOT LISTED (no data returned). refero — KR/TW brand, no result expected. Conflicts unresolved: The main shopping app uses #333 as the primary CTA (near-black), while the corp site uses #000/#1F1F2C for brand backgrounds; #D00000 is consistent across both as the accent/discount/action color.

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

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.