색상
명확한 색상 체계
배경, 텍스트, 테두리, 강조색 등 명확히 정의된 색상 토큰을 사용합니다.
Yeogi YDS
Travel Made Lively
여기어때 스타일의 여행 플랫폼 시스템. 라이블리 레드와 시안 블루의 역할 분리, yds 라디우스·섀도 토큰 체계가 특징입니다.
MD 다운로드색상 팔레트
Brand Swatches
#ffffff#f94239#1d8bff#f5f5f5#222222Semantic Tokens
Background
#ffffff
Surface
#f5f5f5
Text
#222222
Muted
#707070
Border
#dcdcdc
Point
#f94239
타이포그래피
Display
Travel Made Lively
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 | #f5f5f5 | Surface | 활성 |
| --color-text | #222222 | Text | 활성 |
| --color-muted | #707070 | Muted | 활성 |
| --color-border | #dcdcdc | Border | 활성 |
| --color-point | #f94239 | Point | 활성 |
컴포넌트 예시
타이포
체계적인 타이포그래피
헤딩부터 캡션까지 일관된 타입 스케일로 정보 위계를 형성합니다.
레이아웃
그리드 시스템
반응형 그리드와 간격 토큰으로 화면 크기에 상관없이 일관된 레이아웃을 유지합니다.
인용구 & 강조
“좋은 디자인은 가능한 한 적게 디자인하는 것입니다. 불필요한 것을 배제할수록 본질이 남습니다.”
— Dieter Rams
디자인 시스템은 단순한 스타일 가이드가 아닙니다. 팀이 공유하는 공통의 언어 이자, 제품 전반의 일관된 사용자 경험을 만드는 토대입니다.
컨트롤
Switch
켜짐꺼짐
Progress
진행률72%
진행률35%
Slider
Stepper
리스트 & 아바타
카드 변형
프로필 카드
디자인 시스템 아키텍트
월간 다운로드
1,284
▲ 12.4% 지난달 대비
프로 플랜
₩12,000 / 월
- ✓ 모든 시스템 접근
- ✓ MD 무제한 다운로드
- ✓ 우선 지원
오버레이
Modal / Dialog
변경 사항을 저장할까요?
저장하지 않으면 편집한 내용이 사라집니다.
Bottom Sheet
Tooltip
토큰 값을 복사합니다
아코디언 & 페이지네이션
Accordion
디자인 토큰이란 무엇인가요?▲
색상·타이포·간격 등 디자인 결정을 코드로 옮긴 최소 단위입니다. 토큰만 바꾸면 전체 테마가 전환됩니다.
MD 파일은 어떻게 활용하나요?▼
다크 모드는 어떻게 구현하나요?▼
Pagination