o2o-negosium-original/front/design.md

## 색상 (Color) 값은 tokens.css의 :root(light) / .dark(dark) 정의. 모두 hex (일부 8자리 hex = 알파 포함), --background-rgb만 raw rgb. | 토큰 | Tailwind 유틸 | Light | Dark | 용도 | |---|---|---|---|---| | --background | bg-background | #ffffff (흰색) | #0a0a0a (거의 검정) | 페이지 배경 | | --background-rgb | — | 250, 250, 250 | 9, 9, 11 | rgba() 조합용 raw 값 | | --foreground | text-foreground | #0a0a0a | #fafafa | 기본 텍스트 | | --card | bg-card | #ffffff | #171717 | 카드 배경 | | --card-foreground | text-card-foreground | #0a0a0a | #fafafa | 카드 텍스트 | | --popover | bg-popover | #ffffff | #171717 | 팝오버 배경 | | --popover-foreground | text-popover-foreground | #0a0a0a | #fafafa | 팝오버 텍스트 | | --primary | bg-primary | #171717 (다크 그레이) | #e5e5e5 (라이트 그레이) | 주요 액션/버튼 | | --primary-foreground | text-primary-foreground | #fafafa | #171717 | primary 위 텍스트 | | --secondary | bg-secondary | #f5f5f5 | #262626 | 보조 배경 | | --secondary-foreground | text-secondary-foreground | #171717 | #fafafa | 보조 텍스트 | | --muted | bg-muted | #f5f5f5 | #262626 | 흐린 배경 | | --muted-foreground | text-muted-foreground | #737373 | #a1a1a1 | 흐린 텍스트/캡션 | | --accent | bg-accent | #f5f5f5 | #262626 | 강조 배경(hover 등) | | --accent-foreground | text-accent-foreground | #171717 | #fafafa | accent 위 텍스트 | | --border | border-border | #e5e5e5 | #ffffff1a (흰색 10%) | 테두리/구분선 | | --input | border-input | #e5e5e5 | #ffffff26 (흰색 15%) | 인풋 테두리 | | --ring | ring-ring | #a1a1a1 | #737373 | 포커스 링 | | --destructive | bg-destructive | #e7000b (빨강) | #ff6467 | 위험/삭제 | | --success | bg-success | #10b981 (초록) | #10b981 | 성공 (light/dark 동일) | | --warning | bg-warning | #f59e0b (주황) | #f59e0b | 경고 (light/dark 동일) | ### 차트 (Chart) — 무채색 스케일 | 토큰 | Light | Dark | |---|---|---| | --chart-1 | #d4d4d4 | #d4d4d4 | | --chart-2 | #737373 | #737373 | | --chart-3 | #525252 | #525252 | | --chart-4 | #404040 | #404040 | | --chart-5 | #262626 | #262626 | ### 사이드바 (Sidebar) | 토큰 | Light | Dark | |---|---|---| | --sidebar | #fafafa | #171717 | | --sidebar-foreground | #0a0a0a | #fafafa | | --sidebar-primary | #171717 | #1447e6 (보라) | | --sidebar-primary-foreground | #fafafa | #fafafa | | --sidebar-accent | #f5f5f5 | #262626 | | --sidebar-accent-foreground | #171717 | #fafafa | | --sidebar-border | #e5e5e5 | #ffffff1a | | --sidebar-ring | #a1a1a1 | #737373 |

타이포그래피 (Typography)

<Typography variant="..."> 로 사용. 출처: src/components/ui/typography.tsx. defaultVariant는 body.

variant	기본 태그	클래스	용도
h1	<h1>	text-4xl font-bold tracking-tight text-foreground	페이지 제목
h2	<h2>	text-2xl font-bold tracking-tight text-foreground	섹션 제목
h3	<h3>	text-xl font-bold text-foreground	서브 제목
h4	<h4>	text-lg font-semibold text-foreground	소제목
body	<p>	text-base text-foreground	본문 (기본값)
small	<p>	text-sm text-foreground	작은 본문
muted	<p>	text-sm text-muted-foreground leading-relaxed	보조 설명
label	<span>	text-xs font-semibold uppercase tracking-wider text-foreground	폼 라벨
mono	<span>	text-xs font-mono uppercase tracking-wider text-muted-foreground	콘솔/메타 캡션
caption	<span>	text-[11px] text-muted-foreground leading-normal	사이드바/헤더 chrome 메타

as prop으로 의미 태그 교체 가능(예: label variant를 <label htmlFor>로). 색은 variant에 토큰 클래스로 고정됨.

모든 텍스트 색은 text-foreground(또는 muted 계열)로 토큰화됨.

---

폰트 (Font Family)

토큰	스택	비고
--font-sans	'Pretendard Variable', 'Geist Variable', system-ui, sans-serif	본문 기본 (@theme inline이 최종 적용)
--font-mono	'JetBrains Mono', ui-monospace, SFMono-Regular, monospace	모노
--font-heading	var(--font-sans)	헤딩 = sans

Pretendard는 public/fonts/PretendardVariable.woff2로 self-host (weight 45–920 가변).

---

모서리 반경 (Radius)

기준값 --radius: 0.625rem (10px). 나머지는 배수로 계산됨 (@theme inline).

토큰	Tailwind 유틸	계산식	값
--radius-sm	rounded-sm	radius * 0.6	0.375rem (6px)
--radius-md	rounded-md	radius * 0.8	0.5rem (8px)
--radius-lg	rounded-lg	radius * 1.0	0.625rem (10px)
--radius-xl	rounded-xl	radius * 1.4	0.875rem (14px)
--radius-2xl	rounded-2xl	radius * 1.8	1.125rem (18px)
--radius-3xl	rounded-3xl	radius * 2.2	1.375rem (22px)
--radius-4xl	rounded-4xl	radius * 2.6	1.625rem (26px)

---

기타

• 스크롤바: 6px, thumb = --border, hover thumb = --muted-foreground (webkit)
• 전역 전환: body에 background-color/color 0.2s ease (테마 전환용)
• 다크 모드: .dark 클래스 기반 (@custom-variant dark)
• 간격(spacing): 별도 토큰 정의 없음 — Tailwind 기본 스케일 사용