INTERNAL
스타일가이드
사이트를 조립하는 토큰과 부품들이에요. 새 UI를 만들기 전에 여기 있는 프리미티브부터 확인해 주세요. 규칙은 docs/conventions.md, 말투는 docs/copy-guide.md에 있어요.
컬러 토큰
라이트=경찰=brand-blue / 다크=도둑=brand-green. 포인트 색은 반드시 쌍으로
brand-blue
#3F63D9 · 경찰
brand-green
#38F55B · 도둑
brand-ink
제목 텍스트
brand-blue-bg
옅은 배경
app-black
다크 배경
app-black-900
다크 표면
app-black-800
다크 강조면
타이포그래피
Pretendard · 제목은 extrabold + tracking-tight
페이지 제목 (text-4xl~5xl)
섹션 제목 (text-3xl~4xl)
소제목 (text-xl bold)
본문 리드 (text-lg slate-600). 다정하지만 군더더기 없는 해요체로 써요.
본문 기본 (text-base slate-600 / dark:slate-300)
보조 정보 (text-sm slate-400 / dark:slate-500)
Button
ui/Button - variant="primary|inverse|outline" · size="md|lg" · href 주면 Link로
Badge
ui/Badge - variant="soft|outline"
SectionHeading
ui/SectionHeading - eyebrow + title + description · center 옵션
EYEBROW
섹션 제목이 이렇게
설명이 이 자리에 와요. 아이브로·제목·설명이 한 세트예요.
CharacterDuo
ui/CharacterDuo - pose="default|search" · size="sm|md|lg|xl" · 냥파와 도둥이는 함께 등장이 기본
sm
md
lg · pose="search"
왼쪽이 냥파(특수치즈수사대 형사, 검거율 1.8%), 오른쪽이 도둥이(유력 용의자, 반치즈주의자). 설정은 docs/copy-guide.md
EmptyState
ui/EmptyState - 빈 목록·준비중·감사 화면의 공통 골격
아직 첫 이야기를 준비하고 있어요
곧 팀의 발자국으로 채워질 자리예요.
PostCard
blog/PostCard - variant="full|compact" · 커버 없으면 캐릭터 플레이스홀더
Section
ui/Section - 페이지 섹션 래퍼 · variant="plain|muted|brand"
plain - 기본 배경
muted - 옅은 배경
brand - CTA용 브랜드 배경
CaptionedFigure
ui/CaptionedFigure - 고정 높이 삽화 박스 + 모노 캡션 (비율 달라도 정렬 유지)
Input
ui/Input - 포커스 시 브랜드색 테두리
Modal
ui/Modal - 포털 + 백드롭 + ESC 닫기 골격. 카드 내용은 children이 결정 (EventModal·GameResultModal·랭킹에서 사용 중)
오버레이 컴포넌트라 여기선 정적으로 전시하지 않아요. 사용 예시는 components/home/EventModal.tsx를 참고하세요.