색상
명확한 색상 체계
배경, 텍스트, 테두리, 강조색 등 명확히 정의된 색상 토큰을 사용합니다.
Warm Humanist
따뜻한 흙빛 팔레트와 휴머니스트 서체. 친근하고 접근하기 쉬운 인터페이스를 만듭니다.
MD 다운로드Background
#faf6f0
Surface
#ffffff
Text
#2d1f0e
Muted
#8a6a4a
Border
#e8d8c4
Point
#c96a2a
Display
Stories Worth Telling
Heading 1
제목 스타일 예시
Heading 2
부제목 스타일 예시
Body
본문 텍스트입니다. 가독성과 적절한 행간을 확인하세요.
Caption
캡션 및 보조 텍스트 스타일
Variants
Sizes
With Icon
Badge (pill)
Tag
Status Indicator
안내 메시지
이 디자인 시스템의 강조색으로 표시되는 알림입니다.
성공 메시지
작업이 성공적으로 완료되었습니다.
일반 알림
추가 정보나 설명을 제공하는 중립적인 메시지입니다.
Tab Navigation
Breadcrumb
Sidebar Nav
24
디자인 시스템
등록된 시스템 수
98%
접근성 점수
WCAG AA 기준
6
색상 토큰
핵심 팔레트
∞
확장 가능성
토큰 기반 설계
| 토큰 | 값 | 역할 | 상태 |
|---|---|---|---|
| --color-background | #faf6f0 | Background | 활성 |
| --color-surface | #ffffff | Surface | 활성 |
| --color-text | #2d1f0e | Text | 활성 |
| --color-muted | #8a6a4a | Muted | 활성 |
| --color-border | #e8d8c4 | Border | 활성 |
| --color-point | #c96a2a | Point | 활성 |
색상
배경, 텍스트, 테두리, 강조색 등 명확히 정의된 색상 토큰을 사용합니다.
타이포
헤딩부터 캡션까지 일관된 타입 스케일로 정보 위계를 형성합니다.
레이아웃
반응형 그리드와 간격 토큰으로 화면 크기에 상관없이 일관된 레이아웃을 유지합니다.
"좋은 디자인은 가능한 한 적게 디자인하는 것입니다. 불필요한 것을 배제할수록 본질이 남습니다."
— Dieter Rams
디자인 시스템은 단순한 스타일 가이드가 아닙니다. 팀이 공유하는 공통의 언어 이자, 제품 전반의 일관된 사용자 경험을 만드는 토대입니다.