유아 원목 책상
역삼1동 · 2분 전
18,000원
당신 근처의 지역 생활 커뮤니티
동네의 거래와 이야기를 가볍게 연결하는 화면.
당근의 제품 표면은 흰 배경, 선명한 행 구조, 제한적인 주황 CTA, 동네 맥락의 짧은 문장으로 구성된다. SEED 토큰은 이 표면을 재사용 가능한 컴포넌트 언어로 정리한다.

당근이웃역삼동 · 매너 좋은 이웃
36.8°C
상태 좋은 캠핑 의자 가져가세요
동네에서 바로 거래할 수 있어요. 채팅으로 약속을 잡고, 만나기 좋은 장소를 정해요.
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
Bottom Sheet floating layer
거래 방법을 선택해 주세요
현재 화면 맥락은 유지하면서 필요한 액션만 하단 레이어에 모읍니다.
Text Field enabled / error
Manner Temp trust signal
Status & Notification badge / banner / snackbar
Selection Controls tabs / switch / input
Loading & Result skeleton / progress / empty
검색어를 바꾸거나 동네 범위를 넓혀보세요.
Community Surface avatar / reaction / image frame
당근이웃
36.8°C
Manner Temp Badge
+
Overlay Patterns alert dialog / menu sheet / help bubble
역할 기반 토큰은 앱 표면의 밀도와 대비를 안정화한다.
SEED는 raw palette보다 fg, bg, stroke 역할 토큰을 우선 사용한다. 아래 색상은 design.md의 OKLCH 값을 그대로 렌더링한 기준 보드다.
Color roles exact OKLCH
oklch(1.000 0.000 0)
Surface
oklch(0.979 0.002 248)
Layer
oklch(0.967 0.002 248)
Subtle
oklch(0.952 0.003 265)
Divider
oklch(0.901 0.007 269)
Stroke
oklch(0.867 0.007 269)
Disabled
oklch(0.766 0.010 267)
Muted
oklch(0.636 0.015 262)
Secondary text
oklch(0.477 0.028 264)
Heavy text
oklch(0.307 0.017 256)
Heading
oklch(0.226 0.008 264)
Primary text
oklch(0.970 0.016 47)
Brand weak
oklch(0.946 0.031 52)
Tint
oklch(0.903 0.055 48)
Soft fill
oklch(0.843 0.092 46)
Warm fill
oklch(0.769 0.144 44)
Hover
oklch(0.696 0.204 43)
Brand solid
oklch(0.618 0.195 40)
Pressed
oklch(0.529 0.173 38)
Deep
oklch(0.422 0.133 40)
Deep text
oklch(0.276 0.081 42)
Dark brand
oklch(0.606 0.205 258)
Info
oklch(0.585 0.115 170)
Positive
oklch(0.640 0.233 28)
Critical
oklch(0.592 0.109 85)
Warning
oklch(0.898 0.141 95)
Manner temp
oklch(0.205 0.008 275)
Dark canvas
oklch(0.243 0.011 261)
Dark floating
oklch(0.967 0.002 248)
Dark text
oklch(1.000 0.000 0 / 0.09)
Dark stroke
oklch(0.787 0.137 50)
Dark pressed
oklch(0.274 0.022 42)
Dark weak
Typography t1-t10
Spacing dimension
Radius component scale
로고는 크게 전시하기보다, 서비스 표면 안에서 차분하게 고정한다.
공식 웹사이트처럼 작은 시그니처 로고를 기준으로 두고, 심볼은 앱 아이콘이나 프로필 맥락에서만 보조적으로 사용한다.
Signature logo · header and footer default
Symbol logo · app icon context only
구현 메모는 토큰 이름과 컴포넌트 위계를 함께 남긴다.
프리뷰의 목적은 장식이 아니라 실제 화면에서 반복될 수 있는 컴포넌트 조합을 보여주는 것이다.
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="사용자 연결 액션에만 제한"



