🎨 1. 색상 토큰 (10개)

50/100/200~900 9단계 + 흰색 1개. 팔레트 생성기로 메인 색 1개 뽑고 명도 단계 자동 생성.

--brand-50:  #fdf2f8;
--brand-100: #fce7f3;
--brand-500: #ec4899;  /* 메인 */
--brand-700: #be185d;
--brand-900: #831843;

--gray-50, --gray-100, ... --gray-900
--white: #fff;

✏️ 2. 타이포 스케일 (6단계)

1.25배수(Major Third) 추천: 12/14/16/18/24/32/48px. em-px 변환으로 rem 변환.

📏 3. 간격 시스템 (4의 배수)

4 / 8 / 12 / 16 / 24 / 32 / 48 / 64. 8 기준으로 하면 모든 간격이 균형 잡힘.

⚡ 보너스: 컴포넌트 5개

• Button: primary, secondary, ghost
• Input: text, error 상태
• Card: 박스 그림자 1개
• Badge: 카테고리 표시용
• Modal: overlay + 박스

이 5개만 있어도 웬만한 사이트 다 만듭니다.

🔧 한 파일에 다 넣기

/* tokens.css */
:root {
  /* Color */
  --c-brand: #ec4899;
  --c-text: #1e293b;
  --c-bg: #fff;

  /* Type */
  --t-sm: 14px;
  --t-base: 16px;
  --t-lg: 24px;
  --t-xl: 32px;

  /* Space (4 단위) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;

  /* Radius */
  --r-sm: 6px;
  --r-md: 12px;
}

🛠 도구

• 팔레트: 팔레트 생성기
• 대비: WCAG 대비
• em-px: 단위 변환
• 색 변환: HEX/RGB

💡 현실: 1인 프로젝트는 토큰 30개로 충분. Figma Variables 안 써도 CSS 변수면 끝.