당근 제품을 위한 통합 디자인 언어
동네의 거래와 이야기를 가볍게 연결하는 화면.
SEED 는 색을 팔레트가 아니라 역할로 부르고, 브랜드 주황은 꼭 필요한 곳에만 쓴다. 아래는 그 토큰과 컴포넌트를 이 카탈로그가 재현한 화면이다.
이웃 목록역삼동
전체
가까운 순
최근 활동
동네 인증이 곧 만료돼요
지금 확인하면 계속 이웃 목록을 볼 수 있어요.
이웃
목록을 새로 고쳤어요실행 취소
이웃에게 말 걸기
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
친절해요
시간 약속을 잘 지켜요
응답이 빨라요
1122334455667788991010
1단계는 중립 회색, 6단계가 브랜드 주황, 10단계가 적색이다.
Status & Notification badge / banner / snackbar
Badge
안전결제
신고됨
채팅3
가격 제안은 한 번 더 확인해요Callout은 화면 안에서 맥락을 끊지 않는 안내에 사용합니다.
Selection Controls tabs / switch / input
인기순
최신순
가까운순
거래
동네생활
알바
가게
거래 가능 상품만 보기
가격 제안 허용
직거래 우선
•
역삼동 반경 3km
⌄
Loading & Result skeleton / progress / empty
72%
사진 업로드 중Progress Circle은 긴 작업의 현재 상태를 명확히 보여준다.
아직 결과가 없어요
검색어를 바꾸거나 동네 범위를 넓혀보세요.
검색어를 바꾸거나 동네 범위를 넓혀보세요.
Community Surface avatar / reaction / image frame
당근이웃
36.8°C
Manner Temp Badge
관심 34
댓글 9
친절해요
+
Overlay Patterns alert dialog / menu sheet / help bubble
02 / Foundations
토큰을 적용하면 표면이 이렇게 정해진다.
아래 값은 모두 이 항목의 design.md 에서 그대로 읽어 렌더한 것이다. 색은 팔레트가 아니라 역할 이름으로 부르고, 테마 전환은 역할이 아니라 그 역할이 가리키는 팔레트 단계가 뒤집히며 일어난다.
Color roles bg / fg / stroke
bg-brand-solid브랜드 면
bg-brand-weak브랜드 약면
bg-layer-default기본 레이어
bg-layer-fill채움 레이어
fg-neutral본문
fg-neutral-muted보조 텍스트
fg-positive긍정
fg-critical위험
fg-informative정보
stroke-neutral-muted약한 선
Type scale size / line-height
가나다 Agt111px / 15px
가나다 Agt313px / 18px
가나다 Agt516px / 22px
가나다 Agt720px / 27px
가나다 Agt924px / 32px
가나다 Agt1232px / 42px
가나다 Agt1448px / 60px
Spacing 4px 배수 사다리
Radius 2 – 24px + full
r14px
r28px
r312px
r416px
r520px
r624px
full9999px
Elevation shadow s1 – s3
s1
s1
s2
s2
s3
s3
다크에서는 같은 단계의 알파가 크게 올라간다 — 어두운 배경에서 같은 농도로는 층이 보이지 않기 때문이다.
Motion 0.2초 경계
duration-d2100ms
duration-d4200ms
duration-d6300ms
마이크로 모션은 0.2초 이하, 매크로 모션은 0.2초 초과로 나뉜다.
Gradient magic 계열
glow-magic
glow-magic
highlight-magic
입체감과 AI 기능 표현에 쓰는 별도 축이다.
03 / Implementation
구현 메모는 토큰 이름과 컴포넌트 위계를 함께 남긴다.
프리뷰의 목적은 장식이 아니라 실제 화면에서 반복될 수 있는 컴포넌트 조합을 보여주는 것이다.
ActionButton props="size / layout / variant / state / width / hierarchy" cta="bg.brand-solid + fg.neutral-inverted + rounded.full" fullWidth="flexGrow — 공식 API 에 fill 속성은 없다" brand="꼭 필요한 곳에만"
ListItem anatomy="prefix / title / detail / suffix" background="컴포넌트 자체에는 지정돼 있지 않다" grouping="List Header 로 묶는다" nesting="중첩 표면은 concentric radius"
BottomSheet anatomy="backdrop / container / header / close / footer" handle="노출 여부를 속성으로 고른다" limits="최대 너비 · 최대 높이 · snap point · 키보드 대응이 규정된다" context="현재 맥락을 유지한 채 추가 정보나 액션 목록을 제공"
Color fg="fg.neutral / fg.neutral-muted" bg="bg.layer-default / bg.layer-floating" brand="꼭 필요한 곳에만"