Design System Test
디자인 시스템 테스트
White background, white fill, 연한 주황색 강조, 직각 모서리, 무그림자, full-wide 레이아웃을 한 화면에서 검증합니다.
Color Tokens
색상 테스트
brand-white
--color-brand-white
모든 화면 fill의 기준
var(--color-brand-white)brand-light-brown
--color-brand-light-brown
따뜻한 배경/테두리 계열
var(--color-brand-light-brown)brand-light-orange
--color-brand-light-orange
연한 주황색 강조 계열
var(--color-brand-light-orange)bg
--color-bg
White 페이지 배경
var(--color-bg)surface
--color-surface
섹션 표면, white 고정
var(--color-surface)card
--color-card
카드/패널, white 고정
var(--color-card)tag
--color-tag
태그 배경, white 고정
var(--color-tag)accent
--color-accent
링크/텍스트/강조선
var(--color-accent)border
--color-border
구분선/테두리
var(--color-border)text
--color-text
기본 텍스트
var(--color-text)muted
--color-muted
보조 텍스트
var(--color-muted)Font Tokens
폰트 스케일 테스트
.text-xs작은 보조 정보 12px 계열 — Pretendard 한글/English 12345
.text-sm메타/캡션 14px 계열 — Pretendard 한글/English 12345
.text-base본문 기본 16px 계열 — Pretendard 한글/English 12345
.text-lg강조 본문 18px 계열 — Pretendard 한글/English 12345
.text-xl소제목 20px 계열 — Pretendard 한글/English 12345
.text-2xl섹션 제목 24px 계열 — Pretendard 한글/English 12345
.text-3xl페이지 제목 30px 계열 — Pretendard 한글/English 12345
.text-4xl히어로 제목 36px 계열 — Pretendard 한글/English 12345
.text-5xl대형 히어로 48px 계열 — Pretendard 한글/English 12345
HTML / Markdown Tags
태그별 폰트 테스트
h1 제목: 디자인 시스템 테스트
h2 제목: 색상과 폰트 계층
h3 제목: 섹션 내부 제목
h4 제목: 카드 제목
h5 제목: 작은 그룹 제목
h6 제목: 보조 제목
p 본문입니다. strong 강조, em 기울임, del 취소선, small 보조 문장, 링크 텍스트를 함께 확인합니다.
blockquote 인용문은 흰색 배경과 강조선만 사용합니다.
- ul/li 목록 첫 번째 항목
- ul/li 목록 두 번째 항목
- ol/li 순서 목록 첫 번째 항목
- ol/li 순서 목록 두 번째 항목
인라인 코드는 const theme = "white-only";처럼 표시합니다.
function verifyDesignSystem() {
return "white background + light-orange accent";
}| 토큰 | 역할 | 상태 |
|---|---|---|
| Warm Brown | 페이지 배경 | 적용 |
| Light Orange | 텍스트/강조선 | 적용 |
Tag Samples
태그 컴포넌트 테스트
페이지 배경은 흰색이고, 태그 fill은 흰색이며 텍스트와 테두리만 중앙 token을 사용합니다.