Design System Inspiration of ZIGZAG (지그재그)

1. Visual Theme & Atmosphere

ZIGZAG is KakaoStyle's style-commerce service: its public terms describe it as the mobile shopping service through which sellers and users transact, while the company's 2025 brand publication frames the service as a place for people to discover and complete their own tastes. The current public web evidence is deliberately product-led rather than a separate corporate-brand treatment: product photography and dense catalog information occupy the page, with a white #ffffff canvas, dark #292b2b reading text, muted metadata, and square-to-lightly-rounded geometry. The official ZDS engineering account explains why that consistency matters: Kakaostyle rebuilt the web design system around CSS-variable tokens and unified product-card work across surfaces. This reference preserves that engineering and commerce context, but promotes only the values observed on the three supplied current public product surfaces.

The inspected home and two product details share a restrained neutral system. #121212 is the strongest observed detail-tab text, #292b2b is the repeated body/card foreground, #878f91 supports inactive tabs and home list text, and #ecedee appears in thumbnail placeholders and thin control borders. The 2025 brand story is marketing context, not an authorization to turn campaign color or copy into a current product token.

Key Characteristics:

• Three current public product surfaces, not authenticated checkout or native-app screens
• White canvas with charcoal reading text and cool-gray metadata
• Product-card root, thumbnail, metadata, and tab substructures observed in current public markup
• 0px card geometry, 8px icon corners, 24px action corners, and full-pill carousel controls each tied to a specific observed role
• No published current pink token is promoted from the supplied product capture

2. Color Palette & Roles

Current public product values

• Strong detail text (#121212): selected product-detail tab text and dark carousel navigation fill.
• Foreground (#292b2b): repeated body, card, and page text across home and both product details.
• Canvas (#ffffff): body and white control surface in the captured public pages.
• Secondary (#606567): supporting product-detail text.
• Muted (#878f91): inactive product-detail tabs and home list text.
• Hairline / placeholder (#ecedee): public product-thumbnail placeholder and 1px carousel-arrow border.

Deliberately unpromoted groups

The legacy #fa6ee3 / #f55dd6 pink system, sale/status colors, Kakao-login color, dark theme, campaign colors, and hover/pressed values did not occur in the supplied current product evidence. The official ZDS article establishes token architecture, not those absent values on these captured surfaces, so they are omitted instead of reconstructed.

3. Typography Rules

Font evidence boundary

The public hierarchy was measured as a stack, not a guaranteed loadable type family: product-detail headings reached 32px / 600 / 44.8px, common text was 16px / 400, and tabs/supporting metadata used 14px / 500 or selected 14px / 600. Letter spacing was normal throughout the sampled roles.

Observed hierarchy

4. Component Stylings

Public product components

Product Thumbnail Placeholder

• Background: #ecedee
• Radius: 0px
• Use: .product-card-thumbnail placeholder on surface-2 and surface-3; representative 172px-wide product cards.

Product Card Root

• Radius: 0px
• Padding: 0px 0px 8px
• Use: .product-card-root.product-card on both captured product-detail surfaces; the root itself is transparent.

Product-detail Tab

• Text: #121212
• Radius: 0px
• Padding: 0px 4px 17.5px
• Font: 14px / 600 / computed Pretendard JP stack
• States: selected tab captured in surface-2 and surface-3; the default tab is #878f91, 14px / 500, with the same control height.
• Use: product-detail tab list; selector provenance surface-2::[data-omd-capture="28"].

Home Quick-menu Arrow

• Background: transparent
• Text: #000000
• Border: 1px solid #ecedee
• Radius: 50%
• Disabled: previous arrow captured with rgba(16,16,16,0.3) text.
• Use: home quick-menu carousel arrow; selector provenance home::[data-omd-capture="74"].

No checkout CTA, search input, filter chip, toast, dialog, favorite state, hover, focus, or pressed variant is promoted: the collector reported zero safe interaction expansions, and those components were not present with sufficient selector/state proof in the supplied product surfaces.

---

Verified: 2026-07-13 Tier 1 sources: https://zigzag.kr/ · https://zigzag.kr/catalog/products/145661347 · https://zigzag.kr/catalog/products/162934185 Tier 2 sources: https://getdesign.md/zigzag (attempted; unavailable) · https://styles.refero.design/?q=ZIGZAG (attempted; unavailable) Conflicts unresolved: none

5. Layout Principles

• Keep product imagery and metadata as separate blocks. The current public card implementation exposes thumbnail and metadata as distinct product-card subcomponents.
• Treat the 8px bottom card padding as local card geometry, not a global spacing scale.
• Keep product-detail tabs as low-fill text controls; the observed selected state is conveyed by text weight/color rather than a filled pill.
• Do not infer desktop, native-app, cart, or checkout layout rules from these three public web pages.

6. Depth & Elevation

The supplied public samples report box-shadow: none for the promoted card, tab, and quick-menu controls. Product thumbnails may use the neutral #ecedee placeholder; depth is not promoted as a canonical shadow system. White surfaces and hairlines should not be converted into an invented card-elevation scale.

7. Do's and Don'ts

Do

• Keep #292b2b as the observed body/card foreground and reserve #121212 for the strongest captured detail-tab state.
• Preserve the product-card split between thumbnail and metadata when using this reference's public-card pattern.
• Use 0px geometry only for the observed card/tab roles; use 8px, 24px, and full-pill values only in their evidenced icon, action, and carousel-control roles.

Don't

• Do not present the legacy pink palette as a current public product token without new product-surface proof.
• Do not label the computed Pretendard JP stack as a browser-loadable ZIGZAG font or substitute a system font under that name.
• Do not invent sale, error, success, favorite, dialog, input, checkout, hover, focus, or pressed variants from adjacent marketing or native-app surfaces.

8. Responsive Behavior

The artifact was captured at 1440x900 and the public product content contained a 600px-wide product carousel/card region. That observation is not enough to claim a global max-width or native-mobile breakpoint policy. Responsive behavior, overlays, and interaction states remain outside this reference until independently captured.

9. Agent Prompt Guide

Use this reference for a neutral, photo-led public fashion-product detail only: white canvas, #292b2b reading text, #878f91 inactive metadata, #ecedee placeholder/hairline, a selected 14px / 600 #121212 tab, and a transparent square product-card root. Do not ask it to supply a ZIGZAG pink CTA, a verified font file, or checkout-state patterns; those are not in this evidence set.

10. Voice & Tone

Official current brand publishing uses a personal-style discovery frame: the 2025 ZIGZAG Beauty story calls the service a style-commerce platform and describes helping people find their own preferences. This is marketing voice, not a token or a verified logged-in-product microcopy guide. Keep product-detail labels concrete and item-led; do not manufacture error, payment, or retention copy from campaign language.

11. Brand Narrative

KakaoStyle's official 2025 ZIGZAG Beauty publication describes ZIGZAG as a style-commerce platform that began in fashion and expanded its categories and selection so people can discover their own preferences. The publication connects that idea to a beauty pop-up whose offline “online pouch” could link saved products back to the app cart. Separately, ZIGZAG's public terms define the service as a mobile shopping service in which the company intermediates transactions between sellers and users. Together, those first-party sources explain the reference's scope: a commerce service whose editorial discovery language sits beside a transactional product surface.

The official engineering account adds the system's current technical arc. Its ZDS rebuild began from the need to unify independently maintained product cards; the team adopted modular packages, CSS-variable token contracts, and a compound product-card structure that can vary by surface without losing its shared base. That background supports the documented card anatomy, but not token values absent from the July 2026 public capture.

12. Principles

1. Discovery and transaction coexist. The official brand story presents preference discovery while the terms define a transaction-intermediation service. UI implication: keep editorial/campaign interpretation separate from checkout claims unless each has surface evidence.
2. Systemize the repeated product card. ZDS was rebuilt in part to unify product-card work across surfaces. UI implication: preserve thumbnail and metadata as separable blocks rather than treating each card as an unstructured visual tile.
3. Tokens need local proof. CSS-variable architecture is official engineering context, but current values must still come from the correct product surface. UI implication: do not copy a marketing color or legacy CSS value into product tokens without computed evidence.

13. Personas

These are stakeholder roles derived from first-party service/engineering descriptions, not synthetic user research or demographic claims.

• Shopper: uses the mobile shopping service to browse product information and complete a transaction through the platform.
• Seller: provides goods or services through the marketplace relationship described in the public terms.
• Product-surface team: maintains product-card UI across multiple surfaces using the ZDS component architecture described by Kakaostyle engineering.

14. States

15. Motion & Easing

No motion duration, easing curve, animation, or reduced-motion treatment was observed in the supplied capture. The product-card carousel and quick-menu arrows establish only structural control evidence; they do not authorize a motion token or a claimed transition behavior.