제페토 DESIGN.md

Design System Inspiration of ZEPETO

Overview

Visual Theme & Atmosphere

ZEPETO (제페토) is a 3D-avatar social platform run by NAVER Z Corp. Its own About page describes it as a place where anyone can express themselves creatively and connect with users around the world: "제페토는 3D 아바타 기반 소셜 플랫폼으로, 누구나 쉽게 창의적으로 자신을 표현하고 전 세계 사용자들과 소통할 수 있는 기회를 제공하고자 합니다." NAVER Z's corporate site puts the ambition in one line — "현실의 한계를 넘어 상상 이상의 세상으로", beyond the limits of reality into a world past imagination. ZEPETO is two products under one name. The web lobby at web.zepeto.me lets people browse and enter worlds. ZEPETO Studio lets creators make items, Unity-built worlds and live content and sell them. Studio's counters read 6,800만 item sales, 230만 creators and 3억 ZEPETO members; a September 2025 post on ZEPETO's blog speaks of more than 4억 members. The platform keeps evolving: in 2026 the blog introduced ZEPETO's first AI streamer, 나미, and then two more, 제야 and 김여주.

The two products look different, and the captures show it. The web lobby is quiet and monochrome: a white header with a dark #292930 로그인 button and a light-grey #f5f5f6 ZEM 구매 button, 8px-radius controls, and a grid of 12px-radius world tiles whose thumbnails supply the colour. Studio is where the brand colour lives. Its heroes carry 64px / 800 white headlines ("상상하는 모든 것. 제페토 스튜디오에서.") and a white 68px pill with a violet #5c46ff label and a soft glow. Its service cards end in violet #5c46ff pill actions, and its guide cards use violet links on #f8f8fa. Text runs in #292930, descriptions in #5c5c61, and sections alternate between white and #f8f8fa.

Neither surface loads a web font. The web lobby declares the platform UI stack (ui-sans-serif, system-ui, -apple-system, …) and Studio declares -apple-system, "system-ui", AppleSDGothicNeo, …, so type renders in each viewer's system face, and hierarchy comes from weight: 800 and 700 for headlines, 500 for navigation and actions, 400 for reading.

Key Characteristics:

• One brand violet, #5c46ff: Studio's filled actions, the hero pill label and guide links
• A monochrome web lobby: #292930 로그인, #f5f5f6 utility buttons, world thumbnails for colour
• 64px / 800 white hero headlines on Studio; 700 for every other headline
• Two geometries: 8px utility buttons and 12px world tiles; 16px cards and 24px / 34px pills on Studio
• Mostly flat, with three soft shadows: the hero pill's glow, a light card shadow, the dropdown menu
• System UI type throughout; no brand typeface is served
• Studio sections alternate white and #f8f8fa

Primary tasks

• Browse worlds in the web lobby and enter one (입장하기)
• Top up ZEM from the web lobby header
• Learn how to make items, worlds and live content in ZEPETO Studio
• Start as a creator (시작하기) and read the world development guides

Brand Narrative

ZEPETO's About page defines the product in a sentence: a 3D-avatar social platform that gives anyone an easy, creative way to express themselves and to connect with people around the world. Every page opened carries "NAVER Z Corp. All rights reserved.", and NAVER Z's own site frames the company's work as going "beyond the limits of reality" and making "새로운 경험" for everyone's enjoyment.

The platform is built around a creator economy. ZEPETO Studio says creators can make everything in the ZEPETO world — fashion items, worlds and live broadcasts — and earn from them. Worlds are built with Unity, the world-building APIs are free, and anyone with a ZEPETO account can join Studio in three steps: sign up, create, and pass review. Studio's counters show 6,800만 item sales, 230만 creators and 3억 members; the world page says millions of users visit ZEPETO worlds every day.

The blog shows where the platform is heading. A September 2025 post describes ZEPETO as a global avatar platform with more than 4억 members, in a collaboration marking the Porsche Carrera GT's 25th anniversary. In July 2025 ZEPETO took billboards in New York's Times Square, and in November 2025 it opened a Hall of Fame for creators. In 2026 it debuted its first official AI streamer, 나미, on ZEPETO LIVE, and then added two more, 제야 and 김여주.

The design follows the split. The web lobby stays neutral so avatars and worlds supply the colour; Studio turns violet to sell creation itself.

Principles

1. Avatars and worlds carry the colour. UI implication: keep the lobby's chrome white and grey; let thumbnails lead.
2. One brand hue for creation. UI implication: #5c46ff marks Studio's actions and links, nothing else.
3. Creation should feel open. Studio promises free tools and a three-step start. UI implication: large pills, generous card padding, plain guide links.
4. Weight, not typeface. UI implication: hierarchy from 800 / 700 / 500 / 400 on the system face.
5. Soft depth, used sparingly. UI implication: one glow on the hero pill, a light card shadow, a menu shadow; everything else flat. (An editorial reading of the captured pages, not a ZEPETO statement.)

Personas

Personas below are fictional archetypes informed by publicly observable ZEPETO user segments (avatar and social users, world visitors, item and world creators), not individual people.

민서, 17, 서울. Styles her avatar daily, hangs out in worlds with friends and watches live shows. Tops up ZEM now and then for new outfits.

Diego, 22, São Paulo. A hobbyist 3D creator who sells avatar items through ZEPETO Studio and follows the Studio guides closely.

지훈, 28, 경기. A small-team world builder who uses Unity and the world guides to publish and monetise worlds.

Colors

Every token below was read by the deterministic collector on 2026-09-30 from web.zepeto.me/ko, studio.zepeto.me/ko and the Studio world page.

Primary

• ZEPETO Violet (#5c46ff): The fill of the three 더 알아보기 actions on Studio home (200 × 48, 24px radius), the label colour of the white hero pills (시작하기, 월드 만들기), and the colour of the 더 알아보기 links on the world page's guide cards. It is the primary because it is the only saturated action fill on any captured product surface. The web lobby's own main action, 로그인, is dark #292930; the lobby is otherwise monochrome, and violet appears only on Studio.
• On Primary (#ffffff): Labels on the violet actions.

Text

• Ink (#292930): Studio headings, card titles and body text; also the fill of the web lobby's 로그인 and the label of 내 콘텐츠.
• Web Ink (#000008): World names and body text in the web lobby.
• Body Grey (#5c5c61): Descriptions on Studio's service, feature and guide cards.
• Muted (#47474d): The 입장하기 label on the web lobby's hero banners.
• Black (#000000): The ZEM 구매 label and header icon buttons in the web lobby.

Surface

• Canvas (#ffffff): Pages set no body fill and render on the browser's white; white is set explicitly on Studio's service cards, the hero pills, 내 콘텐츠 and the dropdown menu.
• Surface (#f5f5f6): The ZEM 구매 and 입장하기 buttons.
• Surface Alt (#f8f8fa): Studio's alternating sections, the guide cards and the selected dropdown option; at 50% it is the ground behind world thumbnails.
• Hairline (#e0e0e1): The 1px border of the language dropdown trigger.

Translucent values (not tokens)

• The hero carousel arrows are rgba(199, 199, 201, 0.5), and the Studio navigation is white at 60% (rgba(255, 255, 255, 0.6)) at rest. Both are recorded on their components.

Brand assets, not tokens

• No logo colour was measured. The June record's decorative magenta was not rendered on any captured page and is no longer listed.

Typography

Font Family

• Live surface use: the viewer's system UI face. web.zepeto.me declares ui-sans-serif, system-ui, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif plus emoji fallbacks (500 observed uses); Studio declares -apple-system, "system-ui", AppleSDGothicNeo, "Helvetica Neue", "Noto Sans KR", Helvetica, sans-serif (216 observed uses). No font file is loaded for either; the collector classes both as system faces.
• Declared only (no visible use): Noto Sans KR, Noto Sans JP and Noto Sans SC — declared, 0 observed uses, no file loaded.
• Excluded: swiper-icons, the Swiper carousel library's inline icon font.
• No brand typeface: none of the pages opened names or serves a ZEPETO typeface, and none is claimed.

Hierarchy

Principles

• Weight carries the hierarchy: 800 for the hero, 700 for every other headline, 500 for navigation and actions, 400 for reading.
• Big, short headlines: Studio heroes set 64px on a 70px line.
• System faces by declaration: both surfaces ask for the platform face rather than a brand font; the brand lives in violet and in the avatars.

Layout

Spacing System

• Utility buttons: 10px vertical, 16px horizontal
• 입장하기: 14px vertical, 34px horizontal
• Hero pills: 34px horizontal
• Service cards: 42px top, 32px sides and foot
• Guide cards: 36px, with 64px at the foot
• Dropdown options: 8px vertical, 24px horizontal

Grid & Container

• The web lobby stacks a white header (로그인, ZEM 구매), a hero carousel of world banners with 입장하기, and a grid of 152px world tiles.
• Studio pages open on a dark full-width hero with a 64px / 800 white headline and a white pill, then alternate white and #f8f8fa sections: three 320px service or feature cards, creator highlights, three guide cards, and a closing call to start.

Whitespace Philosophy

• Content leads in the lobby: world thumbnails carry the colour; the chrome stays grey and white.
• Studio breathes: 16px-radius cards with 32–42px padding and large headlines.

Border Radius Scale

• 0px: text blocks and links
• 8px: web buttons, 내 콘텐츠, the dropdown
• 12px: world thumbnails
• 16px: Studio cards
• 24px: violet Studio actions
• 34px: hero pills
• 50%: carousel arrows

Responsive Behavior

Breakpoints

Only the 1440-pixel desktop viewport was captured; no breakpoint was measured.

Touch Targets

• 로그인, ZEM 구매, 내 콘텐츠: 40px tall
• 입장하기: 56px; hero pills: 68px; violet actions: 48px
• Studio navigation items: 50px; carousel arrows: 36 × 36

Collapsing Strategy

• Not measured.

Image Behavior

• World thumbnails are square with a 12px radius; feature cards place an image above the text.

Elevation & Depth

Shadow Philosophy: shadows are soft and rare. The strongest one belongs to the hero pill, the action Studio most wants pressed.

Values kept in prose

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

• shadow.hero-pill: rgba(0, 0, 0, 0.2) 0px 0px 20px 0px
• shadow.card: rgba(0, 0, 0, 0.05) 0px 2px 12px 0px
• shadow.menu: rgba(0, 0, 0, 0.08) 0px 2px 6px 0px

Motion & Easing

The collector reads computed style, not animation, so no duration or easing is measured. Studio's hero headline and pill carry a fade-up class, which shows entrance motion exists without timing it. Treat motion as unspecified rather than borrowing values, and honour prefers-reduced-motion in any build.

Components

Buttons

Studio action (primary)

• Background: #5c46ff
• Text: #ffffff
• Radius: 24px
• Padding: 0px (fixed 200px width)
• Height: 48px
• Font: 17px / 500 / 48px, -apple-system stack
• States: rest on three instances; no pointer frame
• Use: 더 알아보기 under the 아이템, 월드 and 라이브 cards on Studio home

Hero pill

• Background: #ffffff
• Text: #5c46ff
• Radius: 34px
• Padding: 0px 34px
• Height: 68px
• Font: 22px / 700 / 68px, -apple-system stack
• Shadow: rgba(0, 0, 0, 0.2) 0px 0px 20px 0px
• States: rest only
• Use: 시작하기 (Studio home) and 월드 만들기 (world page) over the dark heroes

Web 로그인

• Background: #292930
• Text: #ffffff
• Radius: 8px
• Padding: 10px 16px
• Height: 40px
• Font: 15px / 500 / 20px, ui-sans-serif stack
• States: rest only
• Use: web lobby header (read, never followed)

ZEM 구매

• Background: #f5f5f6
• Text: #000000
• Radius: 8px
• Padding: 10px 16px
• Height: 40px
• Font: 16px / 400 / 18.4px, ui-sans-serif stack
• States: rest only
• Use: web lobby header, beside 로그인

입장하기

• Background: #f5f5f6
• Text: #47474d
• Radius: 8px
• Padding: 14px 34px
• Height: 56px
• Font: 17px / 500 / 22px, ui-sans-serif stack
• States: rest only
• Use: the three hero world banners of the web lobby

내 콘텐츠

• Background: #ffffff
• Text: #292930
• Radius: 8px
• Padding: 10px 16px
• Height: 40px
• Font: 15px / 600 / 20px, -apple-system stack
• States: rest only
• Use: Studio header (not followed)

Guide link

• Background: transparent
• Text: #5c46ff
• Padding: 0px 16px 0px 0px
• Height: 28px
• Font: 20px / 500 / 28px
• States: rest only
• Use: 더 알아보기 at the foot of each guide card

Carousel arrows

• Background: rgba(199, 199, 201, 0.5)
• Radius: 50%
• Size: 36 × 36
• Use: web lobby hero carousel

Navigation

Studio navigation

• Background: transparent
• Text: rgba(255, 255, 255, 0.6)
• Padding: 15px 16px
• Height: 50px
• Font: 17px / 500 / 19.55px
• Hover: text #ffffff
• Pressed: text #ffffff
• Selected: text #ffffff at weight 700 on the current section's item (world page)
• Use: Studio top navigation over the dark hero, five items on Studio home

Language dropdown

• Trigger: 1px solid #e0e0e1, radius 8px, 74 × 36, text #292930
• Menu: #ffffff, radius 8px, padding 8px 0px, shadow rgba(0, 0, 0, 0.08) 0px 2px 6px 0px, 180 wide
• Option: 14px / 500 / 20px, padding 8px 24px
• Selected: option background #f8f8fa
• Use: 한국어 switcher on both Studio pages, opened by the collector's expansion pass

Cards

Service card (Studio home)

• Background: #ffffff
• Text: #292930
• Radius: 16px
• Padding: 42px 32px 32px
• Size: 320 × 416
• Use: 아이템, 월드, 라이브, each ending in a violet action

Feature card (world page)

• Text: #292930 title at 28px / 700 / 36px; #5c5c61 text at 17px / 400 / 24px
• Radius: 16px
• Shadow: rgba(0, 0, 0, 0.05) 0px 2px 12px 0px
• Size: 320 × 438
• Use: 모험, 소통, 도전

Guide card (world page)

• Background: #f8f8fa
• Text: #292930
• Radius: 16px
• Padding: 36px 36px 64px
• Size: 368 × 244
• Use: 개발 가이드, 출시 가이드, 수익 창출 가이드

World tile (web lobby)

• Thumbnail: 152 × 152, radius 12px, on rgba(248, 248, 250, 0.5)
• Name: #000008, 15px / 500 / 22px
• Use: the lobby's world grid (157 tiles)

---

Verified: 2026-09-30 (deterministic collector capture of three public, logged-out pages — the web lobby and two ZEPETO Studio pages — plus first-party context) Tier 1 sources: https://web.zepeto.me/ko ; https://studio.zepeto.me/ko ; https://studio.zepeto.me/ko/products/world ; https://web.zepeto.me/ko/about ; https://blog.zepeto.me/ko ; https://www.naverz-corp.com/ Tier 2 sources: getdesign.md/zepeto (HTTP 200, "zepeto — 0 DESIGN.md files") and styles.refero.design/?q=zepeto (HTTP 200, no ZEPETO style entry), requested 2026-09-30; no Tier 2 value used Conflicts unresolved: none

States

Only these states were observed on the three captured pages; nothing else is specified here.

No pointer frame was recorded for any button, so button hover, pressed and focus are unmeasured, not absent. The Studio logo link's pressed frame shows only the browser's default active colour, which is not a brand value. Error, empty, loading and success states were not captured.

Do's and Don'ts

Do

• Use #5c46ff for Studio actions and links, and as the label on a white hero pill
• Keep the web lobby monochrome: #292930 for the main action, #f5f5f6 for utility buttons
• Set heroes at 64px / 800 and other headlines at 700
• Use 16px radii for Studio cards and 24px / 34px for pills
• Alternate white and #f8f8fa sections on marketing pages
• Declare the system UI stack rather than substituting a named font

Don't

• Don't use violet in the web lobby's chrome; none was captured there
• Don't bring back the June record's decorative magenta; it was not rendered
• Don't stack heavy shadows; the strongest is a 20px, 20% glow
• Don't invent hover colours for buttons; none were recorded
• Don't present a system face as a ZEPETO brand typeface

Voice & Tone

ZEPETO's voice is inviting and creator-first. The web lobby speaks in short Korean labels ("로그인", "ZEM 구매", "입장하기"); Studio speaks in short declarative sentences that end with a full stop and cast the reader as a creator.

Voice samples (verbatim, opened 2026-09-30):

• "상상하는 모든 것. 제페토 스튜디오에서." — Studio home hero.
• "크리에이터를 위한 제페토." — Studio home section headline.
• "크리에이터의 상상은 월드가 된다." — Studio world page hero.
• "제페토는 3D 아바타 기반 소셜 플랫폼으로, …" — web.zepeto.me About page.

Forbidden register: corporate stiffness, scarcity pressure, jargon that makes creating sound hard.

Agent Prompt Guide

Quick Color Reference

• Brand action: #5c46ff with #ffffff text
• Text: #292930 (Studio), #000008 (web lobby); descriptions #5c5c61; muted label #47474d
• Surfaces: #ffffff, #f5f5f6 (utility buttons), #f8f8fa (sections, guide cards)
• Border: #e0e0e1

Example Component Prompts

• "Create a ZEPETO Studio action: #5c46ff pill, 24px radius, 200 × 48, #ffffff 17px / 500 label, no shadow, at the foot of a white 320 × 416 card with 16px radius and 42px 32px 32px padding."
• "Create a hero pill for a dark hero: white, 34px radius, 68px tall, 0 34px padding, #5c46ff 22px / 700 label, shadow rgba(0, 0, 0, 0.2) 0px 0px 20px 0px."
• "Create a web lobby header: white bar with a #f5f5f6 ZEM 구매 button (#000000 16px text) and a #292930 로그인 button (#ffffff 15px / 500 text), both 40px tall with 8px radius and 10px 16px padding."
• "Create a guide card: #f8f8fa, 16px radius, 36px 36px 64px padding, 22px / 700 #292930 title, 17px #5c5c61 text, and a #5c46ff 20px / 500 더 알아보기 link."

Iteration Guide

1. Violet only for Studio actions and links
2. A monochrome lobby where content carries the colour
3. Weight, not typeface, for hierarchy
4. 8px utility, 16px cards, 24–34px pills
5. Soft, rare shadows

---

Governance

Known Gaps

• Contrast, guide-link. Text #5c46ff on #00000000 measures 3.78:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.