Components
버튼
모든 버튼은 pill(999px) 라운드. 한 화면의 핵심 액션은 Primary 하나로 제한합니다.
변형
강조 위계: Primary > Secondary > Soft > Ghost. Lime은 다크 섹션 전용.
Primary
다크 + 라임 — 페이지당 핵심 액션 하나
Secondary
퍼플 아웃라인 — 보조 액션
Soft
퍼플 틴트 — 선택·활성 표면
Ghost
텍스트형 — 낮은 강조
Lime
다크 배경 위 강조
선택 · 활성 표면
내비게이션 활성 항목과 선택 가능한 타일은 같은 퍼플 틴트 언어를 공유합니다. 사이드바·카탈로그가 이 패턴을 씁니다 — 클릭 한 번으로 끝나는 버튼과 달리, 상태가 유지됩니다.
사이즈
맥락에 따라 3단계. 인라인은 Small, 히어로 CTA는 Large.
Small
Medium
Large
상태
기본
호버
비활성
코드
/* Primary — Dark + Lime */
.btn-primary { background:#0A0A0A; color:#D4FF00; font-weight:800;
padding:16px 32px; border-radius:999px; }
/* Secondary — Purple outline */
.btn-secondary { color:#6B3FF6; border:2px solid #6B3FF6; font-weight:700; }