당근 제품을 위한 통합 디자인 언어
동네의 거래와 이야기를 가볍게 연결하는 화면.
이웃 목록역삼동
전체
가까운 순
최근 활동
동네 인증이 곧 만료돼요
지금 확인하면 계속 이웃 목록을 볼 수 있어요.
이웃
목록을 새로 고쳤어요실행 취소
이웃에게 말 걸기
01 / Components
SEED 컴포넌트를 앱 표면의 우선순위대로 배치했다.
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
Status & Notification badge / banner / snackbar
Badge
안전결제
신고됨
채팅3
가격 제안은 한 번 더 확인해요
Selection Controls tabs / switch / input
인기순
최신순
가까운순
거래
동네생활
알바
가게
거래 가능 상품만 보기
가격 제안 허용
직거래 우선
•
역삼동 반경 3km
⌄
Loading & Result skeleton / progress / empty
72%
사진 업로드 중
아직 결과가 없어요
검색어를 바꾸거나 동네 범위를 넓혀보세요.
검색어를 바꾸거나 동네 범위를 넓혀보세요.
Community Surface avatar / reaction / image frame
당근이웃
36.8°C
Manner Temp Badge
관심 34
댓글 9
친절해요
+
Overlay Patterns alert dialog / menu sheet / help bubble
02 / Foundations
토큰을 적용하면 표면이 이렇게 정해진다.
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
Gradient magic 계열
glow-magic
glow-magic
highlight-magic