기초 규칙
밝은 테마와 어두운 테마 모두 액션과 선택에 무채색 의미 색상을 사용합니다. 포커스와 피드백은 각각 별도의 역할을 가집니다.
무채색 액션
primary / primary-foreground선택
surface-selected / foreground포커스
ringColors — Semantic
이 역할은 현재 밝은 테마 또는 어두운 테마를 따릅니다. 아래 색상은 공통 CSS 변수에서 읽습니다.
background
foreground
card
card-foreground
popover
popover-foreground
primary
primary-foreground
primary-hover
surface-selected
secondary
secondary-foreground
muted
muted-foreground
accent
accent-foreground
border
border-strong
input
ring
success
success-bg
warning
warning-bg
error
error-bg
info
info-bg
Colors — Primitive
기본 팔레트는 호환성을 위해 유지합니다. 파란색 팔레트는 기존 기본색이며 기본 액션 색상이 아닙니다.
Gray
50
100
200
300
400
500
600
700
800
900
950
기존 파란색 기본 팔레트
50
100
200
300
400
500
600
700
800
900
950
Destructive
50
100
200
300
400
500
600
700
800
900
950
Colors — Project
프로젝트 색상은 개별 제품을 구분합니다. 공통 액션·포커스·선택 역할을 대체하지 않습니다.
cc
sa
pkm
naeilUi
baby
Typography
한글과 영문 UI에는 Pretendard, 일본어에는 Noto Sans JP를 사용합니다. 고정폭 글꼴 예시는 설정된 대체 글꼴을 사용합니다.
페이지 제목
PageTitle · 2rem · 600
섹션 제목
SectionTitle · 1.25rem · 600
xs · 0.8125rem내일은 여기서 시작됩니다.sm · 0.875rem내일은 여기서 시작됩니다.base · 1rem내일은 여기서 시작됩니다.lg · 1.125rem내일은 여기서 시작됩니다.xl · 1.25rem내일은 여기서 시작됩니다.2xl · 1.5rem내일은 여기서 시작됩니다.3xl · 2rem내일은 여기서 시작됩니다.4xl · 2.25rem내일은 여기서 시작됩니다.고정폭 대체 글꼴
JetBrains Mono, Geist Mono, ui-monospace, monospace
const x = 42;
400 Regular — 본문
500 Medium — 레이블과 컨트롤
600 Semibold — 페이지와 섹션 제목
Spacing
00px14px28px312px416px520px624px832px1040px1248px1664pxRadius
태그 모서리는 4px, 컨트롤은 8px, 패널은 12px입니다.
none · 0pxsm · 4pxmd · 8pxlg · 12pxShadow
shadow-smshadow-mdButton
직접 조작
variant="default" size="default"종류
크기
상태
Input
직접 조작
컨트롤을 변경해 입력 상태를 비교하세요.
Card
모든 서비스가 정상 작동하고 있습니다.
v0.6.0 — Phase 6 Demo
v0.5.0 — Core Components