색상
명확한 색상 체계
배경, 텍스트, 테두리, 강조색 등 명확히 정의된 색상 토큰을 사용합니다.
Midnight Green
Move Through Midnight
An ownership-app system of midnight black neutrals and an active green accent. Expresses vehicle connection in restrained cool grays.
Demo content below is intentionally shown in Korean — every system in this vault ships with Korean-compatible fonts, and the preview doubles as a Hangul rendering check.
Download MDColor Palette
Brand Swatches
#ffffff#05141f#5ea61e#e8eaeb#636d74Semantic Tokens
Background
#ffffff
Surface
#f5f5f5
Text
#05141f
Muted
#636d74
Border
#e8eaeb
Point
#5ea61e
Typography
Display
Move Through Midnight
Heading 1
제목 스타일 예시
Heading 2
부제목 스타일 예시
Body
본문 텍스트입니다. 가독성과 적절한 행간을 확인하세요.
Caption
캡션 및 보조 텍스트 스타일
Buttons
Variants
Sizes
With Icon
Badges & Tags
Badge (pill)
추천임시보조비활성
Tag
디자인타이포컬러컴포넌트레이아웃접근성
Status Indicator
활성대기중오프라인
Form Elements
Alerts & Messages
ℹ
안내 메시지
이 디자인 시스템의 강조색으로 표시되는 알림입니다.
✓
성공 메시지
작업이 성공적으로 완료되었습니다.
!
일반 알림
추가 정보나 설명을 제공하는 중립적인 메시지입니다.
토스트 알림이 표시됩니다
Navigation
Tab Navigation
Breadcrumb
Sidebar Nav
Stats & Metrics
24
디자인 시스템
등록된 시스템 수
98%
접근성 점수
WCAG AA 기준
6
색상 토큰
핵심 팔레트
∞
확장 가능성
토큰 기반 설계
Table
| 토큰 | 값 | 역할 | 상태 |
|---|---|---|---|
| --color-background | #ffffff | Background | 활성 |
| --color-surface | #f5f5f5 | Surface | 활성 |
| --color-text | #05141f | Text | 활성 |
| --color-muted | #636d74 | Muted | 활성 |
| --color-border | #e8eaeb | Border | 활성 |
| --color-point | #5ea61e | Point | 활성 |
Component Examples
타이포
체계적인 타이포그래피
헤딩부터 캡션까지 일관된 타입 스케일로 정보 위계를 형성합니다.
레이아웃
그리드 시스템
반응형 그리드와 간격 토큰으로 화면 크기에 상관없이 일관된 레이아웃을 유지합니다.
Quote & Emphasis
“좋은 디자인은 가능한 한 적게 디자인하는 것입니다. 불필요한 것을 배제할수록 본질이 남습니다.”
— Dieter Rams
디자인 시스템은 단순한 스타일 가이드가 아닙니다. 팀이 공유하는 공통의 언어 이자, 제품 전반의 일관된 사용자 경험을 만드는 토대입니다.
Controls
Switch
켜짐꺼짐
Progress
진행률72%
진행률35%
Slider
Stepper
List & Avatar
Card Variants
프로필 카드
디자인 시스템 아키텍트
월간 다운로드
1,284
▲ 12.4% 지난달 대비
프로 플랜
₩12,000 / 월
- ✓ 모든 시스템 접근
- ✓ MD 무제한 다운로드
- ✓ 우선 지원
Overlays
Modal / Dialog
변경 사항을 저장할까요?
저장하지 않으면 편집한 내용이 사라집니다.
Bottom Sheet
Tooltip
토큰 값을 복사합니다
Accordion & Pagination
Accordion
디자인 토큰이란 무엇인가요?▲
색상·타이포·간격 등 디자인 결정을 코드로 옮긴 최소 단위입니다. 토큰만 바꾸면 전체 테마가 전환됩니다.
MD 파일은 어떻게 활용하나요?▼
다크 모드는 어떻게 구현하나요?▼
Pagination