표본
이 스타일의 기본형
버튼·입력·배지를 이 스타일의 규칙 그대로 그린 카드입니다.
SEED Design (당근)
당근(Karrot)이 개발한 오픈소스 디자인 시스템으로, 하이퍼로컬 커뮤니티 서비스를 위한 따뜻하고 친근한 UX를 제공합니다. React·React Native·iOS·Android 멀티 플랫폼을 지원하며, Radix 기반 시맨틱 컬러 토큰, Stackflow 네비게이션, 접근성 내장 컴포넌트를 갖추고 있습니다.
- YEAR
- 2021
- BY
- 당근마켓 (Karrot)
- MOOD
- 따뜻한 · 친근·발랄 · 신뢰감
- PRIMARY#FF6F0F
- SECONDARY#FFF0E6
- ACCENT#FF6F0F
- BG#FFFFFF
- SURFACE#FFFFFF
취급 표시
- 둥근 모서리
- 가는 테두리
- 보통 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
버튼
입력과 토글
배지
중립강조긍정
탭
스탯과 차트
2,480주간 방문증가+12%
1.8%이탈률감소-0.4%p
여덟 달의 지표 흐름을 담은 표본 차트입니다.
아바타와 아이콘
김서이하박지윤채+1
카드
기본 카드
서피스 토큰이 그대로 정하는 기본 상태의 카드입니다.
강조 카드
강조 상태에서 서피스가 어떻게 달라지는지 보여줍니다.
무드와 이웃
밀도여백빽빽여백에서 빽빽 사이 5단계 중 3단계
온도감차가움따뜻함차가움에서 따뜻함 사이 5단계 중 4단계
시대감레트로미래적레트로에서 미래적 사이 5단계 중 3단계
격식자유분방격식자유분방에서 격식 사이 5단계 중 4단계
- 따뜻한
- 친근·발랄
- 신뢰감
함께 보면 좋은 스타일
Toss Design System (TDS)OKLCH 색공간 기반의 정교한 컬러 시스템, 파생 가능한 테마 시스템, 11개 핵심 컴포넌트를 갖춘 토스의 디자인 시스템으로 금융 앱부터 슈퍼앱, POS, 글로벌까지 확장 가능한 System of System 구조입니다.Toss Design System (TDS)와 비교하기
어디에 쓰나
실제로 쓰는 곳
- 당근 (중고거래 플랫폼)
- 당근 동네생활 (커뮤니티)
- 당근 비즈프로필 (지역 비즈니스)
- 당근페이 (지역 결제 서비스)
사용 사례
- 하이퍼로컬 커뮤니티 플랫폼
- 중고거래 마켓플레이스
- 동네 생활 서비스 앱
- 모바일 중심 C2C 플랫폼
- 멀티 플랫폼 앱 (Web + Native)
이런 프로젝트에 맞습니다
- 모바일 중심 C2C 커뮤니티 서비스
- 따뜻하고 친근한 브랜드 경험이 필요한 앱
- 멀티 플랫폼 동시 출시가 필요한 스타트업
- 오픈소스 기반으로 자체 디자인 시스템을 구축하려는 팀
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
역사와 배경
2021년 당근마켓이 하이퍼로컬 서비스 확장에 따라 seed-design v1을 오픈소스로 공개하였고, 2024년 seed-design v2로 전면 리뉴얼하며 React Aria 기반 접근성 강화, Stackflow 네비게이션, 멀티 플랫폼 토큰 시스템을 도입했습니다.
핵심 원칙
- Warmth — 이웃 간 신뢰와 따뜻함을 전달하는 디자인
- Simplicity — 복잡한 거래를 직관적으로 단순화
- Consistency — 모든 플랫폼에서 동일한 당근 경험
주요 특징
- Radix 기반 시맨틱 컬러 토큰 시스템
- Stackflow 네비게이션 프레임워크
- React·React Native·iOS·Android 멀티 플랫폼
- 접근성(a11y) 내장 컴포넌트
- 오픈소스 (MIT 라이선스)
장점과 한계
장점
- MIT 오픈소스 — 자유로운 커스터마이징 및 상업적 사용 가능
- React·React Native·iOS·Android 4개 플랫폼 동시 지원
- Stackflow로 앱 같은 네비게이션 경험 제공
- Radix 기반 시맨틱 토큰으로 라이트/다크 모드 자동 대응
- 접근성(WCAG 2.1 AA) 기본 내장
한계
- 하이퍼로컬/커뮤니티 도메인에 최적화되어 B2B에는 커스터마이징 필요
- Stackflow 의존성으로 네비게이션 패턴 변경 시 제약
- 자체 폰트(Karrot Sans) 미공개로 대체 폰트 필요
컬러 시스템
Radix Colors 기반 시맨틱 컬러 토큰 시스템으로, 12단계 스케일과 알파 변형을 갖춘 오렌지(Carrot) 중심 팔레트
색의 역할
- primary: Carrot Orange (#FF6F0F) — 브랜드 CTA 및 핵심 강조
- background: White(#FFFFFF) / Gray Scale 배경
- text: Gray 900(#212124) 본문, Gray 600(#868B94) 보조
- semantic: Success(Green), Warning(Yellow), Error(Red), Info(Blue)
- surface: 카드 및 모달용 elevated surface 색상
제약
- Radix 12단계 스케일 기반 — 스텝 간 균일한 명도 차이 보장
- 알파 변형(A 접미사)으로 투명 배경 위 오버레이 사용
- 시맨틱 토큰 외 직접 hex값 사용 금지
- 다크 모드에서 Carrot Orange의 채도 및 명도 자동 조정
다크모드 — Radix 다크 테마 팔레트 자동 전환 — 동일 시맨틱 토큰으로 라이트/다크 대응
명도 대비 — WCAG 2.1 AA (4.5:1 본문, 3:1 대형 텍스트) — React Aria 내장 검증
타이포그래피
Pretendard — 한국어에 최적화된 현대적 산세리프
글꼴은 최대 1종 · 스케일 비율 1.25 (Major Third)
- Title(28~24px) → Subtitle(20~18px) → Body(16~14px) → Caption(13~12px) 체계적 스케일
- 모바일 가독성 우선 — Body 최소 14px 이상
- 라인 하이트 1.5 기본값으로 충분한 행간 확보
설계 제약
반드시 포함
- 8px 기반 스페이싱 시스템
- 시맨틱 컬러 토큰을 통한 일관된 색상 사용
- 모바일 우선 반응형 설계
- 모든 인터랙티브 요소에 접근성 속성 포함
- 따뜻하고 친근한 톤의 라운드 UI
하지 말 것
- 시맨틱 토큰 무시하고 하드코딩된 색상값 직접 사용 금지
- Stackflow 네비게이션 패턴을 벗어난 커스텀 라우팅 금지
- 모바일 터치 타겟 44px 미만으로 설정 금지
- 카드 내 과도한 정보 밀도로 가독성 해치기 금지
모션 — ease-out 250ms 기본 — 부드럽고 자연스러운 전환, 사용자에게 친근한 느낌의 모션
접근성
React Aria 기반으로 키보드 네비게이션, 스크린 리더, 포커스 관리가 컴포넌트에 내장되어 있으며, 시맨틱 컬러 토큰으로 라이트/다크 모드에서 WCAG 2.1 AA 기준 명도 대비를 자동으로 충족합니다.
자주 묻는 질문
SEED Design (당근)이란 무엇인가요?
당근(Karrot)이 개발한 오픈소스 디자인 시스템으로, 하이퍼로컬 커뮤니티 서비스를 위한 따뜻하고 친근한 UX를 제공합니다. React·React Native·iOS·Android 멀티 플랫폼을 지원하며, Radix 기반 시맨틱 컬러 토큰, Stackflow 네비게이션, 접근성 내장 컴포넌트를 갖추고 있습니다. 2021년 당근마켓이 하이퍼로컬 서비스 확장에 따라 seed-design v1을 오픈소스로 공개하였고, 2024년 seed-design v2로 전면 리뉴얼하며 React Aria 기반 접근성 강화, Stackflow 네비게이션, 멀티 플랫폼 토큰 시스템을 도입했습니다.
SEED Design (당근)의 핵심 디자인 원칙은 무엇인가요?
SEED Design (당근)의 핵심 원칙은 Warmth — 이웃 간 신뢰와 따뜻함을 전달하는 디자인, Simplicity — 복잡한 거래를 직관적으로 단순화, Consistency — 모든 플랫폼에서 동일한 당근 경험입니다.
SEED Design (당근)은 어떤 프로젝트에 적합한가요?
SEED Design (당근)은 하이퍼로컬 커뮤니티 플랫폼, 중고거래 마켓플레이스, 동네 생활 서비스 앱, 모바일 중심 C2C 플랫폼, 멀티 플랫폼 앱 (Web + Native), 모바일 중심 C2C 커뮤니티 서비스, 따뜻하고 친근한 브랜드 경험이 필요한 앱, 멀티 플랫폼 동시 출시가 필요한 스타트업, 오픈소스 기반으로 자체 디자인 시스템을 구축하려는 팀 등의 프로젝트에 적합합니다.
SEED Design (당근)의 장단점은 무엇인가요?
장점으로는 MIT 오픈소스 — 자유로운 커스터마이징 및 상업적 사용 가능, React·React Native·iOS·Android 4개 플랫폼 동시 지원, Stackflow로 앱 같은 네비게이션 경험 제공, Radix 기반 시맨틱 토큰으로 라이트/다크 모드 자동 대응, 접근성(WCAG 2.1 AA) 기본 내장이 있습니다. 단점으로는 하이퍼로컬/커뮤니티 도메인에 최적화되어 B2B에는 커스터마이징 필요, Stackflow 의존성으로 네비게이션 패턴 변경 시 제약, 자체 폰트(Karrot Sans) 미공개로 대체 폰트 필요이 있습니다.
SEED Design (당근)에서 색상은 어떻게 사용하나요?
Radix Colors 기반 시맨틱 컬러 토큰 시스템으로, 12단계 스케일과 알파 변형을 갖춘 오렌지(Carrot) 중심 팔레트 색상 역할은 primary: Carrot Orange (#FF6F0F) — 브랜드 CTA 및 핵심 강조, background: White(#FFFFFF) / Gray Scale 배경, text: Gray 900(#212124) 본문, Gray 600(#868B94) 보조입니다. 주의사항: Radix 12단계 스케일 기반 — 스텝 간 균일한 명도 차이 보장, 알파 변형(A 접미사)으로 투명 배경 위 오버레이 사용.
SEED Design (당근)에 어울리는 폰트 스타일은 무엇인가요?
SEED Design (당근)에는 Pretendard — 한국어에 최적화된 현대적 산세리프 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: Title(28~24px) → Subtitle(20~18px) → Body(16~14px) → Caption(13~12px) 체계적 스케일, 모바일 가독성 우선 — Body 최소 14px 이상.
SEED Design (당근) 디자인에서 하면 안 되는 것은 무엇인가요?
SEED Design (당근)에서 피해야 할 것: 시맨틱 토큰 무시하고 하드코딩된 색상값 직접 사용 금지, Stackflow 네비게이션 패턴을 벗어난 커스텀 라우팅 금지, 모바일 터치 타겟 44px 미만으로 설정 금지, 카드 내 과도한 정보 밀도로 가독성 해치기 금지.
SEED Design (당근)을 사용하는 실제 서비스나 제품은 무엇이 있나요?
SEED Design (당근)을 적용한 대표적인 제품·서비스로는 당근 (중고거래 플랫폼), 당근 동네생활 (커뮤니티), 당근 비즈프로필 (지역 비즈니스), 당근페이 (지역 결제 서비스) 등이 있습니다.