# SEED Design (당근) — 디자인 스타일 가이드

## 기본 정보
- **ID**: seed-design
- **카테고리**: design-language
- **연도**: 2021
- **제작자**: 당근마켓 (Karrot)

## 설명
당근(Karrot)이 개발한 오픈소스 디자인 시스템으로, 하이퍼로컬 커뮤니티 서비스를 위한 따뜻하고 친근한 UX를 제공합니다. React·React Native·iOS·Android 멀티 플랫폼을 지원하며, Radix 기반 시맨틱 컬러 토큰, Stackflow 네비게이션, 접근성 내장 컴포넌트를 갖추고 있습니다.

## 역사·배경
2021년 당근마켓이 하이퍼로컬 서비스 확장에 따라 seed-design v1을 오픈소스로 공개하였고, 2024년 seed-design v2로 전면 리뉴얼하며 React Aria 기반 접근성 강화, Stackflow 네비게이션, 멀티 플랫폼 토큰 시스템을 도입했습니다.

## 핵심 원칙
- Warmth — 이웃 간 신뢰와 따뜻함을 전달하는 디자인
- Simplicity — 복잡한 거래를 직관적으로 단순화
- Consistency — 모든 플랫폼에서 동일한 당근 경험

## 주요 특징
- Radix 기반 시맨틱 컬러 토큰 시스템
- Stackflow 네비게이션 프레임워크
- React·React Native·iOS·Android 멀티 플랫폼
- 접근성(a11y) 내장 컴포넌트
- 오픈소스 (MIT 라이선스)

## 컬러 시스템 가이드
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 기본값으로 충분한 행간 확보

## 하면 안 되는 것 (안티패턴)
- 시맨틱 토큰 무시하고 하드코딩된 색상값 직접 사용 금지
- Stackflow 네비게이션 패턴을 벗어난 커스텀 라우팅 금지
- 모바일 터치 타겟 44px 미만으로 설정 금지
- 카드 내 과도한 정보 밀도로 가독성 해치기 금지

## 반드시 포함해야 하는 것
- 8px 기반 스페이싱 시스템
- 시맨틱 컬러 토큰을 통한 일관된 색상 사용
- 모바일 우선 반응형 설계
- 모든 인터랙티브 요소에 접근성 속성 포함
- 따뜻하고 친근한 톤의 라운드 UI

## 모션 가이드
ease-out 250ms 기본 — 부드럽고 자연스러운 전환, 사용자에게 친근한 느낌의 모션

## 사용 사례
- 하이퍼로컬 커뮤니티 플랫폼
- 중고거래 마켓플레이스
- 동네 생활 서비스 앱
- 모바일 중심 C2C 플랫폼
- 멀티 플랫폼 앱 (Web + Native)

## 추천 프로젝트 유형
- 모바일 중심 C2C 커뮤니티 서비스
- 따뜻하고 친근한 브랜드 경험이 필요한 앱
- 멀티 플랫폼 동시 출시가 필요한 스타트업
- 오픈소스 기반으로 자체 디자인 시스템을 구축하려는 팀

## 장점
- MIT 오픈소스 — 자유로운 커스터마이징 및 상업적 사용 가능
- React·React Native·iOS·Android 4개 플랫폼 동시 지원
- Stackflow로 앱 같은 네비게이션 경험 제공
- Radix 기반 시맨틱 토큰으로 라이트/다크 모드 자동 대응
- 접근성(WCAG 2.1 AA) 기본 내장

## 단점·한계
- 하이퍼로컬/커뮤니티 도메인에 최적화되어 B2B에는 커스터마이징 필요
- Stackflow 의존성으로 네비게이션 패턴 변경 시 제약
- 자체 폰트(Karrot Sans) 미공개로 대체 폰트 필요

## 실제 사용 제품·서비스
- 당근 (중고거래 플랫폼)
- 당근 동네생활 (커뮤니티)
- 당근 비즈프로필 (지역 비즈니스)
- 당근페이 (지역 결제 서비스)

## 접근성
React Aria 기반으로 키보드 네비게이션, 스크린 리더, 포커스 관리가 컴포넌트에 내장되어 있으며, 시맨틱 컬러 토큰으로 라이트/다크 모드에서 WCAG 2.1 AA 기준 명도 대비를 자동으로 충족합니다.

## 관련 스타일
- [toss-design-system](https://ui.buildersgate.com/styles/toss-design-system)
- [wanted-montage](https://ui.buildersgate.com/styles/wanted-montage)
- [material-design](https://ui.buildersgate.com/styles/material-design)
- [line-lds](https://ui.buildersgate.com/styles/line-lds)

## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.

### 색상
- primary: #FF6F0F
- secondary: #FFF0E6
- accent: #FF6F0F
- background: #FFFFFF
- surface: #FFFFFF
- text: #212124
- textSecondary: #868B94
- border: #E5E8EB

### 헤더
- background: #FFFFFF
- textColor: #212124
- accentColor: #FF6F0F

### 타이포그래피
- fontFamily: Inter, 'Noto Sans KR', sans-serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: -0.01em

### 스페이싱
- unit: 8px
- scale: 1

### 그림자 (Shadows)
- sm: 0 1px 3px rgba(0,0,0,0.06)
- md: 0 4px 12px rgba(0,0,0,0.08)
- lg: 0 8px 24px rgba(0,0,0,0.10)
- xl: 0 16px 32px rgba(0,0,0,0.12)

### Border Radius
- none: 0
- sm: 8px
- md: 16px
- lg: 20px
- full: 9999px

### 테두리 (Borders)
- width: 1px
- style: solid
- color: #E5E8EB

### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.25s ease-out

### 애니메이션
- duration: 250ms
- easing: ease-out

### 컴포넌트 토큰
- 버튼: shape=rounded / hoverEffect=darken / textTransform=none
- 카드: style=flat / hoverEffect=lift
- 인풋: style=filled / focusEffect=border
- 배지: shape=pill / style=subtle
- 아이콘: package=lucide / strokeWidth=2 / defaultSize=24

### 레이아웃
- containerStyle: fluid
- sectionSpacing: compact

### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: false

## 자주 묻는 질문 (FAQ)

### Q: SEED Design (당근)이란 무엇인가요?
A: 당근(Karrot)이 개발한 오픈소스 디자인 시스템으로, 하이퍼로컬 커뮤니티 서비스를 위한 따뜻하고 친근한 UX를 제공합니다. React·React Native·iOS·Android 멀티 플랫폼을 지원하며, Radix 기반 시맨틱 컬러 토큰, Stackflow 네비게이션, 접근성 내장 컴포넌트를 갖추고 있습니다. 2021년 당근마켓이 하이퍼로컬 서비스 확장에 따라 seed-design v1을 오픈소스로 공개하였고, 2024년 seed-design v2로 전면 리뉴얼하며 React Aria 기반 접근성 강화, Stackflow 네비게이션, 멀티 플랫폼 토큰 시스템을 도입했습니다.

### Q: SEED Design (당근)의 핵심 디자인 원칙은 무엇인가요?
A: SEED Design (당근)의 핵심 원칙은 Warmth — 이웃 간 신뢰와 따뜻함을 전달하는 디자인, Simplicity — 복잡한 거래를 직관적으로 단순화, Consistency — 모든 플랫폼에서 동일한 당근 경험입니다.

### Q: SEED Design (당근)은 어떤 프로젝트에 적합한가요?
A: SEED Design (당근)은 하이퍼로컬 커뮤니티 플랫폼, 중고거래 마켓플레이스, 동네 생활 서비스 앱, 모바일 중심 C2C 플랫폼, 멀티 플랫폼 앱 (Web + Native), 모바일 중심 C2C 커뮤니티 서비스, 따뜻하고 친근한 브랜드 경험이 필요한 앱, 멀티 플랫폼 동시 출시가 필요한 스타트업, 오픈소스 기반으로 자체 디자인 시스템을 구축하려는 팀 등의 프로젝트에 적합합니다.

### Q: SEED Design (당근)의 장단점은 무엇인가요?
A: 장점으로는 MIT 오픈소스 — 자유로운 커스터마이징 및 상업적 사용 가능, React·React Native·iOS·Android 4개 플랫폼 동시 지원, Stackflow로 앱 같은 네비게이션 경험 제공, Radix 기반 시맨틱 토큰으로 라이트/다크 모드 자동 대응, 접근성(WCAG 2.1 AA) 기본 내장이 있습니다. 단점으로는 하이퍼로컬/커뮤니티 도메인에 최적화되어 B2B에는 커스터마이징 필요, Stackflow 의존성으로 네비게이션 패턴 변경 시 제약, 자체 폰트(Karrot Sans) 미공개로 대체 폰트 필요이 있습니다.

### Q: SEED Design (당근)에서 색상은 어떻게 사용하나요?
A: Radix Colors 기반 시맨틱 컬러 토큰 시스템으로, 12단계 스케일과 알파 변형을 갖춘 오렌지(Carrot) 중심 팔레트 색상 역할은 primary: Carrot Orange (#FF6F0F) — 브랜드 CTA 및 핵심 강조, background: White(#FFFFFF) / Gray Scale 배경, text: Gray 900(#212124) 본문, Gray 600(#868B94) 보조입니다. 주의사항: Radix 12단계 스케일 기반 — 스텝 간 균일한 명도 차이 보장, 알파 변형(A 접미사)으로 투명 배경 위 오버레이 사용.

### Q: SEED Design (당근)에 어울리는 폰트 스타일은 무엇인가요?
A: SEED Design (당근)에는 Pretendard — 한국어에 최적화된 현대적 산세리프 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: Title(28~24px) → Subtitle(20~18px) → Body(16~14px) → Caption(13~12px) 체계적 스케일, 모바일 가독성 우선 — Body 최소 14px 이상.

### Q: SEED Design (당근) 디자인에서 하면 안 되는 것은 무엇인가요?
A: SEED Design (당근)에서 피해야 할 것: 시맨틱 토큰 무시하고 하드코딩된 색상값 직접 사용 금지, Stackflow 네비게이션 패턴을 벗어난 커스텀 라우팅 금지, 모바일 터치 타겟 44px 미만으로 설정 금지, 카드 내 과도한 정보 밀도로 가독성 해치기 금지.

### Q: SEED Design (당근)을 사용하는 실제 서비스나 제품은 무엇이 있나요?
A: SEED Design (당근)을 적용한 대표적인 제품·서비스로는 당근 (중고거래 플랫폼), 당근 동네생활 (커뮤니티), 당근 비즈프로필 (지역 비즈니스), 당근페이 (지역 결제 서비스) 등이 있습니다.

## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=seed-design
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=seed-design&merged=true

이 페이지 주소를 AI에게 보여주고 "디자인 시스템 문서를 만들어줘"라고 해보세요.

← 홈으로 돌아가기

SEED Design (당근)

당근(Karrot)이 개발한 오픈소스 디자인 시스템으로, 하이퍼로컬 커뮤니티 서비스를 위한 따뜻하고 친근한 UX를 제공합니다. React·React Native·iOS·Android 멀티 플랫폼을 지원하며, Radix 기반 시맨틱 컬러 토큰, Stackflow 네비게이션, 접근성 내장 컴포넌트를 갖추고 있습니다.

연도

2021

제작자

당근마켓 (Karrot)

2021년 당근마켓이 하이퍼로컬 서비스 확장에 따라 seed-design v1을 오픈소스로 공개하였고, 2024년 seed-design v2로 전면 리뉴얼하며 React Aria 기반 접근성 강화, Stackflow 네비게이션, 멀티 플랫폼 토큰 시스템을 도입했습니다.

#FF6F0F

핵심 원칙

1

Warmth — 이웃 간 신뢰와 따뜻함을 전달하는 디자인

2

Simplicity — 복잡한 거래를 직관적으로 단순화

3

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) 미공개로 대체 폰트 필요

적합한 사용처

사용 사례

  • 하이퍼로컬 커뮤니티 플랫폼
  • 중고거래 마켓플레이스
  • 동네 생활 서비스 앱
  • 모바일 중심 C2C 플랫폼
  • 멀티 플랫폼 앱 (Web + Native)

이런 프로젝트에 추천

모바일 중심 C2C 커뮤니티 서비스따뜻하고 친근한 브랜드 경험이 필요한 앱멀티 플랫폼 동시 출시가 필요한 스타트업오픈소스 기반으로 자체 디자인 시스템을 구축하려는 팀
접근성

React Aria 기반으로 키보드 네비게이션, 스크린 리더, 포커스 관리가 컴포넌트에 내장되어 있으며, 시맨틱 컬러 토큰으로 라이트/다크 모드에서 WCAG 2.1 AA 기준 명도 대비를 자동으로 충족합니다.

실제 사용 예시

당근 (중고거래 플랫폼)당근 동네생활 (커뮤니티)당근 비즈프로필 (지역 비즈니스)당근페이 (지역 결제 서비스)

UI 컴포넌트 예제

이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.

SEED Action Buttons

당근 스타일의 둥근 버튼 — Primary, Secondary, Outlined, Chip 패턴

SEED List

당근마켓 스타일의 리스트 아이템 — 썸네일, 제목, 설명, 가격 패턴

🪴

대형 몬스테라 화분

서초동 · 3시간 전

25,000원💬 3
📚

리액트 공부 책 세트

역삼동 · 5시간 전

15,000원💬 7
🚲

접이식 자전거 (미사용)

강남동 · 1일 전

80,000원💬 12

SEED Badge & Chip

상태 뱃지와 필터 칩 — 시맨틱 컬러 기반

NEW예약중가격제안판매완료거래완료

SEED Card

당근 스타일 카드 — 깔끔한 라운딩과 미세한 보더, 넉넉한 여백

우리 동네

내 근처의 중고 매물을 확인하세요

128건

채팅

진행 중인 대화를 확인하세요

5개

SEED Text Field

아웃라인 스타일 입력 필드 — 포커스 시 Carrot 컬러 링

SEED Typography

시스템 폰트 기반 — t1(11px)부터 t10(26px)까지 Scale + Semantic 텍스트 스타일

t10 Bold (26px) — Screen Title

우리 동네 중고 직거래

t8 Bold (20px) — Section Header

인기 매물

t6 Semibold (16px) — Article Title

동네에서 가까운 거래

t5 Regular (15px) — Article Body

SEED 디자인 시스템은 당근 제품을 위한 통합된 디자인 언어입니다. 2단계 토큰 계층(Scale → Semantic)으로 유연성과 일관성을 동시에 달성합니다.

t2 Regular (12px) — Caption

Karrot (당근) · 2021 · Open Source · Multi-Platform

SEED Color Palette

Gray + Chromatic 6색 팔레트 — 100~1000 스케일

Carrot
Gray
Blue
Red
Green

100 → 200 → 300 → 400 → 500 → 600 → 700+ (Scale Token → Semantic Token)

자주 묻는 질문

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 (당근)을 적용한 대표적인 제품·서비스로는 당근 (중고거래 플랫폼), 당근 동네생활 (커뮤니티), 당근 비즈프로필 (지역 비즈니스), 당근페이 (지역 결제 서비스) 등이 있습니다.

관련 스타일 탐색

Toss Design System (TDS)

OKLCH 색공간 기반의 정교한 컬러 시스템, 파생 가능한 테마 시스템, 11개 핵심 컴포넌트를 갖춘 토스의 디자인 시스템으로 금융 앱부터 슈퍼앱, POS, 글로벌까지 확장 가능한 System of System 구조입니다.

Wanted Design System (Montage)

CC BY 4.0 오픈소스 디자인 시스템으로, 명도 기반 넘버링 컬러 체계(0=Black, 100=White), Pretendard JP 타이포그래피, 5단계 Normal/Spread 엘리베이션, 7개 카테고리 40+개 컴포넌트를 갖춘 원티드의 크로스 플랫폼 디자인 시스템입니다.

Material Design

구글이 만든 디자인 시스템으로, 물리적 재료와 조명의 은유를 사용합니다.

LINE Design System (LDS)

LINE 메신저 및 패밀리 서비스를 위한 디자인 시스템으로, 10억+ 사용자 규모의 글로벌 메시징 플랫폼에 최적화된 일관된 UX를 제공합니다. LINE Green 시그니처 컬러, 다국어 타이포그래피, 멀티 플랫폼 컴포넌트를 갖추고 있습니다.