본문으로 건너뛰기
oh-my-design

당근 DESIGN.md

DESIGN.md

Design System Inspiration of Karrot (당근)

Overview

Visual Theme & Atmosphere

Karrot is a hyperlocal platform built around the idea that technology should make neighborhood relationships feel more human, not more anonymous. Its design keeps community content dominant through warm orange accents, calm neutrals, direct language, and light interface chrome. Two related but non-identical public surfaces express that identity: the current SEED v2 product system defines semantic Primary as carrot-500 (#ff6f0f), while the public Karrot marketing site renders its CTA orange as #ff6600. Keeping those values separate preserves both product-system truth and the recognizable warmth of the brand.

SEED is the canonical source for product-system colors, type roles, and component behavior. The public karrotmarket.com pages are evidence for the web font stack and the karrotmarket.com controls in §4 only; that host served an English-language surface in both captures (a US feed, Manhattan listings, on 2026-09-29), not the Korean daangn.com service. Both use warm neutrals, direct hierarchy, and restrained ornament so neighborhood content remains dominant.

Key Characteristics:

  • SEED semantic Primary: #ff6f0f; current marketing CTA: #ff6600
  • System-first web typography; Pretendard Variable is declared as a fallback but was not the computed first family in the inspected pages
  • Official SEED semantic roles backed by the open-source global.css
  • Components documented as behavior/state contracts, with marketing geometry kept surface-specific

Primary tasks

  • Scan many listings from your own neighborhood in one sitting
  • Switch the neighborhood whose listings you are looking at
  • Work out with a nearby seller where to hand the item over
  • Close a finished trade and leave the other person a manner rating
  • Share local information or ask neighbors for help

Brand Narrative

Karrot (당근, daangn) launched in 2015 in Pangyo, South Korea, founded by Kim Yong-hyun and Kim Jae-hyun — both former Kakao engineers who had watched the open-marketplace model (Korean e-commerce giants, nationwide shipping, anonymous counterparties) fail the one job users actually cared about: trust. Their founding bet was that secondhand transactions are not a logistics problem; they are a neighborhood problem. The first version of the app hard-capped transactions to a 6 km radius (later relaxed to 10 km in KR/JP, up to 50 km in North America), on the theory that if you can walk to the meeting, you can look the other person in the eye (Crunchbase, KED Global).

The product is built around that proximity constraint. Every listing surfaces the neighborhood name. Every match is geo-scoped. Every CTA assumes the buyer and seller will eventually stand in the same parking lot. The design language follows suit: a warm orange (#ff6600) that reads as a fresh carrot — not the corporate orange of enterprise dashboards, not the alarm orange of warnings — and no custom typeface, because the brand doesn't want a distinctive voice around user content; it wants user content to feel like the voice of the neighborhood itself. Series D $162M August 2021 at $2.7B valuation made Danggeun Market Inc. Korea's 13th unicorn (>1 trillion KRW). Earlier September 2019 raise: 40 billion KRW from Altos Ventures + Goodwater Capital (Silicon Valley). By early 2025 the company reports 40M+ cumulative registered users and 20M+ monthly active users across 1,400+ regions worldwide, with 227B KRW in cumulative funding (Crunchbase — Karrot Market, KED Global — Korea's top flea market $180M, about.daangn.com).

What Karrot refuses: the anonymity of nationwide marketplaces (eBay, Coupang), the impersonal aesthetics of enterprise commerce (data-heavy dashboards, filter-rich search UIs), and the gamified engagement loops of consumer social (streaks, badges, algorithmic feeds). The brand's mission, stated on its own corporate page, is "로컬의 모든 것을 연결해 동네의 숨은 가치를 기술로 깨우는" — connecting everything local, awakening hidden neighborhood value through technology (medium.com/daangn). Orange is the accent because the brand is supposed to feel like one warm thing in an otherwise neutral room.

Principles

  1. Orange is scarce, on purpose. #ff6600 appears only on the primary CTA, active states, and a small set of brand moments. It never decorates, never fills a hero background, never tints a shadow. UI implication: at most one orange element per viewport in the primary flow; if a design has two orange CTAs competing on one screen, one must demote to neutral-weak.
  2. System font, because content is the brand. No custom typeface. Pretendard on web, Apple SD Gothic Neo / system sans on native. The community's listings are the product; the UI's job is to disappear behind them. UI implication: never embed a branded webfont on Karrot-styled surfaces. If a heading needs weight, use weight 700, not a display face.
  3. Proximity is surfaced, always. Every listing, chat, and search result shows a neighborhood name. Distance is not a filter you have to remember to toggle — it's a default. UI implication: every card, row, or summary that represents user content must show the neighborhood (동 / neighborhood) as visible metadata, not hidden in a detail screen.
  4. Trust comes from calm, not from badges. No padlock icons in the main flow, no "Verified Seller" trophies, no red "FRAUD WARNING" banners on first paint. Trust is communicated through consistency, neutrality, and the user's ability to meet in person. UI implication: trust-and-safety copy lives in body-weight neutral text; reserve red and warning-iconography for actual errors, not ambient advisories.
  5. Everything on the 4px grid. The Seed Design system snaps all measurements to multiples of 4px. Off-grid values accrete into visual noise. UI implication: any padding, gap, or component height not in {4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64} must be justified in a comment or corrected.
  6. One accent. One system. One rhythm. No secondary brand hue exists. No "Karrot Blue" for utility, no "Karrot Green" for success-branded promo. Semantic colors (fg-critical, fg-informative, fg-positive) exist — but they are utility, not brand. UI implication: if a design introduces a second brand-scale color, it has drifted off-system; reject or re-scope to semantic.
  7. Dark mode is a remap, not an inversion. Semantic tokens point to different palette entries in dark mode; brand solid, critical, and informative are intentionally re-tuned rather than auto-computed. UI implication: never rely on filter: invert() or runtime HSL math. Every component reads from semantic tokens that already account for theme.
  8. Content-dense, chrome-light. Users scan many listings in one session — a listing card is closer to an SMS than to a Pinterest tile. UI implication: target 3–4 listings visible per mobile viewport; chrome (borders, shadows, decorative space) must not push that below 3.

Personas

These are official product and stakeholder contexts, not invented demographic personas.

  • A neighbor buying or selling nearby: needs location, distance, conversation, and handoff expectations to stay visible without marketplace-style complexity.
  • A local resident sharing information or help: needs plain community language and enough neighborhood context to judge relevance and trust.
  • A local business connecting with nearby customers: needs technology translated into familiar, human communication rather than enterprise marketing language.
  • A person entering a new neighborhood: needs recognizable local cues and low-pressure participation before the product asks for deeper commitment.

Colors

SEED v2 product semantics

  • Primary (#ff6f0f): --seed-semantic-color-primary, mapped to carrot-500.
  • Primary Hover / Pressed (#ff9e66): current light-theme state mapping.
  • Canvas (#ffffff): gray-00 and paper-default.
  • Background (#f2f3f6): gray-100 and paper-background.
  • Surface (#f7f8fa): gray-50 and paper-contents.
  • Foreground (#212124): gray-900 and ink-text.
  • Muted (#868b94): gray-600 and ink-text-low.
  • Hairline (#eaebee): gray-200 and divider-2.
  • Brand Tint (#fff5f0): carrot-50 and paper-accent.
  • Danger (#fa2314): red-600.
  • Accent / Info (#009ceb): blue-500.
  • Success (#1aa174): green-500.

Marketing web exception

  • Marketing CTA (#ff6600): computed background on both inspected Karrot public pages. Do not label it carrot-500 or substitute it for SEED Primary.
  • Marketing focus ring (#e14d00): outer ring of the keyboard focus on the header pills (0 0 0 2px #ffffff, 0 0 0 4px #e14d00) and the 2px focus ring of the search pill, measured 2026-09-29. It is neither SEED Primary nor the marketing CTA orange.

Typography

Font Family

  • Observed web UI: System. The computed first family was -apple-system across 420 visible elements.
  • Declared fallback: Pretendard Variable appeared in the stack and FontFace declarations but had no visible first-family usage in this capture.
  • Monospace: no canonical UI monospace claim; do not invent one.

Hierarchy

RoleFontSizeWeightLine HeightLetter SpacingNotes
H1System48px700135%0SEED semantic h1
H2System42px700135%0SEED semantic h2
H3System34px700135%0SEED semantic h3
Title 1 BoldSystem24px700135%0Section or chapter title
Body L1System16px400150%-0.02em on webLong-form body
Body L2System14px400150%-0.02em on webCompact body

Principles

  • Official SEED exposes regular and bold semantic weights; do not infer a broad custom weight scale.
  • Web tracking differs by role: headings remain neutral while body roles use narrow tracking.
  • The previous 26px maximum was an old snapshot and is no longer canonical.
Evidence classKarrot status
Official product-useSEED v2 defines product typography roles around platform/system families rather than a branded display face
Live surface-use-apple-system was the visible first family across the inspected Karrot marketing surfaces
Official distributed assetSEED design tokens and components are published openly; no separate public Karrot typeface asset is asserted
Declared-onlyPretendard Variable appeared in public stacks and FontFace declarations without visible first-family use in this capture
UnresolvedExact native-app runtime family resolution outside the published SEED semantic roles

Brand face, substitute, safe default

  • Brand face: none for the observed web UI, which resolves to the OS system family (first family -apple-system). SEED defines product roles around platform and system families, and Pretendard Variable is declared only.
  • Substitute: none chosen; there is no brand face to stand in for.
  • Safe default (not the brand face): none listed; the UI face is already a system stack.

Values kept in prose

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

  • typography.h1.lineHeight: 135%
  • typography.h2.lineHeight: 135%
  • typography.h3.lineHeight: 135%
  • typography.title.lineHeight: 135%
  • typography.body.lineHeight: 150%
  • typography.body-small.lineHeight: 150%

Layout

Spacing System

  • Base unit: 4px
  • Observed public-web clusters: 4px, 8px, 12px, 16px, and 64px
  • Treat larger marketing gaps as surface composition, not universal product tokens

Grid & Container

  • Marketing pages use responsive full-width sections and a centered content column.
  • SEED components define their own layout constraints; for example, Box Button keeps a 16px mobile edge inset.

Whitespace Philosophy

  • Keep content dominant and chrome quiet.
  • Use the observed 4/8/12/16 rhythm locally; do not extrapolate undocumented marketplace grid rules from the marketing site.

Border Radius Scale

  • Small: 6px, observed on a public CTA.
  • Medium: 8px, observed on a public CTA.
  • Full: 9999px, dominant public-web button geometry.
  • Component-specific radii from SEED must be taken from that component's current style page, not inferred from this marketing scale.

Responsive Behavior

Observed and documented behavior

  • Public marketing controls render as compact 36px pills in the header and larger 40–48px CTAs deeper in the page.
  • SEED Box Button documents five sizes and requires a 16px mobile edge inset.
  • SEED Tabs supports hug and fill; fill is limited to five stable top-level items, while hug is recommended for six or more or variable categories.
  • Text Field labels and descriptions may wrap; the input value itself remains one line and clips horizontally.

Elevation & Depth

The header controls on karrotmarket.com are flat at rest (box-shadow: none). Two measured exceptions are component-local: the search pill wrapper (two soft shadows plus a 2px ring, 2026-09-29) and the flag menu popover (an inset hairline plus two soft shadows, 2026-07-11). Keyboard focus on the header pills is also drawn with box-shadow. No universal shadow tokens are published in the canonical frontmatter until current component-style sources are captured claim by claim.

Motion & Easing

Durations (named, not raw milliseconds):

TokenValueUse
motion-instant0msToggle flips, checkbox state changes
motion-fast150msHover, focus, button press overlays, inline flash success
motion-standard250msThe default — card taps, tab switches, bottom-sheet reveals
motion-slow350msEmphasized transitions — full-sheet presentations, success screens
motion-page300msNative-style push/pop between routes

Measured on the web (2026-09-29): the karrotmarket.com header pills transition background-color, box-shadow, border-color, color, transform over 0.2s with cubic-bezier(0.4, 0, 0.2, 1).

Easings:

TokenCurveUse
ease-entercubic-bezier(0.0, 0.0, 0.2, 1)Sheets, toasts, screen pushes appearing
ease-exitcubic-bezier(0.4, 0.0, 1, 1)Dismissals, pops, toast auto-close
ease-standardcubic-bezier(0.4, 0.0, 0.2, 1)Two-way transitions — expandable cards, tab content

Spring stance. Spring and overshoot easings are forbidden across Karrot surfaces. The brand is a neighborhood marketplace between strangers; playful bounce undermines the calm trust the rest of the system works to establish. Money and goods change hands on this app — a button that wobbles on press reads as toy-like, and a success card that springs in reads as celebratory in a way Karrot deliberately isn't. The one licensed exception is the native-platform pull-to-refresh indicator, which inherits the OS's default spring because overriding it would feel more jarring than accepting it. Every other motion uses ease-enter, ease-exit, or ease-standard.

Signature motions.

  1. Listing-card tap. Card compresses to 98% scale on press (motion-fast / ease-standard), releases on tap-up before navigation begins. Feedback is immediate; the route transition follows on motion-page / ease-enter. On the karrotmarket.com web card no press compression was observed: pressed only keeps the hover image zoom (scale 1.05, 2026-09-29).
  2. Bottom-sheet presentation. Sheets rise from y+40px with motion-standard / ease-enter and a synchronized backdrop fade from rgba(0,0,0,0) to rgba(0,0,0,0.5) (bg-overlay-muted). Dismissal uses motion-fast / ease-exit — leaving is lighter than entering.
  3. Neighborhood switch. When the user changes their 동 (neighborhood), the listings feed cross-fades over motion-slow rather than sliding — sliding would imply geographic direction, which is misleading (Korean neighborhoods aren't ordered on an axis).
  4. Reduce motion. Under prefers-reduced-motion: reduce, all motion-* tokens collapse to motion-instant. No exceptions. Cross-fades replace slides. Pull-to-refresh indicator simplifies to a static spinner. The app stays fully usable; just less kinetic.
  • The 6 km / 10 km / 50 km radius progression is widely reported in press (KED Global, Crunchbase, TechCrunch 2020/2021). Current product-level radius may differ; verify before using as a design constraint.

Not independently verified — widely documented public facts:

  • Karrot (Danggeun Market Inc.) founded 2015 in Pangyo by Kim Yong-hyun and Kim Jae-hyun, both formerly at Kakao Corp.
  • Korean "동네" (neighborhood / dong) is a real administrative unit; the characterization of nationwide Korean e-commerce incumbents is general industry knowledge, not a sourced Karrot statement.

Personas (§13) are fictional archetypes informed by publicly described Karrot user segments (KR urban young adult, KR secondary-city student, NA expat, KR retiree 동네생활 user). Any resemblance to specific individuals is unintended.

Interpretive claims (editorial, not documented Karrot statements):

  • "Orange is the accent because the brand is supposed to feel like one warm thing in an otherwise neutral room" (§11 closing) — editorial reading of the design, not a sourced brand statement.
  • The characterization of the Karrot orange as "fresh carrot, not corporate orange, not alarm orange" (§11) — editorial framing based on observed usage.
  • The spring-forbidden stance (§15) — derived from the overall brand posture (trust between strangers, calm neutrality) as expressed in base §6 Shadow Philosophy and §7 Do's/Don'ts; not a documented Seed Design rule. -->

Verified: 2026-07-11 (CAP0 evidence v1 + SEED v2 source reconciliation) Tier 1 sources: https://www.karrotmarket.com/ (marketing live DOM); https://www.karrotmarket.com/about/ (second public surface); https://v2.seed-design.io/foundation/color/palette/ and https://v2.seed-design.io/foundation/typography/ (official SEED); https://github.com/daangn/seed-design/blob/fb4459e90f84e049112395964319b163f980b821/packages/stylesheet/global.css (official token source). Tier 2 sources: https://getdesign.md/karrot and https://styles.refero.design/?q=Karrot were attempted; neither yielded an importable Karrot claim in this run. Tier 2 (Philosophy/founders): Crunchbase (Karrot + Kim Jae-hyun + Kim Yong-hyun profiles), KED Global ($180M unicorn 2021), Korea Herald (Canada 2M), ZoomInfo (HQ Gangnam), KoreaTechDesk. Style ref: toss (KR neighbor tone, retained). Conflicts unresolved: none Resolved drift: current SEED product Primary is #ff6f0f; current marketing-web CTA #ff6600 is retained as a separate surface token. The prior 26px maximum and exact Pretendard/SF Mono claims were removed.

Components

Marketing Web

These controls are measured on https://www.karrotmarket.com/, which served an English-language surface in both captures (a US feed, Manhattan listings, on 2026-09-29). Rest values of the header pills, flag menu, location chip, search input and keyword links come from the 2026-07-11 capture. The search wrapper, the listing card and the text links, and every hover, pressed and keyboard-focus value dated 2026-09-29, come from a targeted live probe with :hover, :active and :focus-visible confirmed. Nothing here is measured on the Korean daangn.com service.

Primary CTA

  • Background: #ff6600
  • Text: #ffffff
  • Radius: 9999px
  • Padding: 4px 12px
  • Height: 36px
  • Font: 14px / 500 / System
  • Hover: a white ::before overlay at opacity 0.08; the background stays #ff6600
  • Pressed: the same overlay at opacity 0.12
  • Focus (keyboard): box-shadow ring 0 0 0 2px #ffffff, 0 0 0 4px #e14d00, outline none
  • States: default observed on two public surfaces (2026-07-11); hover, pressed and keyboard focus measured 2026-09-29. The 2026-07-11 capture holds no state frame for this button, and its style dump records no pseudo-elements, so it could not have seen the overlay; the background colour itself never changes.
  • Use: Header-level marketing action

Outlined Pill (About us)

  • Background: transparent
  • Text: #1a1c20
  • Border: 1px solid rgba(26, 28, 32, 0.118)
  • Radius: 9999px
  • Padding: 3px 11px
  • Height: 36px
  • Font: 14px / 500 / 20px
  • Hover / Pressed: #eeeff1 ::before overlay at opacity 0.24 / 0.36 (2026-09-29)
  • Focus (keyboard): the same #ffffff + #e14d00 ring as the primary CTA (2026-09-29)

Ghost Pill (Sign In)

  • Background: transparent
  • Text: #1a1c20
  • Radius: 9999px
  • Padding: 4px 12px
  • Height: 36px
  • Font: 14px / 500 / 20px
  • States: rest only; no state was sampled

Flag Menu

  • Button: 40px circle, transparent, 1px solid rgba(26, 28, 32, 0.118), #1a1c20; hover and pressed fill #f3f4f5; opens the menu
  • Menu: #ffffff, 8px radius, 4px padding, 219 × 80px, shadow rgba(26, 28, 32, 0.08) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.05) 0px 5px 10px 0px, rgba(0, 0, 0, 0.07) 0px 15px 25px 0px
  • Menu item: 211 × 36px, 6px radius, #1a1c20 14px / 400 / 20px
  • Focus was not recorded for any of the three

Search Pill

  • Wrapper: #ffffff, 9999px radius, 60px tall, shadow rgba(0, 0, 0, 0.05) 0px 5px 10px 0px, rgba(0, 0, 0, 0.07) 0px 15px 25px 0px plus a 2px #1a1c20 ring
  • Input: #2a3038, 18px / 400 / 20px
  • Hover: no change. Pressed (mouse-down focuses the field) and keyboard focus: the wrapper ring turns #e14d00, still 2px (2026-09-29). The input keeps outline: none, so the indicator exists only on the wrapper.
  • Location chip inside the pill: transparent, #1a1c20 14px / 500 / 16.8px, 25px tall, padding 4px 8px, 9999px radius; hover and pressed fill #f3f4f5
  • Keyword links under the pill: #1a1c20 16px / 400 / 24px text links, rest only

Listing Card (home feed)

  • Transparent 187 × 255px link; title label #2a3038 16px / 700
  • Hover and pressed: the image scales to 1.05; nothing recolours (2026-09-29)
  • Focus: the browser default ring only, which is not a Karrot style and is not tokenized

Text Links

  • Footer link (About Karrot): label #555d6d 16px / 400; hover and pressed underline; focus shows the browser default ring only
  • Category link (Furniture): label #1a1c20 16px / 500; hover and pressed fade in a #eeeff1 overlay on the label span (::before, 99.4 × 48px) from opacity 0 to 0.32 (hover) and 0.48 (pressed), the About us overlay at higher opacities, while the label colour stays; focus shows the browser default ring only (2026-09-29)
  • Both anchors compute #2a3038 14px / 400; the visible label is the child element, and its style is the one given here

SEED Product Components

Box Button

  • States: primary, primary-low, secondary, danger, disabled, hover, keyboard
  • Use: Action component with xsmall through xlarge sizes; medium is the documented default

Text Field

  • States: outlined, underlined, focused, disabled, readonly, required, invalid
  • Use: Single-line form input with label, description, error message, and optional prefix/suffix

Tabs

  • States: selected, disabled, focus
  • Use: Hug or fill category navigation with a current-selection indicator

Snackbar

  • States: default, success, warning, action focus
  • Use: Brief action feedback with at most one related action

Published component roster (34 published, none measured here)

SEED Design publishes 34 components, read from its own index at https://v2.seed-design.io/component/ on 2026-09-19. Every host in this group serves a shell to a plain fetch, so the names come from the rendered page in a browser. No value, state or geometry below is asserted by this reference.

Action Sheet, Alert Dialog, Avatar, Avatar Group, Bottom Sheet, Box Button, Box Toggle Button, Capsule Toggle Button, Text Button, Actionable Callout, Callout, Dismissable Callout, Checkbox, Chip Button, Chip Filter, Chip Radio Group, Chip Toggle Button, Extended Floating Action Button, Floating Action Button, Menu Floating Action Button, Help Bubble, Actionable Inline Alert, Dismissable Inline Alert, Inline Alert, Radio Group, Select Box, Range Slider, Slider, Snackbar, Spinner, Switch, Tabs, Multiline Text Field, Text Field

The host groups variants under a shared heading — Buttons, Callouts, Chips, FABs, Inline Alerts, Sliders, Text Fields — and each variant above is its own documented component.

States

StateTreatment
Empty (no listings nearby)Warm one-line explanation (아직 우리 동네에 올라온 물건이 없어요) + one secondary CTA in neutral-weak (내 동네 바꾸기 / change neighborhood). Never an illustration. Never 데이터가 없습니다.
Empty (filter cleared)Single line of gray-700 caption (조건에 맞는 물건이 없어요). No button — user resets the filter themselves.
Empty (new user, first paint)Single welcome sentence naming the user's detected neighborhood, plus a primary CTA 둘러보기 (browse) in Karrot Orange. No onboarding carousel.
Loading (first paint)Skeleton blocks at gray-200 matching the final listing-card layout — 1:1 thumbnail box, two text lines, one metadata line. Shimmer at 1.2s with 8% white highlight.
Loading (infinite scroll)Bottom-of-list spinner in Karrot Orange, 24px diameter. No overlay. Existing cards stay visible.
Loading (refresh / pull-to-refresh)Pull-down reveals a carrot-glyph progress indicator in Karrot Orange; never a generic iOS spinner on branded surfaces.
Error (inline field)Input border becomes #fa342c (red-700) 2px, helper text below in red-700 13px. One actionable sentence (동네를 다시 선택해 주세요).
Error (toast)#1a1c20 (gray-1000) background, white 14px weight 400 text, 3s auto-dismiss. Bottom of screen with 16px inset above the tab bar. One sentence. No icon.
Error (network / server-blocking)Full-screen centered message in gray-1000 16px weight 600, gray-800 14px weight 400 subline, retry button in Karrot Orange. No illustration.
Success (inline flash)Brief 300ms flash of #fff2ec (carrot-100) behind the updated element, fading back to default. For routine confirmations (favorited, saved search).
Success (transaction complete)Dedicated confirmation screen — not a toast. #079171 (positive green) check icon top-center, one-line past-tense sentence (거래가 완료되었어요), and a single primary button 매너 평가 남기기 (leave manner rating).
Skeletongray-200 blocks at exact final dimensions matching the listing-card layout (1:1 thumbnail, two text lines, one metadata line). Shimmer 1.2s with 8% white highlight. Never over the neighborhood-name metadata — that slot stays blank until resolved, so the UI never implies a location that hasn't been confirmed.
DisabledButton background drops to gray-200, text to gray-500. No color inversion. Geometry stays identical so re-enable is frame-stable.

Measured interaction states — karrotmarket.com

ControlHoverPressedKeyboard focusEvidence
Sell (primary pill)#ffffff overlay 0.08overlay 0.12#ffffff 2px + #e14d00 ring2026-09-29 probe
About us (outlined pill)#eeeff1 overlay 0.24overlay 0.36same ring2026-09-29 probe
Search pillno changewrapper ring #e14d00 (mouse focus)wrapper ring #e14d002026-09-29 probe
Listing cardimage scale 1.05image scale 1.05browser default only2026-09-29 probe
Footer linkunderlineunderlinebrowser default only2026-09-29 probe
Category link#eeeff1 overlay 0.32 (label span)overlay 0.48browser default only2026-09-29 probe
Flag button, location chipfill #f3f4f5fill #f3f4f5not recorded2026-07-11 capture

Do's and Don'ts

Do

  • Use SEED Primary #ff6f0f for product-system work.
  • Use the system font result unless a target product surface proves another first family.
  • Follow each SEED component's documented states and accessibility behavior.
  • Keep marketing #ff6600 explicitly scoped to the observed public website.

Don't

  • Don't relabel marketing #ff6600 as SEED carrot-500.
  • Don't treat a declared Pretendard face as proof of visible use.
  • Don't reuse the retired 26px maximum; current SEED heading roles reach 48px.
  • Don't turn the karrotmarket.com listing card into native-app cards or sheets; it is a measured web-feed component, and native-app geometry remains unmeasured.
  • Don't read the browser's default focus ring on the listing card, footer link and category link as a Karrot focus style; those three controls have no authored focus style.

Voice & Tone

Karrot speaks like a trustworthy neighbor who just moved in next door: warm, plain-spoken, low-friction, and allergic to anything that sounds like corporate marketing. The voice assumes two strangers are about to hand each other a used crib across a parking lot — it protects that trust with earnestness, removes barriers with 부담 없이 (without burden) framing, and stays in everyday Korean sentence endings (-어요, -예요) rather than the formal -ㅂ니다. English surfaces (Karrot in US/Canada/UK/JP) mirror this in plain, contraction-friendly English — "Buy and sell for free with locals", not "Discover premium local marketplace experiences".

ContextTone
CTAsShort verb-first Korean (판매하기, 채팅하기, 거래 완료) / plain imperative English (Sell, Chat, Apply)
Empty statesOne warm line explaining why it's empty + one low-pressure suggestion. Never 데이터가 없습니다.
Error messagesSpecific, blameless, actionable. Prefer 다시 시도해 주세요 over 오류가 발생했습니다.
Success toastsPast-tense single sentence (거래가 완료되었어요). Quiet, not celebratory.
Community guidelinesSecond-person, direct, grounded in neighborhood norms. Reads like a house rule, not a ToS.
Trust & safetyCalm, factual, never fearmongering. The goal is to keep people transacting, not to scare them off.
Local / hyperlocal copyAlways name the neighborhood (강남구 역삼동, Manhattan). Proximity is the brand — surface it.
OnboardingOne screen, one idea, one action. No bullet lists. No feature tours.

Forbidden phrases. 불편을 드려 죄송합니다, 죄송하지만, 데이터가 없습니다, 오류가 발생했습니다, 혁신적인, English boilerplate like Oops, something went wrong or We apologize for the inconvenience. Marketing-speak bans: amazing deals, best-in-class, revolutionary, world-class. Emoji are permitted sparingly in community chat and stickers, but never in error messages, never in trust/safety copy, and never in financial/payment confirmations.

Voice samples.

  • Buy and sell for free with locals — homepage hero, English.
  • Welcome to your new neighborhood buy & sell — homepage sub-hero.
  • It's easier in the apps / Download the Karrot app — app-install nudge.
  • 동네를 여는 문, 당근 — brand narrative tagline (corporate site).
  • 로컬의 모든 것을 연결해, 동네의 숨은 가치를 깨워요 — mission statement.
  • <neighborhood>에서 <product>을(를) 찾고 있어요 — illustrative search/wanted-listing pattern (variable placeholders).
  • 이 거래, 직접 만나서 할까요? — illustrative in-chat nudge for face-to-face meeting (hyperlocal behavior).

Agent Prompt Guide

Quick Color Reference

  • Product Primary: #ff6f0f
  • Product Hover / Pressed: #ff9e66
  • Marketing CTA only: #ff6600
  • Canvas: #ffffff; Background: #f2f3f6; Surface: #f7f8fa
  • Foreground: #212124; Muted: #868b94; Hairline: #eaebee
  • Danger: #fa2314; Accent: #009ceb; Success: #1aa174

Example Component Prompts

  • "Build a SEED primary action using semantic Primary #ff6f0f; use the Box Button's documented size and state contract rather than inventing geometry."
  • "Build a Karrot marketing header CTA with observed #ff6600, white text, 14px/500 System type, 36px height, and full-pill radius."
  • "Create a SEED text field with outlined and underlined variants, explicit label, error message, focused, readonly, required, invalid, and disabled states."

Iteration Guide

  1. Choose the target surface first: SEED product system or Karrot marketing web.
  2. Keep #ff6f0f and #ff6600 distinct.
  3. Start with System typography; Pretendard remains a fallback until target-surface use is proved.
  4. Use only the 4/8/12/16/64 spacing observations as canonical shared values.
  5. Source component behavior from the current SEED page for that component.

Governance

Known Gaps

  • Contrast, marketing-primary. Text #ffffff on #ff6600 measures 2.94:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
  • Contrast, box-button. Text #ffffff on #ff6f0f measures 2.79:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
  • Contrast, marketing-secondary. Text #1a1c20 on #00000000 measures 1.23:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
  • Contrast, marketing-ghost. Text #1a1c20 on #00000000 measures 1.23:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
  • Contrast, flag-menu-button. Text #1a1c20 on #00000000 measures 1.23:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
  • Contrast, flag-menu-item. Text #1a1c20 on #00000000 measures 1.23:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
  • Contrast, location-chip. Text #1a1c20 on #00000000 measures 1.23:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
  • Contrast, listing-card. Text #2a3038 on #00000000 measures 1.58:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
  • Contrast, footer-link. Text #555d6d on #00000000 measures 3.17:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
  • Contrast, category-link. Text #1a1c20 on #00000000 measures 1.23:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
  • Contrast, search-keyword-link. Text #1a1c20 on #00000000 measures 1.23:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.

색상

브랜드

면과 글자

상태

그 밖의 색

타이포그래피

  • System UI stack산세리프 · 시스템 글꼴

타입 스케일

  1. h148px, 행간 135%, 굵기 700
    The quick brown fox jumps over the lazy dog
  2. h242px, 행간 135%, 굵기 700
    The quick brown fox jumps over the lazy dog
  3. h334px, 행간 135%, 굵기 700
    The quick brown fox jumps over the lazy dog
  4. title24px, 행간 135%, 굵기 700
    The quick brown fox jumps over the lazy dog
  5. body16px, 행간 150%, 굵기 400
    The quick brown fox jumps over the lazy dog
  6. body-small14px, 행간 150%, 굵기 400
    The quick brown fox jumps over the lazy dog

여백과 모양

여백

  • sm4px
  • md8px
  • lg12px
  • xl16px
  • section64px

모서리 반경

  • sm6px
  • md8px
  • full9999px

컴포넌트

  • marketing-primary
    marketing-primary채움 #ff6600 · 글자 #ffffff · 반경 9999px · 높이 36px · 안쪽 여백 4px 12px · 글자 크기·굵기 14px / 500
    • 호버 overlay #ffffff at 0.08 via ::before; bg stays #ff6600
    • 누름 overlay #ffffff at 0.12 via ::before; bg stays #ff6600
    • 포커스 ring 0 0 0 2px #ffffff, 0 0 0 4px #e14d00

    기록된 상태 default on two public surfaces (2026-07-11); hover, pressed and keyboard focus-visible measured 2026-09-29 with :hover, :active and :focus-visible matched; the fill never changes, so a background-only reading sees no change (corrected 2026-09-29: earlier text said hover not captured)

  • marketing-secondary
    marketing-secondary채움 transparent · 글자 #1a1c20 · 테두리 1px solid rgba · 반경 9999px · 높이 36px · 안쪽 여백 3px 11px · 글자 크기·굵기 14px / 500 / 20px
    • 호버 overlay #eeeff1 at 0.24 via ::before
    • 누름 overlay #eeeff1 at 0.36 via ::before
    • 포커스 ring 0 0 0 2px #ffffff, 0 0 0 4px #e14d00

    기록된 상태 rest on both public surfaces in the 2026-07-11 capture and unchanged on 2026-09-29; hover, pressed and keyboard focus-visible measured 2026-09-29 with :hover, :active and :focus-visible matched; the fill stays transparent while a #eeeff1 ::before overlay carries hover and pressed; focus is a box-shadow ring with outline none

  • flag-menu-button
    flag-menu-button채움 transparent · 글자 #1a1c20 · 테두리 1px solid rgba · 반경 9999px · 글자 크기·굵기 14px / 400 / 14px
    • 호버 bg #f3f4f5
    • 누름 bg #f3f4f5

    기록된 상태 rest, hover and pressed sampled on the home surface (2026-07-11): hover and pressed both fill #f3f4f5, the value the location chip also records; the about-page capture caught this control already at #f3f4f5, so rest is taken from home; opens a two-item menu (dialog-open); focus not sampled, and the control was not re-probed on 2026-09-29

  • search-field채움 #ffffff · 글자 #2a3038 · 반경 9999px · 높이 60px · 글자 크기·굵기 18px / 400 / 20px
    • 호버 ring 0 0 0 2px #1a1c20 (unchanged)
    • 누름 ring 0 0 0 2px #e14d00 (mouse-down focuses the field)
    • 포커스 ring 0 0 0 2px #e14d00

    기록된 상태 rest, hover, pressed and keyboard focus-visible measured 2026-09-29 with :hover, :active and :focus-visible matched; bg, radius, height and shadow belong to the 60px wrapper that carries the ring, fg and font to the input, whose values the 2026-07-11 capture records identically; hover changes nothing; pressed is the mouse-focus ring, not a separate :active style; the input itself keeps outline none

  • flag-menu채움 #ffffff · 글자 #1a1c20 · 반경 8px · 안쪽 여백 4px · 글자 크기·굵기 14px / 400 / 20px

    기록된 상태 dialog-open observed on both public surfaces (2026-07-11)