Pop Site 토큰과 Pretendard로 구성한 디자인 시스템.
색·타이포·컴포넌트의 단일 출처 (single source of truth).
Pretendard ExtraBold로 작성된 워드마크. 첫 'i'는 Cormorant Garamond Italic으로 강조해 브랜드 시그니처를 만들어요. 가운데 점은 'AI'를 분리하는 작은 동그라미예요.
파비콘 · 앱 아이콘 — 워드마크의 'Li' 부분만 추출해 다양한 사이즈에서 사용해요.
Crisp canvas, bold ink, electric blue. Action Blue는 CTA·링크 등 행동을 유도하는 곳에만 사용해 시그널을 보존해요.
사이트 전체의 뼈대를 구성하는 색. 검정·흰색을 기반으로 한 모노톤 캔버스 위에 액션 블루가 시그널 역할을 해요.
텍스트 위계·디바이더·서브 배경에 사용. 진한 → 옅은 순서로 본문, 보조, 약한 텍스트, 디바이더, 카드 배경에 차례로 매핑돼요.
Action Blue 주변에서 보조 시각 신호를 보내는 색. 밝은 배경의 영역·호버 상태·hero 워시 그라데이션 등에 활용해요.
Pretendard Variable이 한국어 메인. Inter는 숫자·영문 모노 캡션에 한정해 사용해요. 한국어 줄나눔은 keep-all + balance.
Pop Site 정체성인 26px pill 라디우스. Primary(Action Blue) · Ghost(테두리) · 다크 배경 변형 3 × 사이즈 3 = 9가지 조합.
Pop Site의 10px 카드 라디우스가 정체성. 작은 영역엔 999px pill, 메타 정보엔 mono 4px badge를 써요.
흰 배경 + 옅은 테두리. 정보 그룹의 기본 컨테이너.
Mist Gray 배경으로 페이지에서 가볍게 후퇴시키고 싶을 때 사용.
Coal Black 배경. 강조 섹션이나 다크 hero 영역에서 사용.
10px 카드와 26px pill 버튼이 Pop Site의 정체성. 작은 메타 요소엔 4px, 큰 영역엔 16~22px을 사용해요.
컴포넌트 안에서 직접 hex를 쓰지 마세요. 의미 단위 변수를 우선 사용해서 향후 토큰 변경이 한 번에 반영되도록 해요.
| 토큰 | 값 | 용도 |
|---|---|---|
| --text-primary | #000000 | 본문·헤딩 등 주요 텍스트 |
| --text-secondary | #171717 | 보조 헤딩, 카드 안 강조 |
| --text-tertiary | #5E5E5E | 설명·서브 텍스트 |
| --text-muted | #6E6E73 | 캡션·푸터·메타 |
| --text-inverse | #FFFFFF | 다크 배경 위 텍스트 |
| --surface-page | #FFFFFF | 페이지 배경 |
| --surface-card | #FFFFFF | 카드·패널 배경 |
| --surface-subtle | #F5F5F7 | 옅은 분리 배경 |
| --border-strong | #171717 | 강한 테두리, Ghost 버튼 |
| --border-default | #D2D2D7 | 인풋·디바이더 |
| --border-subtle | rgba(0,0,0,0.06) | 카드·미세 분리선 |
동일한 토큰이라도 어디에 쓰느냐에 따라 인상이 완전히 달라져요. 아래 원칙을 지키면 일관된 브랜드 톤을 유지할 수 있어요.
word-break: keep-all + text-wrap: balance로 줄나눔을 자연스럽게._shared.css를 새 페이지에 추가하지 않아요.