프리셋별 컬러 토큰, radius, 간격, 타이포그래피 스케일입니다. 하드코딩 색 대신 항상 이 시맨틱 토큰을 사용하세요.
현재 프리셋의 시맨틱 토큰입니다. 우상단 스위처로 프리셋·라이트/다크를 바꾸면 CSS 변수가 갱신되어 아래 스와치도 자동으로 반영됩니다.
--background페이지 최상위 배경
--foreground기본 본문 텍스트
--card카드·패널 배경
--card-foreground카드 위 텍스트
--popover팝오버·드롭다운·툴팁 배경
--popover-foreground팝오버 위 텍스트
--primary주요 액션(버튼·강조 요소) 배경
--primary-foregroundprimary 위 텍스트
--secondary보조 액션 배경
--secondary-foregroundsecondary 위 텍스트
--muted톤 다운된 배경(구분 영역)
--muted-foreground설명·보조 텍스트
--accenthover/선택 상태 강조 배경
--accent-foregroundaccent 위 텍스트
--destructive삭제·위험 액션
--success성공·완료 상태
--warning경고 상태
--gain한국식 등락 — 이익/상승(빨강)
--loss한국식 등락 — 손실/하락(파랑)
--border테두리 선
--input입력 필드 테두리
--ring포커스 링
--chart-1차트 시리즈 1
--chart-2차트 시리즈 2
--chart-3차트 시리즈 3
--chart-4차트 시리즈 4
--chart-5차트 시리즈 5
한국식 시세 등락 색(--gain=이익/상승, --loss=손실/하락)입니다. 다른 시맨틱 색과 동일하게 모든 프리셋에서 같은 값을 쓰며(브랜드가 아닌 도메인 관례), lib/finance/rate.ts의 rateColor/rateText, lib/finance/format-won.ts의 formatWon과 함께 씁니다. 자세한 데모는 /components/rate-color· /components/format-won를 참고하세요.
--gain한국식 등락 — 이익/상승(빨강)
--loss한국식 등락 — 손실/하락(파랑)
rateColor / rateText
formatWon
기본 radius는 6px(절제된 곡선)이고, 나머지 스텝은 여기에 비례합니다.
Tailwind 기본 4px 그리드 중 권장 스텝입니다. 클래스는 p-{n}, gap-{n} 등으로 그대로 사용합니다.
14px28px312px416px624px832px1248px1664px페이지 제목 · 섹션 · 본문 · 보조 · 코드 5단 스케일입니다. 사이드바 상단 스위처로 폰트 프리셋을 바꾸면 사이트 전체 본문 서체가 즉시 반영됩니다. 모든 폰트는 next/font/local로 레포에 self-host되어 있어 폐쇄망 환경에서도 외부 CDN 요청 없이 동작합니다.
text-3xl font-semibold tracking-tightdoksam-ui
text-lg font-medium컬러 토큰
text-sm시맨틱 토큰만 사용하고 하드코딩 색은 금지합니다.
text-xs text-muted-foreground프리셋 전환 시 자동으로 반영됩니다.
rounded-sm bg-muted px-1.5 py-0.5 font-mono text-smvar(--primary)
Geist · Noto Sans KR · IBM Plex Sans KR · Nanum Gothic · Space Grotesk — 모두 SIL Open Font License(OFL) 무료 폰트이며, assets/fonts/ 에 self-host(woff2 내장)되어 폐쇄망에서도 외부 CDN 요청 없이 동작합니다. Space Grotesk 는 라틴 전용 폰트로 한글은 시스템 폰트로 폴백되며, mono 요소는 페어링 폰트인 Space Mono 로 함께 전환됩니다(다른 프리셋은 Geist Mono 유지).
소비 프로젝트의 globals.css에 붙여넣을 프리셋별 CSS 변수 블록입니다.