색상
명확한 색상 체계
배경, 텍스트, 테두리, 강조색 등 명확히 정의된 색상 토큰을 사용합니다.
Neo Brutalist
두꺼운 테두리와 강렬한 타이포그래피. 계층 구조를 대담하게 드러냅니다.
MD 다운로드Background
#ffffff
Surface
#f0f0f0
Text
#000000
Muted
#444444
Border
#000000
Point
#0000ff
Display
BOLD MOVES ONLY
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 | #ffffff | Background | 활성 |
| --color-surface | #f0f0f0 | Surface | 활성 |
| --color-text | #000000 | Text | 활성 |
| --color-muted | #444444 | Muted | 활성 |
| --color-border | #000000 | Border | 활성 |
| --color-point | #0000ff | Point | 활성 |
색상
배경, 텍스트, 테두리, 강조색 등 명확히 정의된 색상 토큰을 사용합니다.
타이포
헤딩부터 캡션까지 일관된 타입 스케일로 정보 위계를 형성합니다.
레이아웃
반응형 그리드와 간격 토큰으로 화면 크기에 상관없이 일관된 레이아웃을 유지합니다.
"좋은 디자인은 가능한 한 적게 디자인하는 것입니다. 불필요한 것을 배제할수록 본질이 남습니다."
— Dieter Rams
디자인 시스템은 단순한 스타일 가이드가 아닙니다. 팀이 공유하는 공통의 언어 이자, 제품 전반의 일관된 사용자 경험을 만드는 토대입니다.