Foundations
컬러
White 베이스 위 Dark·Purple·Lime 3색 시스템과 시맨틱 토큰. 스와치를 클릭하면 HEX가 복사됩니다.
Primary
브랜드를 정의하는 네 가지 핵심 색.
Neutrals
텍스트·보더·배경의 회색 위계.
색상 비율
White 베이스에서 권장하는 면적 비율. Lime은 한 화면에 1–2군데로 제한합니다.
White 70%
Dark 20%
Purple 7%
Lime 3%
Lime 사용 규칙
명도가 높아 화이트 위 텍스트로는 가독성이 무너집니다. 반드시 다크 위에서만.
권장
다크 배경 위 액센트
- · 다크 컨테이너 위 CTA 텍스트·헤드라인
- · 얇은 그래픽 — 언더라인·구분선·아이콘 stroke
- · 다크 pill 뱃지 텍스트
금지
화이트 위 텍스트 (가독성 붕괴)
- · 화이트 배경 위 본문·헤딩 텍스트
- · 큰 면적의 Lime 솔리드 블록 (화이트 위)
- · 본문 단락 안 강조용 텍스트 컬러
CSS 토큰
복사해서 바로 사용하는 커스텀 프로퍼티.
:root {
--color-dark: #0A0A0A;
--color-purple: #6B3FF6;
--color-lime: #D4FF00;
--color-white: #FFFFFF;
--gray-900: #1A1A1A;
--gray-600: #6B6B6B;
--gray-200: #E5E5E5;
--gray-50: #F7F7F7;
}