Design System
디자인 시스템
새 페이지를 만들 때 참고하는 단일 기준입니다. 색상·타이포그래피· 버튼·간격이 모두 같은 토큰에서 나오므로 어디서나 일관됩니다. 전체 규칙은 저장소의 DESIGN_SYSTEM.md 문서를 참고하세요.
색상
브랜드 스케일과 중립(ink) 스케일, 그리고 의미를 가진 시맨틱 토큰으로 구성됩니다. 항상 토큰 이름(bg-brand-600 등)으로 사용하세요.
Brand
50#eef2ff
100#e0e7ff
200#c7d2fe
300#a5b4fc
400#818cf8
500#6366f1
600#4f46e5
700#4338ca
800#3730a3
900#312e81
950#1e1b4b
Ink (neutral)
50#f8fafc
100#f1f5f9
200#e2e8f0
300#cbd5e1
400#94a3b8
500#64748b
600#475569
700#334155
800#1e293b
900#0f172a
950#020617
Semantic
primary
주요 동작 (버튼, 링크)
foreground
기본 텍스트
muted-foreground
보조 텍스트
surface
섹션 배경
border
테두리
success
성공 상태
warning
경고 상태
danger
오류/삭제
타이포그래피
폰트는 Pretendard. 제목은 clamp()로 화면 크기에 따라 부드럽게 조절됩니다. 본문 기준 16px, 줄 간격 1.6~1.8.
제목 텍스트 Aa 가나다
h1 / .h1clamp(36–56px)w800페이지 대표 제목
제목 텍스트 Aa 가나다
h2 / .h2clamp(28–42px)w800섹션 제목
제목 텍스트 Aa 가나다
h3 / .h3clamp(22–30px)w700하위 제목
제목 텍스트 Aa 가나다
h4 / .h4clamp(18–22px)w700카드 제목
제목 텍스트 Aa 가나다
h5 / .h518pxw600작은 제목
제목 텍스트 Aa 가나다
h6 / .h616pxw600라벨 제목
본문(p) — 16px, line-height 1.7. 읽기 편한 길이를 유지하기 위해 본문 너비는 약 70자 내외로 제한하는 것을 권장합니다.
EYEBROW · 섹션 라벨배지
defaultbrandoutlinesuccesswarningdanger
폼 요소
Input · Textarea · Select은 동일한 높이(44px)·테두리·포커스 링을 공유합니다. Field로 감싸 라벨과 도움말을 일관되게 표시합니다.
도움말 텍스트가 여기에 표시됩니다.
카드
카드 제목
카드 설명 텍스트입니다.
rounded-xl · border · shadow-sm. 콘텐츠를 담는 기본 컨테이너.
아이콘 카드
서비스/특징을 소개할 때 사용하는 패턴.
강조 카드
CTA나 강조 영역에 사용하는 그라데이션 카드.
모서리 & 그림자
Radius
sm
md
lg
xl
2xl
full
Shadow
sm
md
lg
xl
간격 & 레이아웃
4px 기반 스케일. 섹션 세로 여백은 py-16~28(64–112px), 컨테이너 최대폭은 max-w-page(1200px) + 좌우 패딩 20–32px.
2 · 8px
4 · 16px
6 · 24px
8 · 32px
12 · 48px
16 · 64px