Marpple Shop DESIGN.md

Design System Inspiration of Marpple Shop

Overview

Visual Theme & Atmosphere

Marpple Shop connects a creator's goods with the work of selling them: its product introduction describes an integrated service for production, orders, payments, delivery and settlement, including goods made after an order arrives. The current offering includes physical merchandise, digital products and handmade goods. Its operator is (주)마플코퍼레이션. Product introduction

The official June 2024 Marpple Shop 2.0 renewal note connects the MAKE IT REAL! expression to discovering and expressing individuality. It records new branding alongside work to unify UI/UX and UX writing, and introduces creator rankings, pop-up stores and curation. The current introduction also documents YouTube Shopping and CIME connections; its update log dates additions to those descriptions to May 2026. 2024 renewal note, current introduction

The measured storefront places large creator artwork on a white interface, with dark product labels, rounded discovery shortcuts and a small glossy blue creator action. Blue #1c75ff supplies the measured navigation response; the changing merchandise imagery supplies much of the page's colour.

The measured homepage is the Korean edition (marpple.shop/kr/); the capture remained on that path.

Brand Narrative

Marpple Corporation's company page records its establishment date as 5 January 2015. That is a corporate date, not a verified launch date for Marpple Shop. The later 2.0 note frames the shop around individual expression and discovery, while the current introduction explains the operational services behind creators' stores. Company information, renewal note

The captured mix of creator features, rankings and curation gives that narrative a visible product structure. This connection is an interpretation of the documented product and measured homepage.

Principles

• Creator expression and discovery: documented in the 2.0 renewal note.
• Connected selling operations: documented in the product introduction.
• Artwork with restrained interface chrome: observed in the desktop capture.
• Blue interaction feedback: measured on the goods navigation link.

Personas

The introduction explicitly addresses illustrators and IP owners, virtual streamers, YouTube creators, handmade creators, businesses/brands and creators seeking collaborative products; no demographic personas were researched. Documented audiences

Colors

The live root exposes 86 --mk-* custom properties. Their first-party origin is corroborated by the product's served CSS. The same CSS initially aliases primary to orange, then overrides it to blue; use the live computed result for this surface. These are extracted values, not an official published brand specification.

The paragraph census also contains #a2a2a2 ×9 and #141414 ×4. Its dominant muted paragraph colour must be kept separate from the darker commerce labels. White is the most frequent overall text colour because the census also includes the many banner labels; it does not identify the paragraph foreground.

Tailwind, Swiper, date-picker defaults and the separate :root, :host palette are excluded. Namespace counts and ownership limits are recorded in the verification notes.

Typography

Official product-use statement: no opened company or renewal page names an official product typeface.

Live-loaded: the survey's loaded-face list contains Pretendard 400, 500, 600 and 700, neue-haas-unica 400, bebas-neue-pro-semiexpanded 700, Noto Sans KR 400/700 and Roboto 400/700, all normal style. Body and the first button declare a stack beginning with Pretendard; no h1 was available. The typography family token uses this loaded Pretendard face. The loaded Bebas face also has a specific homepage association: banner labels such as “CREATOR OPEN” carry font_bebas_20_bold, whose served CSS names bebas-neue-pro-semiexpanded, weight 700. It is the display family retained here.

Official distributed assets: /font/pretendard.css declares static Pretendard weights 100–900, with local-face names followed by same-origin subset WOFF2 and WOFF URLs. /font/font.css?t=20260413 declares Noto Sans KR and Roboto files under /font/maker/. Adobe's linked asd2vdw kit serves the two loaded Adobe families. A declaration records the offered sources; the capture does not identify which local/file alternative supplied each glyph. No font binary was separately downloaded and no redistribution licence is asserted.

Declared-only: the first family reported for all five identified controls is Pretendard Variable, absent from the survey's loaded-face list. Static Pretendard weights outside 400–700 are also declared but not reported loaded. They receive no specimens. The CSS for the Korean type classes contains a stack beginning with Pretendard Variable, then Pretendard; that declaration does not prove the variable face loaded.

Unresolved: exact glyph-level face selection and the storefront roles of loaded neue-haas-unica, Noto Sans KR and Roboto were not established. They are retained as font evidence, without additional family tokens. Substitute: none chosen.

Layout

At the measured 1440 × 1000 desktop viewport, a white header occupies 112px vertically. A horizontal hero strip begins at y=112; its cards measure 448 × 560px, with 16px between adjacent cards. Their artwork carries overlaid category, title and description text. Two rows of compact discovery links follow the hero, then a ranking title, category buttons and a “더보기” link.

The first ranking product row starts at x=32 and y=930. Its five image links are 262.4px square, with the next beginning at x=310 in the survey. These are observations of this capture, not a breakpoint or global grid formula. Continue below with the captured merchandising sections and the legal/support footer; keep text hierarchy distinct from creator artwork.

Responsive Behavior

Only the desktop 1440 × 1000 surface was measured; mobile layouts and breakpoint behaviour are unmeasured.

Elevation & Depth

The five identified control elements report box-shadow: none at rest. The share control also reports backdrop-filter: blur(20px). Its opaque white fill should be retained when describing that observation.

The creator CTA's apparent bevel belongs to the background image. The computed maker dimming values are rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) and rgba(0, 0, 0, 0.6); their presence does not establish a tested dialog or elevation system.

Motion & Easing

The computed root token --mk-transition-normal: 200ms ease is present. The measured share control's raw computed transition is background-color, box-shadow 0.2s, 0.2s ease-out, ease-out 0s, 0s; its tested states nevertheless show no settled visual property change. The other four identified controls report all 0s ease 0s on the element itself. These strings are reproduced in the verification Proof block; no additional timing or curve is specified.

---

Measurement: 2026-11-04; Korean homepage, fresh worker profile, 1440 × 1000, ko-KR. Source-backed company narrative is separate from homepage token evidence. Raw evidence, namespace exclusions, control identities and limitations are in report.md and verification.md.

First-party implementation sources: homepage, root tokens and typography CSS, storefront CSS, Pretendard declarations, font catalogue declarations.

Components

Goods navigation link — “굿즈”, a.menu__ef8b2c4c, links to /kr/@/goods/ranking. Its measured box is 27.3 × 24px, radius 0px, padding 0px, text 16px/500, resting ink #141414. It has no own background fill and sits over #ffffff. Hover and held pointer press change both element and label to #1c75ff. Keyboard focus was not reached and has no token. This is the single interactive component exported in the token block.

The other observed controls remain useful geometry references:

The creator action's rounded chrome is supplied by a raster background, not by its measured border radius or box shadow. The observed background URL ends in 4902c70590a85942d7153370915d8d921f5b52301.png. A flat-blue reconstruction would lose that measured construction.

No visible search input was identified by the states probe. Its metrics and states are absent.

The survey also records a 24px radius on the quick-menu links and a computed root --mk-border-radius: 20px; the latter is a maker namespace value, not a measured product-card radius.

States

The goods nav changes ink to #1c75ff on verified :hover and :active; press adds no further difference from hover. Its keyboard focus is UNMEASURED, as is the creator CTA's: both Tab walks ended in cycles before reaching them.

The creator CTA has measured unchanged hover and press. Share, inactive handmade tab and product image link have measured unchanged hover, press and real Tab focus. Their focus snapshots report outline-style: none, rather than a browser auto ring. The search input was not found; all its states are unmeasured.

“Unchanged” is limited to each control, its pseudo-elements, all captured descendants and their pseudo-elements, and three ancestor levels. The share comparison includes one SVG and its path; the product link includes one image. The probe compares computed style and attributes, not pixels; siblings, closed shadow roots, cross-origin frames and image-internal animation are outside that conclusion. No overlay was hidden and no dialog close selector was used. No consent banner is visible in the inspected viewport captures, and no consent-rejection action was logged.

Do's and Don'ts

• Use the measured blue nav response on the white header.
• Keep large creator artwork and compact neutral commerce controls at their observed scales.
• Preserve the distinction between dark product ink and muted paragraph ink.
• Retain the creator CTA's image construction when fidelity to this capture matters.
• Do not turn maker radii, widget palettes or Swiper blue into storefront component defaults.
• Do not add a hover transform, focus ring or disabled state to this reference without new measurement.

Voice & Tone

The captured Korean interface uses compact task labels: “더보기”, “소문내기” and “크리에이터 신청하기”. Its English banner labels, including “CREATOR OPEN” and “CURATION”, act as category markers. Keep this distinction between commerce actions and editorial labels; it is an observed writing pattern, not a published voice guide.

Agent Prompt Guide

“Build a white creator-commerce homepage with a 112px desktop header, 448 × 560px hero artwork cards and 16px hero gaps, followed by compact rounded discovery links and a product ranking. Use the measured product ink and blue navigation response. Keep the creator application link's PNG background construction explicit.”

“For the ‘굿즈’ navigation link, use 16px/500 text in a 24px-high box, zero padding and radius, resting #141414 on a white header; hover and pointer press use #1c75ff. Font metrics are known; the declared variable face and keyboard-focus styling remain unresolved.”

These prompts encode measured desktop details. They do not establish additional components or states.