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