당근 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 Variableis 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
- Orange is scarce, on purpose.
#ff6600appears 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. - 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.
- 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. - 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.
- 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. - 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. - 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. - 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 andpaper-default. - Background (
#f2f3f6): gray-100 andpaper-background. - Surface (
#f7f8fa): gray-50 andpaper-contents. - Foreground (
#212124): gray-900 andink-text. - Muted (
#868b94): gray-600 andink-text-low. - Hairline (
#eaebee): gray-200 anddivider-2. - Brand Tint (
#fff5f0): carrot-50 andpaper-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-systemacross 420 visible elements. - Declared fallback:
Pretendard Variableappeared 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
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| H1 | System | 48px | 700 | 135% | 0 | SEED semantic h1 |
| H2 | System | 42px | 700 | 135% | 0 | SEED semantic h2 |
| H3 | System | 34px | 700 | 135% | 0 | SEED semantic h3 |
| Title 1 Bold | System | 24px | 700 | 135% | 0 | Section or chapter title |
| Body L1 | System | 16px | 400 | 150% | -0.02em on web | Long-form body |
| Body L2 | System | 14px | 400 | 150% | -0.02em on web | Compact 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 class | Karrot status |
|---|---|
| Official product-use | SEED 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 asset | SEED design tokens and components are published openly; no separate public Karrot typeface asset is asserted |
| Declared-only | Pretendard Variable appeared in public stacks and FontFace declarations without visible first-family use in this capture |
| Unresolved | Exact 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
hugandfill; 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):
| Token | Value | Use |
|---|---|---|
motion-instant | 0ms | Toggle flips, checkbox state changes |
motion-fast | 150ms | Hover, focus, button press overlays, inline flash success |
motion-standard | 250ms | The default — card taps, tab switches, bottom-sheet reveals |
motion-slow | 350ms | Emphasized transitions — full-sheet presentations, success screens |
motion-page | 300ms | Native-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:
| Token | Curve | Use |
|---|---|---|
ease-enter | cubic-bezier(0.0, 0.0, 0.2, 1) | Sheets, toasts, screen pushes appearing |
ease-exit | cubic-bezier(0.4, 0.0, 1, 1) | Dismissals, pops, toast auto-close |
ease-standard | cubic-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.
- 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 onmotion-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). - Bottom-sheet presentation. Sheets rise from
y+40pxwithmotion-standard / ease-enterand a synchronized backdrop fade fromrgba(0,0,0,0)torgba(0,0,0,0.5)(bg-overlay-muted). Dismissal usesmotion-fast / ease-exit— leaving is lighter than entering. - Neighborhood switch. When the user changes their 동 (neighborhood), the listings feed cross-fades over
motion-slowrather than sliding — sliding would imply geographic direction, which is misleading (Korean neighborhoods aren't ordered on an axis). - Reduce motion. Under
prefers-reduced-motion: reduce, allmotion-*tokens collapse tomotion-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
::beforeoverlay 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::beforeoverlay at opacity 0.24 / 0.36 (2026-09-29) - Focus (keyboard): the same
#ffffff+#e14d00ring 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, shadowrgba(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,
#1a1c2014px / 400 / 20px - Focus was not recorded for any of the three
Search Pill
- Wrapper:
#ffffff, 9999px radius, 60px tall, shadowrgba(0, 0, 0, 0.05) 0px 5px 10px 0px, rgba(0, 0, 0, 0.07) 0px 15px 25px 0pxplus a 2px#1a1c20ring - 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 keepsoutline: none, so the indicator exists only on the wrapper. - Location chip inside the pill: transparent,
#1a1c2014px / 500 / 16.8px, 25px tall, padding 4px 8px, 9999px radius; hover and pressed fill#f3f4f5 - Keyword links under the pill:
#1a1c2016px / 400 / 24px text links, rest only
Listing Card (home feed)
- Transparent 187 × 255px link; title label
#2a303816px / 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
#555d6d16px / 400; hover and pressed underline; focus shows the browser default ring only - Category link (Furniture): label
#1a1c2016px / 500; hover and pressed fade in a#eeeff1overlay 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
#2a303814px / 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
| State | Treatment |
|---|---|
| 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). |
| Skeleton | gray-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. |
| Disabled | Button 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
| Control | Hover | Pressed | Keyboard focus | Evidence |
|---|---|---|---|---|
| Sell (primary pill) | #ffffff overlay 0.08 | overlay 0.12 | #ffffff 2px + #e14d00 ring | 2026-09-29 probe |
| About us (outlined pill) | #eeeff1 overlay 0.24 | overlay 0.36 | same ring | 2026-09-29 probe |
| Search pill | no change | wrapper ring #e14d00 (mouse focus) | wrapper ring #e14d00 | 2026-09-29 probe |
| Listing card | image scale 1.05 | image scale 1.05 | browser default only | 2026-09-29 probe |
| Footer link | underline | underline | browser default only | 2026-09-29 probe |
| Category link | #eeeff1 overlay 0.32 (label span) | overlay 0.48 | browser default only | 2026-09-29 probe |
| Flag button, location chip | fill #f3f4f5 | fill #f3f4f5 | not recorded | 2026-07-11 capture |
Do's and Don'ts
Do
- Use SEED Primary
#ff6f0ffor 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
#ff6600explicitly scoped to the observed public website.
Don't
- Don't relabel marketing
#ff6600as 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".
| Context | Tone |
|---|---|
| CTAs | Short verb-first Korean (판매하기, 채팅하기, 거래 완료) / plain imperative English (Sell, Chat, Apply) |
| Empty states | One warm line explaining why it's empty + one low-pressure suggestion. Never 데이터가 없습니다. |
| Error messages | Specific, blameless, actionable. Prefer 다시 시도해 주세요 over 오류가 발생했습니다. |
| Success toasts | Past-tense single sentence (거래가 완료되었어요). Quiet, not celebratory. |
| Community guidelines | Second-person, direct, grounded in neighborhood norms. Reads like a house rule, not a ToS. |
| Trust & safety | Calm, factual, never fearmongering. The goal is to keep people transacting, not to scare them off. |
| Local / hyperlocal copy | Always name the neighborhood (강남구 역삼동, Manhattan). Proximity is the brand — surface it. |
| Onboarding | One 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
- Choose the target surface first: SEED product system or Karrot marketing web.
- Keep
#ff6f0fand#ff6600distinct. - Start with System typography; Pretendard remains a fallback until target-surface use is proved.
- Use only the 4/8/12/16/64 spacing observations as canonical shared values.
- Source component behavior from the current SEED page for that component.
Governance
Known Gaps
- Contrast,
marketing-primary. Text#ffffffon#ff6600measures 2.94:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted. - Contrast,
box-button. Text#ffffffon#ff6f0fmeasures 2.79:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted. - Contrast,
marketing-secondary. Text#1a1c20on#00000000measures 1.23:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted. - Contrast,
marketing-ghost. Text#1a1c20on#00000000measures 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#1a1c20on#00000000measures 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#1a1c20on#00000000measures 1.23:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted. - Contrast,
location-chip. Text#1a1c20on#00000000measures 1.23:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted. - Contrast,
listing-card. Text#2a3038on#00000000measures 1.58:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted. - Contrast,
footer-link. Text#555d6don#00000000measures 3.17:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted. - Contrast,
category-link. Text#1a1c20on#00000000measures 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#1a1c20on#00000000measures 1.23:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
색상
브랜드
면과 글자
상태
그 밖의 색
타이포그래피
- System UI stack산세리프 · 시스템 글꼴
타입 스케일
- h148px, 행간 135%, 굵기 700The quick brown fox jumps over the lazy dog
- h242px, 행간 135%, 굵기 700The quick brown fox jumps over the lazy dog
- h334px, 행간 135%, 굵기 700The quick brown fox jumps over the lazy dog
- title24px, 행간 135%, 굵기 700The quick brown fox jumps over the lazy dog
- body16px, 행간 150%, 굵기 400The quick brown fox jumps over the lazy dog
- body-small14px, 행간 150%, 굵기 400The quick brown fox jumps over the lazy dog
여백과 모양
여백
- sm4px
- md8px
- lg12px
- xl16px
- section64px
모서리 반경
- sm6px
- md8px
- full9999px
컴포넌트
- marketing-primarymarketing-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-secondarymarketing-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-buttonflag-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)