Design System Inspiration of ZEPETO

1. Visual Theme & Atmosphere

ZEPETO (제페토) is the 3D-avatar metaverse social platform built by Naver Z — a place where hundreds of millions of users style avatars, build virtual worlds, watch live shows, and trade creator-made items. Its surfaces split into two registers that share one DNA: a clean, almost utilitarian web product (web.zepeto.me) wrapped around a vivid, youthful brand world, and a polished marketing-grade creator studio (studio.zepeto.me) that leans all the way into the brand color. The connective tissue is a single saturated electric violet (#5c46ff) that functions as the brand anchor — the primary CTA fill on Studio and the link/accent hue on the web app — paired with a playful magenta accent (#f323ff) reserved for decorative swatches and gradients.

The web product surface is intentionally quiet: a near-white canvas (#ffffff) with soft cool-grey surfaces (#f5f5f6, #f8f8fa), body text in a near-black (#000008) and muted grey (#75757a), and a dark near-black (#292930) login button. This is the "tool" mode — readable, dense, content-forward, letting the avatars, worlds, and item thumbnails carry the color. The Studio surface is the "brand" mode: full-bleed violet (#5c46ff) hero bands with 64px ExtraBold white headlines, large pill buttons, and a confident editorial cadence ("All you've imagined, At ZEPETO Studio.", "ZEPETO is for the Creators.").

Geometry tells the two-register story precisely. The web product uses tight 8px-radius utility buttons (Login, Buy ZEMs) — efficient, app-like. The Studio reaches for the pill: 24px, 28px, and 34px radius CTAs ("Get Started", "Learn more") and fully circular controls. Depth is mostly flat — box-shadow: none dominates both surfaces — with one signature exception: the white "Get Started" pill on the violet hero band lifts on a soft glow shadow (rgba(0,0,0,0.2) 0px 0px 20px 0px). The type stack is a system UI sans (ui-sans-serif / -apple-system) run heavy: 700–800 weight for every headline, 400–500 for body and UI.

Key Characteristics:

• Signature electric violet (#5c46ff) — brand anchor: Studio CTA fill, web link/accent
• Playful magenta (#f323ff) accent for decorative swatches and gradients
• Two registers: quiet grey web product vs. full-violet marketing studio, one shared palette
• Heavy headline weight — 800 ExtraBold at 64px, 700 Bold at 48px — youthful, declarative
• System UI sans (ui-sans-serif / -apple-system) for everything; no custom display font
• Dark near-black (#292930) for the web login button and heading text — not pure black
• Two-radius story: 8px tight utility buttons on web, 24–34px pills on Studio
• Mostly flat (box-shadow: none); one soft glow (rgba(0,0,0,0.2) 0px 0px 20px) on the hero pill
• Cool-grey neutral ladder (#5c5c61 → #75757a → #c7c7c9) for text/UI hierarchy

2. Color Palette & Roles

Primary

• ZEPETO Violet (#5c46ff): The signature brand color. Primary CTA fill on Studio ("Get Started", "Learn more"), the link/accent color on the web product ("More", "Privacy Policy"), and emphasis pills. The system's single "action/brand" hue.
• Accent Magenta (#f323ff): A vivid pink-magenta used as a decorative swatch and in gradient accents — the playful counterpart to the violet, never used for plain text.

Ink & Text

• Ink (#292930): Dark near-black for the web header Login button fill and for Studio headings/labels. Carries weight without the harshness of pure black.
• Ink Pure (#000008): The near-black used for primary body and label text on the web product — a whisper away from black with a faint blue cast.
• Pure Black (#000000): Occasional maximum-contrast text on the web canvas.
• Body Grey (#5c5c61): Secondary text and inactive nav labels on Studio.
• Muted Grey (#75757a): Tertiary text, captions, metadata on the web product.
• Muted Alt (#47474d): Disabled/low-emphasis button label (the grey "Enter" button text) and fine print.
• Faint Grey (#c7c7c9): Lowest-emphasis labels, disabled glyphs, circular control tint.

Neutral & Surface

• Canvas (#ffffff): Page background, white cards, text on violet/dark.
• Surface (#f5f5f6): Soft cool-grey fill for utility buttons (Buy ZEMs, Enter) and segmented surfaces.
• Surface Alt (#f8f8fa): A slightly lighter grey for feature cards and alternating bands.
• Hairline (#e0e0e1): Thin 1px borders and dividers (language switcher, inputs).

On-color

• On Primary (#ffffff): White text/icons on violet and dark surfaces.

3. Typography Rules

Font Family

• Web product: ui-sans-serif, system-ui, -apple-system — the platform UI sans stack; no custom webfont is loaded on web.zepeto.me.
• Studio: -apple-system, system-ui, AppleSDGothicNeo — system sans with a Korean fallback for hangul.
• The system relies on weight (400 → 800) rather than a distinctive typeface for personality.

Hierarchy

Principles

• Weight is the hierarchy: 800 ExtraBold for the top hero, 700 Bold for every other headline, 500 medium for nav/buttons, 400 for body. There is no custom display face — emphasis comes entirely from weight and scale.
• Big, declarative headlines: 48–64px hero type with tight line-height (1.09–1.25) reads as confident and youthful, suited to a Gen-Z avatar platform.
• System sans throughout: A ui-sans-serif / -apple-system stack keeps rendering fast and native across web and the embedded mobile webviews; the brand personality lives in color and avatars, not letterforms.
• Quiet body, loud headers: Body sits at 16px / 400 in muted grey; headers jump to 700–800 — the contrast is the system's primary rhythm.

4. Component Stylings

Buttons

Studio Primary CTA

• Background: #5c46ff
• Text: #ffffff
• Radius: 28px
• Padding: 0px 34px
• Height: 56px
• Font: 20px weight 500
• Use: Studio primary call-to-action ("Get Started", "Learn more") — full pill on white

Studio Invert CTA (on violet band)

• Background: #ffffff
• Text: #5c46ff
• Radius: 34px
• Padding: 0px 34px
• Height: 68px
• Font: 22px weight 700
• Shadow: rgba(0,0,0,0.2) 0px 0px 20px 0px
• Use: Hero "Get Started" on the full-violet band — white pill, violet label, soft glow lift

Web Login (Primary, dark)

• Background: #292930
• Text: #ffffff
• Radius: 8px
• Padding: 10px 16px
• Height: 40px
• Font: 15px weight 500
• Use: Web header Login button — tight near-black utility CTA

Web Secondary (soft grey)

• Background: #f5f5f6
• Text: #292930
• Radius: 8px
• Padding: 10px 16px
• Height: 40px
• Font: 16px weight 400
• Use: Web header "Buy ZEMs" / low-emphasis utility action

Enter (grey, disabled-look)

• Background: #f5f5f6
• Text: #47474d
• Radius: 8px
• Padding: 14px 34px
• Height: 56px
• Font: 17px weight 500
• Use: "Enter" world/room buttons in the web product list

Cards & Containers

Studio Pillar Card

• Background: #f8f8fa
• Text: #292930
• Radius: 24px
• Use: Studio creation pillar card (Items / World / Live) on the lighter grey surface

White Feature Card

• Background: #ffffff
• Text: #292930
• Radius: 24px
• Use: White feature/content card; flat, no shadow (separation by tint)

Badges

Violet Emphasis Pill

• Background: #5c46ff
• Text: #ffffff
• Radius: 9999px (full)
• Font: 15px weight 500
• Use: Emphasis tag / status pill in the brand violet

Navigation

• Background: transparent over violet hero band
• Text: #5c5c61 (inactive) on light, rgba(255,255,255,0.6) on dark hero
• Active: #292930 text on light surfaces
• Padding: 15px 16px per item
• Height: 50px nav items
• Font: 17px weight 500
• Use: Studio top nav ("Contents", "Creator Program", "Business", "Guides", "Support")

Avatars & Controls

• Shape: circular (9999px / 50%) for carousel prev/next controls and creator avatars
• Control background: rgba(199, 199, 201, 0.5) (translucent faint grey, #c7c7c9 base)
• Use: Hero carousel left/right controls; round creator thumbnails

---

Verified: 2026-06-17 (omd:add-reference CREATE — Tier 1 live inspect, 2 brand-owned surfaces) Tier 1 sources: https://web.zepeto.me/ (product, live computed-style), https://studio.zepeto.me/ (creator studio, live computed-style), https://docs.zepeto.me/studio-guide/facecode-guidelines (creator design guidelines, live) Tier 2 sources: getdesign.md/zepeto — NOT FOUND (no entry); styles.refero.design/?q=zepeto — no ZEPETO match (only fuzzy alphabetical neighbors: Zed/Zelt/Mezmo/Zapier). KR Tier-2 gap as expected; Tier 1 carries the proof. Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: ~8px
• Scale: 4px, 8px, 10px, 16px, 24px, 34px, 48px, 64px
• Notable: Studio CTAs use a generous 34px horizontal pad; web utility buttons use a tighter 10px/16px pad — the spacing itself reinforces the product/brand register split.

Grid & Container

• Web product: a centered content column with a full-bleed hero carousel; thumbnail grids for worlds/items
• Studio: full-width alternating bands — violet hero band, then white/grey feature sections
• Feature pillars (Items / World / Live) arranged as a 3-up card row on Studio
• Cards group related creator tools and content

Whitespace Philosophy

• Let the avatars carry color: the web product stays neutral grey/white so 3D avatar and item imagery provides the visual energy.
• Brand bands for emphasis: Studio punctuates white sections with full-violet (#5c46ff) bands to mark conversion moments.
• Flat segmentation: sections separate by background tint (#f5f5f6 / #f8f8fa vs #ffffff), not shadow stacks.

Border Radius Scale

• Small (8px): web utility buttons, language switcher, inputs
• Medium (24px): feature/pillar cards, mid-size pill buttons
• Large (28–34px): Studio primary CTAs, hero pills
• Full (9999px / 50%): badges, circular avatars and carousel controls

6. Depth & Elevation

Shadow Philosophy: ZEPETO is a near-flat system. Live inspection found box-shadow: none across nearly every button, card, nav, and heading on both web.zepeto.me and studio.zepeto.me. Depth and grouping come from flat tinted surfaces (#f5f5f6, #f8f8fa) and the strong violet brand bands rather than elevation. The single deliberate exception is a soft, even glow (rgba(0,0,0,0.2) 0px 0px 20px 0px) on the white hero CTA pill — a subtle lift that makes the conversion button float just above the violet field. When emphasis is needed elsewhere, the system reaches for color (#5c46ff) or the dark ink (#292930), never a heavier shadow.

7. Do's and Don'ts

Do

• Use ZEPETO Violet (#5c46ff) as the single brand/action color — Studio CTA fill and web link accent
• Run headlines heavy — 800 ExtraBold at 64px, 700 Bold at 48px — declarative and youthful
• Use the dark ink (#292930) for the primary utility button and headings, not pure black
• Keep the web product surface quiet (grey/white) so avatars and items carry the color
• Use full-violet bands on marketing surfaces to mark conversion moments
• Reach for the pill (24–34px) on brand/marketing CTAs and full-round on avatars
• Keep utility buttons tight (8px radius) in the web product
• Stay flat — separate with tint (#f5f5f6 / #f8f8fa), reserve the soft glow for the hero pill

Don't

• Spread the violet across many UI chrome elements — keep it the single action/brand hue
• Use the magenta (#f323ff) for text or plain buttons — it's a decorative/gradient accent only
• Use pure black for body text — reserve near-black #000008 / ink #292930
• Stack heavy drop shadows — the system is near-flat; only the hero pill lifts
• Set headlines in a light weight — display is always 700–800
• Mix square sharp corners into brand CTAs — those are pills
• Add a second saturated accent hue beyond violet + the magenta decorative swatch
• Let the web product surface compete with avatar/item imagery for color attention

8. Responsive Behavior

Breakpoints

Touch Targets

• Studio CTAs at 56–68px height with 34px horizontal padding — large, unmistakable
• Web utility buttons at 40px height — comfortably tappable in dense chrome
• Circular carousel controls at 36px diameter
• Nav items at 50px height for touch

Collapsing Strategy

• Hero: 64px ExtraBold headline scales down on mobile, weight 800 maintained
• Pillar cards: 3-up → stacked single column
• Violet brand bands maintain full-width treatment, reduce internal padding
• Web product is mobile-first (the platform is primarily a mobile app); the web surface mirrors app layouts

Image Behavior

• 3D avatar, world, and item thumbnails carry the visual color load at all sizes
• Cards maintain 24px radius across breakpoints
• Circular avatars stay fully round on every viewport

9. Agent Prompt Guide

Quick Color Reference

• Primary / brand CTA: ZEPETO Violet (#5c46ff)
• Decorative accent: Magenta (#f323ff)
• Dark utility button / heading: Ink (#292930)
• Body text: Near-black (#000008), muted (#75757a)
• Secondary nav text: Body Grey (#5c5c61)
• Background: Pure White (#ffffff)
• Surface: Cool Grey (#f5f5f6), Lighter Grey (#f8f8fa)
• Hairline: #e0e0e1
• On violet/dark: White (#ffffff)

Example Component Prompts

• "Create a Studio hero on a full #5c46ff violet band. Headline 64px system-sans weight 800, line-height 1.09, white. A white pill CTA: #ffffff background, #5c46ff text, 34px radius, 0 34px padding, 68px height, 22px weight 700, soft glow shadow rgba(0,0,0,0.2) 0px 0px 20px 0px — 'Get Started'."
• "Build a web product header on white. Dark Login button: #292930 background, white text, 8px radius, 10px 16px padding, 40px height, 15px weight 500. Soft grey 'Buy ZEMs' button: #f5f5f6 background, #292930 text, 8px radius."
• "Design a Studio pillar card: #f8f8fa background, 24px radius, no shadow. Title 24px weight 700, #292930. Three across (Items / World / Live)."
• "Create a violet emphasis badge: #5c46ff background, white text, full-round (9999px), 15px weight 500."

Iteration Guide

1. Violet (#5c46ff) is the single brand/action color — Studio CTA fill, web link accent; don't spread it
2. Headlines are heavy (700–800); body is 400 in muted grey — weight is the hierarchy
3. Two radius registers: 8px tight utility buttons on web, 24–34px pills on Studio/brand
4. Stay flat — separate with #f5f5f6 / #f8f8fa tint; only the hero pill carries the soft glow
5. Dark ink #292930 for the utility button and headings, near-black #000008 for body — never pure black
6. Magenta #f323ff is decorative/gradient only — never text or plain buttons
7. Keep the web product quiet so avatars and items provide the color energy

---

10. Voice & Tone

ZEPETO's voice is playful, inviting, and creator-empowering — a youthful, global-first tone that treats the user as both a player and a maker. The web product speaks in short, direct app labels ("Login", "Buy ZEMs", "Enter", "More"), while the Studio shifts to an aspirational, encouraging register aimed at creators ("All you've imagined, At ZEPETO Studio.", "ZEPETO is for the Creators.", "Limitless possibilities in the palm of my hand."). The platform invites participation — "Would you like to join?" — rather than hard-selling.

Voice samples (verbatim from live surfaces):

• "Would you like to join?" — web hero invitation. (verified live web.zepeto.me 2026-06-17)
• "All you've imagined, At ZEPETO Studio." — Studio hero headline. (verified live studio.zepeto.me 2026-06-17)
• "ZEPETO is for the Creators." — Studio section headline. (verified live studio.zepeto.me 2026-06-17)

Forbidden register: corporate stiffness, fear/scarcity sales urgency, jargon-heavy enterprise copy, anything that frames creation as difficult rather than playful.

11. Brand Narrative

ZEPETO (제페토) launched in 2018 and is operated by Naver Z Corporation, a subsidiary of Korea's Naver, built on the premise that anyone should be able to express themselves as a 3D avatar and build, share, and monetize virtual experiences. The platform pairs an avatar-creation engine with social worlds, live shows, and a creator economy denominated in its in-app currency, ZEM. It grew into one of the world's largest metaverse platforms, especially popular with Gen-Z users across Asia and globally.

The product is deliberately two-sided. On the consumer side (web.zepeto.me), users style avatars, enter worlds and rooms, buy ZEMs, and join live shows — a quiet, content-forward surface that lets the avatars and worlds supply the color. On the creator side (studio.zepeto.me, with design guidelines at docs.zepeto.me), ZEPETO Studio invites anyone to make items, build worlds, and create facecodes — "ZEPETO is for the Creators." — and sell them to the global player base.

What the design refuses, visible in its surfaces: the cold, corporate chrome of enterprise software and the heavy shadow-stacked look of legacy apps. What it embraces: a single confident brand violet (#5c46ff), big heavy youthful headlines, a near-flat aesthetic, and a clear split between a neutral product surface that showcases user-generated avatars and a vivid, encouraging studio that markets creation itself.

12. Principles

1. Avatars carry the color. The product surface stays neutral so user-generated avatars, worlds, and items provide the visual energy. UI implication: keep web chrome grey/white; reserve saturated hue for brand bands and CTAs.
2. One brand hue, two registers. Violet (#5c46ff) means "ZEPETO" and "do this" across both a quiet product and a vivid studio. UI implication: fill brand CTAs and link accents with #5c46ff; never dilute it across chrome.
3. Creation should feel limitless, not difficult. The Studio voice is aspirational and encouraging. UI implication: large pills, inviting copy, generous padding — making the "Get Started" path feel effortless.
4. Flat and fast. Mobile-native clarity beats decorative depth. UI implication: near-zero shadows; separate by tint; reserve the one soft glow for the hero conversion pill.
5. Weight, not typeface, signals importance. A system sans run at 400–800 carries the whole hierarchy. UI implication: express emphasis through weight and scale, not a custom display font.

13. Personas

Personas below are fictional archetypes informed by publicly observable ZEPETO user segments (Gen-Z avatar/social users, virtual-world players, UGC creators selling items), not individual people.

민서, 17, 서울. A high-schooler who styles her avatar daily, hangs out in worlds with friends, and watches live shows. Buys ZEMs occasionally for new outfits. Chose ZEPETO because it feels expressive and social, not like a corporate app.

Diego, 22, São Paulo. A hobbyist 3D creator who designs and sells avatar items through ZEPETO Studio. Reads the Studio guides and facecode guidelines closely. Values that the studio makes "Get Started" feel approachable and that there's a real global audience to sell to.

지훈, 28, 경기. A small-team world builder who uses ZEPETO Studio to publish interactive worlds. Cares about clear creator documentation and a fast, flat UI that doesn't get in the way of building.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is lively but controlled — fitting a youthful avatar platform without feeling chaotic. Hero carousels slide horizontally at motion-standard / ease-enter; the white "Get Started" pill responds to hover with a subtle scale and its soft glow intensifying. Pillar cards fade-in-from-below on scroll. The brand leans playful (avatar animations carry the delight) while keeping UI chrome transitions quick and steady. Under prefers-reduced-motion: reduce, all UI transitions collapse to instant and the product remains fully functional.