Design tokens (YAML front matter)

name: Kurly
colors:
  primary: '#5f0080'
  canvas: '#ffffff'
  foreground: '#333333'
  body: '#464c52'
  muted: '#999999'
  border: '#dfe4eb'
  control-background: '#f7f7f7'
  control-muted: '#b5b5b5'
typography:
  utility:
    fontSize: 14px
    fontWeight: 400
    lineHeight: 14px
    use: Repeated visible text and button default in the supplied desktop commerce capture.
  category-tab:
    fontSize: 18px
    fontWeight: 400
    lineHeight: 23.94px
    use: Inactive category tab in the home and new-products surfaces; selected and hover/pressed samples are separately observed.
  input:
    fontSize: 16px
    fontWeight: 400
    lineHeight: 16px
    use: Captured form input, including the collector's error-state sample; letter-spacing -0.33px. Corrected 2026-09-29 from 20px, which no input sample records.
rounded:
  xs: 2px
  sm: 4px
spacing:
  xxs: 2
  xs: 4
  sm: 8
  md: 16
components:
  category-tab:
    type: button
    textColor: '#b5b5b5'
    typography: 18px / 400 / Pretendard
    states: 'Selected tab is #5f0080 at 18px / 500; the captured inactive tab changed to #5f0080 at both hover and pressed.'
    use: Category control at home::[data-omd-capture="7"] and surface-3::[data-omd-capture="7"].
    hover: '#5f0080'
    pressed: '#5f0080'
  form-input:
    type: input
    backgroundColor: '#ffffff'
    textColor: '#333333'
    typography: 16px / 400 / Pretendard
    error: Error state was captured at home::[data-omd-interaction-capture="form-error-0-0"] and surface-3::[data-omd-interaction-capture="form-error-0-0"]; sampled computed values matched the retained default sample.
    use: Captured form input only; no focus, disabled, or success variant is specified.
  product-list-article:
    type: card
    textColor: '#333333'
    rounded: 0px
    typography: 14px / 400 / Pretendard
    use: Article wrapper in the new-products product list at surface-3::article; 249px sampled width, with no card surface or hover variant observed.
  header-nav-link:
    type: tab
    backgroundColor: transparent
    textColor: '#464c52'
    border: bottom 1px, transparent at rest
    rounded: 0px
    padding: 0px
    height: 21px
    typography: 16px / 500 / 20px
    hover: 'fg #5f0080, bottom border #5f0080'
    pressed: 'fg #5f0080, bottom border #5f0080'
    states: rest, hover, and pressed sampled on six links on home (capture 14-19) and the same six on new-products, all recording the same values; no focus frame
    use: Header navigation link (a.css-1m0tfai) at home::[data-omd-capture="14"]
  product-list-control:
    type: button
    backgroundColor: '#ffffff'
    textColor: '#333333'
    border: '1px #dfe4eb'
    rounded: 4px
    padding: 0px
    size: 249px x 36px
    typography: 14px / 400 / 14px
    states: default captured; no pointer-state sample
    use: Repeated product-list button on new-products at surface-3::[data-omd-capture="148"] (58 occurrences of this variant)
    height: 20px
  compact-list-control:
    type: button
    backgroundColor: '#f7f7f7'
    textColor: '#b5b5b5'
    rounded: 2px
    padding: 2px 0px 3px
    size: 22px x 22px
    typography: 13px / 400 / 17px
    states: default captured; no pointer-state sample
    use: Compact product-list control on new-products at surface-3::[data-omd-capture="60"] (18 occurrences of this variant)
  outline-button:
    type: button
    backgroundColor: transparent
    textColor: '#333333'
    border: '1px #e2e2e2'
    rounded: 3px
    padding: 0px
    size: 140px x 40px
    typography: 14px / 400 / 39px
    states: default captured; no pointer-state sample
    use: 140 x 40 outline button at home::[data-omd-capture="92"]; the variant occurs four times across home and category-list
fonts:
  roles:
    sans: Pretendard

Design System Inspiration of Kurly (컬리 / 마켓컬리)

Overview

Visual Theme & Atmosphere

Kurly is a Korean commerce company whose retail service began in 2015 around curated food and controlled-temperature delivery; its official introduction says that selection, delivery quality, fair pricing, customer care, and sustainable distribution are central to the service. The current public shopping surfaces in this reference show a compact commerce language rather than a published universal product design system: white backgrounds, charcoal text, fine light borders, a restrained deep-purple active accent, and a loaded Pretendard webfont. The recognizable purple is present in category selection and active text/border treatments, while the product-list article wrappers themselves remain visually flat. That separation matters: Kurly’s corporate story and its current shopping UI are related, but neither the corporate brand material nor marketing language is used here to fill unobserved commerce tokens. Kurly introduction and company profile provide the business context; the three supplied live surfaces provide the UI values.

Key Characteristics:

Current captured commerce surfaces use #ffffff, #333333, and a deep #5f0080 active accent.
Pretendard is computed on 761 visible samples and corroborated by loaded Kurly-hosted FontFace sources.
The retained component evidence is deliberately surface-specific: category tabs, header navigation links, product-list controls, a small outline button, a form-input error sample, and flat product-list articles.
Measured pointer states use the accent: the inactive category tab and the header navigation links turn #5f0080 on hover and press, and the links also show a 1px #5f0080 bottom border.
The supplied artifact contains desktop captures only; responsive rules, mobile navigation, checkout, and product-detail UI are not specified.

Primary tasks

Shop curated food delivered at a controlled temperature
Pick a product category and see its listings
Scan the new-products list for recently added items

Brand Narrative

Kurly’s official materials say that the company began its consumer service in 2015 and built it around carefully chosen products and a cold-chain delivery approach. The current company profile identifies Market Kurly and Beauty Kurly as services and describes the broader purpose as distribution innovation for a better life. Company profile

Its own introduction connects the service proposition to product selection, delivery quality, fair pricing, customer care, and sustainable distribution. That narrative is useful context for a reference user, but it does not convert corporate claims into component tokens or make unobserved commerce behaviors factual. Kurly introduction

Principles

Something Better. The company says it pursues better things and better ways. UI implication: make a product or delivery claim specific and traceable to its supporting evidence.
Integrity. The company describes acting on trust and sincere communication. UI implication: do not conceal an evidence boundary behind a plausible UI token.
Diversity. The company says it respects different preferences and choices. UI implication: do not collapse separate product, marketing, and corporate surfaces into one fictional system.
Sustainability. Kurly connects sustainability to customers, producers, partners, and the distribution ecosystem. UI implication: represent a sustainability claim only when the source identifies the practice or impact.

Personas

Kurly’s first-party material identifies stakeholder groups rather than providing customer personas: customers and families, producers, partners, shareholders, and employees. No demographic archetypes, purchase behavior, or individual personas were collected for this reference, so they are not fabricated here.

Colors

Observed live product surfaces

Active accent (#5f0080): repeated computed text and border value across the home, category-list, and new-products surfaces; the selected category tab, the category-tab hover/pressed samples, and the header navigation link hover/pressed samples use it.
Canvas (#ffffff): repeated page/control background in the supplied product surfaces.
Foreground (#333333): dominant computed text value in all three captured product surfaces.
Body emphasis (#464c52): observed text value in home and new-products samples; it is the header navigation link colour at rest.
Muted control text (#b5b5b5) and muted text (#999999): observed inactive/secondary text values; no wider semantic role is inferred.
Control border (#dfe4eb): observed 1px border on repeated 36px new-products list controls.
Control fill (#f7f7f7): observed on compact product-list controls in the new-products surface.

Boundary

The supplied current capture does not establish the former purple ramps, cream bands, promotional colors, sale/error colors, or a filled purple commerce CTA. Those values are omitted from canonical tokens rather than inferred from legacy prose, logos, corporate material, or adjacent surfaces.

Typography

Evidence classes

Live computed surface-use: all 761 retained uses resolve first to Pretendard across body, button, card, heading, input, list-item, and text roles. The collector also records 18 Kurly-hosted Pretendard subset files as loaded FontFace sources, so Pretendard is the current UI-family token.
Font source and license: the webfont files are served from res.kurly.com; the typeface project publishes its license as SIL Open Font License 1.1. This establishes the reusable typeface license, not a Kurly-owned brand-font asset. Pretendard license
Declared-only: Noto Sans KR has declared source files in the artifact but no visible computed use. It is not promoted to the UI family. swiper-icons is likewise declared-only icon-font infrastructure.
System fallbacks: the computed family includes platform and system fallbacks after Pretendard. They remain fallbacks and are not presented as Kurly typography.

Observed hierarchy

Role	Size	Weight	Line height	Provenance
Utility/default	14px	400	14px	Repeated visible text and buttons in all captured product surfaces
Category tab, inactive	18px	400	23.94px	`home::[data-omd-capture="7"]` and matching `surface-3` control
Category tab, selected/hover/pressed	18px	500	23.94px	selected `data-omd-capture="6"`; hover/pressed state capture for `"7"`
Header navigation link	16px	500	20px	`home::[data-omd-capture="14"]` to `"19"` and the matching new-products links
Form input	16px	400	16px	all four input samples (`home` and `surface-3` capture 8, both error samples); letter-spacing -0.33px. Corrected 2026-09-29 from 20px, which no input sample records

Do not substitute Noto Sans KR or a system font and call it Kurly’s active UI family; the July capture directly corroborates Pretendard instead.

Layout

The supplied evidence is a 1440px desktop capture, not a responsive specification.
Repeated new-products article wrappers measure 249px wide; that observation does not establish a site-wide grid, column count, gutter, or breakpoint.
Keep product-list wrappers flat until a specific elevated/card treatment is observed on the relevant surface.

Responsive Behavior

No mobile viewport or responsive-state capture was supplied. Breakpoints, column changes, touch-target requirements, and mobile navigation are intentionally unspecified.

Elevation & Depth

The retained representative category tabs, repeated product-list controls, and product-list article wrappers all compute to box-shadow: none. No elevation scale, modal shadow, sticky-header shadow, or hover shadow is specified from this artifact.

Values kept in prose

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

shadow.none: none

Motion & Easing

No motion duration, easing curve, or transition was captured. The hover and pressed samples establish resulting computed styles for the category tab and the header navigation links only; they do not establish motion behavior.

Components

Category navigation

Category tab — inactive, selected, and observed interaction states

Text: #b5b5b5 inactive; #5f0080 selected
Radius: 0px
Font: 18px / 400 inactive; 18px / 500 selected
Hover: #5f0080 text at 18px / 500 on home::[data-omd-capture="7"]::state-hover
Pressed: #5f0080 text at 18px / 500 on home::[data-omd-capture="7"]::state-pressed
Use: Category control at home::[data-omd-capture="6"] / "7" and corresponding new-products controls; the selected tab is the active purple state.

Header navigation

Header navigation link — rest, hover, and pressed

Background: transparent
Text: #464c52
Border: 1px bottom border, transparent at rest
Radius: 0px
Height: 21px
Font: 16px / 500 / 20px Pretendard
Hover: text #5f0080, and the 1px bottom border turns #5f0080
Pressed: text #5f0080, bottom border #5f0080
Use: six links at home::[data-omd-capture="14"] through "19" and the same six on new-products; all twelve record the same rest, hover, and pressed values.

Form input

Captured input — default and error sample

Background: #ffffff
Text: #333333
Radius: 0px
Font: 16px / 400 / Pretendard
Error: Captured at home::[data-omd-interaction-capture="form-error-0-0"] and surface-3::[data-omd-interaction-capture="form-error-0-0"]; retained computed background, text, border, and radius matched the default sample.
Use: A captured form input only; focus, disabled, success, and validation-copy variants were not observed.

Product-list controls

Repeated list control — observed default

Background: #ffffff
Text: #333333
Border: 1px solid #dfe4eb
Radius: 4px
Font: 14px / 400 / Pretendard
Use: Repeated 249px by 36px button at surface-3::[data-omd-capture="148"]; default state only.
Home variant: home::[data-omd-capture="51"] (button.product-function) keeps the 249px × 36px size and 4px radius but computes a transparent fill, #222222 text, a 1px #dddddd border, and 16px / 400 / 29px type. It is recorded as a style variant, not a separate component.

Compact product-list control — observed default

Background: #f7f7f7
Text: #b5b5b5
Radius: 2px
Padding: 2px 0px 3px
Font: 13px / 400 / Pretendard
Use: Compact 22px control at surface-3::[data-omd-capture="60"]; default state only.

Outline button

Observed default

Background: transparent
Text: #333333
Border: 1px #e2e2e2
Radius: 3px
Size: 140px × 40px
Font: 14px / 400 / 39px Pretendard
Use: home::[data-omd-capture="92"]; the variant occurs four times across home and category-list. No pointer-state frame.

Product-list article

Article wrapper — observed default

Text: #333333
Radius: 0px
Font: 14px / 400 / Pretendard
Use: surface-3::article wrapper; representative sample is 249px wide. It has a transparent computed background, no border, no shadow, and no observed hover variant.

No filled purple purchase CTA, badge, modal, checkout control, product-card image treatment, or responsive variant is specified, and no interaction state beyond the category-tab and header-navigation hover/pressed frames and the form-input error sample: the supplied capture does not give that selector/state provenance. The bundle holds no focus frame for any Kurly element; this collector presses the mouse before it calls .focus(), so a focus frame from it would not be a keyboard focus-visible measurement in any case.

States

The collector recorded hover and pressed samples for one inactive category tab and for six header navigation links on each of two surfaces, and a form-input error sample. Corrected 2026-09-29: the July text said category-tab only; the header-link frames were in the same bundle. All other product states need direct surface evidence before specification.

Category	Evidence status
Default category tab	Inactive and selected values captured
Hover	Inactive category tab: `#b5b5b5` 18px/400 → `#5f0080` 18px/500. Header navigation links: `#464c52` → `#5f0080`, with the 1px bottom border turning from transparent to `#5f0080`
Pressed	The same values as hover, for both controls
Error	Captured for a form input; retained computed values matched the default sample
Empty	Not observed in the captured routes
Loading	Not observed in the captured routes
Success	Not observed in the captured routes
Skeleton	Not observed in the captured routes
Disabled	Not observed in the captured routes
Focus	No focus frame exists in the bundle; not specified

Do’s and Don’ts

Do

Use #5f0080 for the observed active category treatment, not as a presumed universal fill.
Use Pretendard where this reference needs the captured product-surface UI family.
Keep the observed new-products article wrapper flat unless another surface supplies a measured treatment.
Preserve the selector and state boundaries for category-tab and header-navigation hover/pressed and form-input error evidence.

Don’t

Don’t restore legacy purple ramps, cream fills, sale colors, filled purchase CTAs, or badges without current product-surface provenance.
Don’t turn declared-only Noto Sans KR or system fallbacks into Kurly’s UI-family token.
Don’t use corporate/newsroom brand narrative as an authority for commerce component geometry or color values.
Don’t invent responsive, checkout, modal, or additional form states from the three desktop captures.

Voice & Tone

Kurly’s first-party introduction frames the service around careful selection, delivery quality, price, customer care, and sustainable distribution. The official company profile names Something Better, tenacity, integrity, diversity, and sustainability as its values. This supports a practical, discriminating, and responsible voice in company material; it does not establish unobserved storefront microcopy rules.

Context	First-party-supported direction
Product selection	Explain the standard or quality rationale clearly.
Delivery	State timing and product-condition information plainly.
Producer/partner story	Credit the producer and describe the relevant value chain.
Sustainability	Describe the specific practice or impact rather than generic “eco” claims.

Official language samples.

Something Better — company value label.
나와 내 가족이 사고 싶은 상품을 판매합니다. — official service principle.
더 나은 삶을 위한 유통 혁신 — company-profile framing.

Agent Prompt Guide

“Create a captured Kurly category tab: inactive text #b5b5b5, selected text #5f0080; 18px Pretendard, 0px radius. The observed inactive tab becomes #5f0080 at 18px/500 on hover and pressed.”
“Create the observed new-products list control: white background, #333333 text, 1px #dfe4eb border, 4px radius, 14px/400 Pretendard. Do not add a hover state.”
“Create the captured Kurly header navigation link: #464c52 16px/500 Pretendard with a transparent 1px bottom border; on hover and press the text and that border turn #5f0080.”
“Use a flat, transparent product-list article wrapper with #333333 14px/400 Pretendard; do not infer a card background, shadow, or product-image treatment.”

Governance

Known Gaps

Contrast, header-nav-link. Text #464c52 on #00000000 measures 2.42:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
Contrast, compact-list-control. Text #b5b5b5 on #f7f7f7 measures 1.91:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
Contrast, outline-button. Text #333333 on #00000000 measures 1.66:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.

Palette

At a glance

Design System · Kurly (컬리 / 마켓컬리)