당근 SEED light 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

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

가격 제안은 판매자가 허용한 글에서만 보낼 수 있어요.
03 / 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="사용자 연결 액션에만 제한"