당근 SEED dark mode
당신 근처의 지역 생활 커뮤니티

동네의 거래와 이야기를 가볍게 연결하는 화면.

당근의 제품 표면은 흰 배경, 선명한 행 구조, 제한적인 주황 CTA, 동네 맥락의 짧은 문장으로 구성된다. SEED 토큰은 이 표면을 재사용 가능한 컴포넌트 언어로 정리한다.

중고거래동네 이웃과 가깝고 따뜻한 거래 ↗ 동네생활동네 실시간 소식과 질문 ↗ 동네가게내 근처 가게와 소상공인 ↗ 알바걸어서 갈 수 있는 동네 일자리 ↗
홈 역삼동

오늘 역삼동에 올라온 소식

가까운 이웃과 바로 거래해요.

＋판매 ⌕검색 □동네 ○알바
중고거래 동네생활 내 근처
⌕ 무엇을 찾고 계신가요?
유아 원목 책상 역삼1동 · 2분 전 18,000원

이웃들이 보고 있어요

유아 원목 책상 역삼1동 · 2분 전 18,000원 관심 12 · 채팅 3
캠핑 의자 두 개 대치4동 · 8분 전 나눔 관심 34 · 채팅 9
+ 글쓰기
상품 상세 역삼1동
당근이웃역삼동 · 매너 좋은 이웃 36.8°C

상태 좋은 캠핑 의자 가져가세요

생활/가공식품 · 끌올 3분 전
12,000원
거래 장소역삼역 4번 출구 응답 속도보통 5분 이내 관심/채팅34 · 9

동네에서 바로 거래할 수 있어요. 채팅으로 약속을 잡고, 만나기 좋은 장소를 정해요.

♡ 채팅하기
01 / Components

SEED 컴포넌트는 당근 제품의 실제 흐름 위에서 보여야 한다.

Action Button, List, Top Navigation, Bottom Sheet, Text Field, Manner Temp에 더해 상태, 입력, 로딩, 결과, 오버레이 컴포넌트를 앱 표면의 우선순위에 맞춰 배치했다. Brand 컬러는 핵심 연결 액션에만 사용한다.

Top Navigation root / standard

글쓰기중고거래
역삼동우리 동네 소식

Action Button hierarchy

채팅하기 예약하기 가격 제안 단골맺기 닫기 신고하기 더보기 완료됨

List Item prefix / title / detail / suffix

새 알림이 있어요관심 목록 상품 가격이 내려갔어요. ›
동네생활 댓글이웃이 답변을 남겼어요. ›
거래 약속오늘 오후 6시, 선릉역 1번 출구 ›

Bottom Sheet floating layer

거래 방법을 선택해 주세요

현재 화면 맥락은 유지하면서 필요한 액션만 하단 레이어에 모읍니다.

직거래 약속 잡기 › 가격 제안 보내기 › 관심 목록에 저장 +

Text Field enabled / error

필수 입력 항목입니다.

Manner Temp trust signal

매너온도 36.8°C
친절해요 시간 약속을 잘 지켜요 응답이 빨라요

Status & Notification badge / banner / snackbar

Page Banner
Badge 안전결제 신고됨 채팅3
? 가격 제안은 한 번 더 확인해요Callout은 화면 안에서 맥락을 끊지 않는 안내에 사용합니다.
관심 목록에 저장했어요5초 뒤 자동으로 사라지는 하단 피드백 보기

Selection Controls tabs / switch / input

인기순 최신순 가까운순
거래 동네생활 알바 가게
거래 가능 상품만 보기
가격 제안 허용 ✓
직거래 우선 •
역삼동 반경 3km ⌄

Loading & Result skeleton / progress / empty

Community Surface avatar / reaction / image frame

당근이웃 36.8°C Manner Temp Badge
관심 34 댓글 9 친절해요
+

Overlay Patterns alert dialog / menu sheet / help bubble

Menu Sheet

화면을 벗어나지 않고 여러 행동을 묶어 보여줍니다.

게시글 수정 › 끌어올리기 › 거래 완료 처리 ✓

Alert Dialog

되돌리기 어려운 행동은 별도 확인 레이어로 분리합니다.
취소 확인

Help Bubble

낯선 기능을 짧게 설명하고 바로 닫을 수 있게 합니다.

가격 제안은 판매자가 허용한 글에서만 보낼 수 있어요.
02 / Foundation

역할 기반 토큰은 앱 표면의 밀도와 대비를 안정화한다.

SEED는 raw palette보다 fg, bg, stroke 역할 토큰을 우선 사용한다. 아래 색상은 design.md의 OKLCH 값을 그대로 렌더링한 기준 보드다.

Color roles exact OKLCH

gray-00 / bg-default oklch(1.000 0.000 0) Surface
gray-100 / bg-layer oklch(0.979 0.002 248) Layer
gray-200 oklch(0.967 0.002 248) Subtle
gray-300 oklch(0.952 0.003 265) Divider
gray-400 / stroke-muted oklch(0.901 0.007 269) Stroke
gray-500 oklch(0.867 0.007 269) Disabled
gray-600 oklch(0.766 0.010 267) Muted
gray-700 / fg-muted oklch(0.636 0.015 262) Secondary text
gray-800 oklch(0.477 0.028 264) Heavy text
gray-900 oklch(0.307 0.017 256) Heading
gray-1000 / fg-neutral oklch(0.226 0.008 264) Primary text
carrot-100 / bg-brand-weak oklch(0.970 0.016 47) Brand weak
carrot-200 oklch(0.946 0.031 52) Tint
carrot-300 oklch(0.903 0.055 48) Soft fill
carrot-400 oklch(0.843 0.092 46) Warm fill
carrot-500 oklch(0.769 0.144 44) Hover
carrot-600 / bg-brand-solid oklch(0.696 0.204 43) Brand solid
carrot-700 / fg-brand oklch(0.618 0.195 40) Pressed
carrot-800 oklch(0.529 0.173 38) Deep
carrot-900 oklch(0.422 0.133 40) Deep text
carrot-1000 oklch(0.276 0.081 42) Dark brand
blue-700 / informative oklch(0.606 0.205 258) Info
green-700 / positive oklch(0.585 0.115 170) Positive
red-700 / critical oklch(0.640 0.233 28) Critical
yellow-700 / warning oklch(0.592 0.109 85) Warning
yellow-300 oklch(0.898 0.141 95) Manner temp
dark-bg-default oklch(0.205 0.008 275) Dark canvas
dark-bg-floating oklch(0.243 0.011 261) Dark floating
dark-fg-neutral oklch(0.967 0.002 248) Dark text
dark-stroke-muted oklch(1.000 0.000 0 / 0.09) Dark stroke
dark-bg-brand-pressed oklch(0.787 0.137 50) Dark pressed
dark-bg-brand-weak oklch(0.274 0.022 42) Dark weak

Typography t1-t10

t10/bold동네 생활의 기준
t8/bold명확한 화면 제목
t6/medium컴포넌트 라벨과 요약
t5/regular본문은 안정적인 줄 높이를 읽힌다.
t3/mediumCaption / 보조 설명
t1/mediumMicro metadata

Spacing dimension

x0_52px
x14px
x28px
x312px
x416px
x624px
x832px
x1456px

Radius component scale

r0_5 / 2px r2 / 8px r4 / 16px full / pill
04 / Implementation

구현 메모는 토큰 이름과 컴포넌트 위계를 함께 남긴다.

프리뷰의 목적은 장식이 아니라 실제 화면에서 반복될 수 있는 컴포넌트 조합을 보여주는 것이다.

ActionButton
  variant="brandSolid"
  size="large"
  usage="채팅하기 / 글쓰기 / 단골맺기"
  limit="high emphasis는 한 화면에 하나"
ListItem
  prefix="thumbnail | avatar | icon"
  title="한 줄 우선"
  detail="동네 · 시간 · 보조 정보"
  suffix="price | action | chevron"
BottomSheet
  layer="bg.layer-floating"
  maxWidth="640px"
  topCornerRadius="$radius.r6"
  handle="36x4"
Color
  fg="fg.neutral / fg.neutral-muted"
  bg="bg.layer-default / bg.layer-floating"
  brand="사용자 연결 액션에만 제한"