[Design] 디자인 토큰 시스템 + 브랜드 액센트 컬러

[Malloc72P]

현황

색·간격이 전부 컴포넌트에 하드코딩되어 있다(Tailwind 기본 gray 팔레트를 직접 호출). apps/blog/tailwind.config.js의 theme.extend에는 폰트만 있고 colors가 비어 있다. 브랜드/액센트 컬러가 없어 UI가 black+gray 무채색 일색이며, 검정 계열조차 bg-black/bg-gray-950/bg-gray-900로 제각각 쓰인다.

문제

동일한 의미(헤더 배경, 활성 강조 등)에 서로 다른 값이 쓰여 일관성이 깨지고, 톤 조정 시 전 파일을 수정해야 한다. 다크모드(#8) 도입도 토큰 없이는 어렵다. 시각적 개성·위계도 약하다.

제안

• global.css에 @theme(Tailwind v4) 시맨틱 토큰 정의(--color-brand, --color-surface, --color-text-muted, --color-border 등)
• 컴포넌트를 의미 기반 클래스로 치환, 검정 계열을 단일 토큰으로 통일
• 액센트 컬러 1개 도입(활성 칩·CTA·포커스 링에 절제 있게 적용)

임팩트 / 난이도

임팩트 상 / 난이도 중

---

🤖 코드베이스 조사 기반 작성 (Claude Code)