도움말/자산 사용법

디자인시스템 적용하기

디자인시스템은 컬러·타이포·규칙의 묶음 — 토큰(CSS 변수)만 가져가도 됩니다.

프리뷰로 톤 확인

모든 디자인시스템은 12블록 프리뷰 규격의 한 장짜리 preview.html로 공개됩니다. 컬러 토큰부터 버튼·폼·카드까지 같은 순서로 배치되어 있어, 시스템끼리 나란히 비교할 수 있습니다.

토큰 구조

전 토큰은 :root의 CSS 변수로 선언됩니다. 예를 들어 Warm Welfare 시스템은 --ww-* 접두사를 씁니다.

:root {
  --ww-primary: #e06a4b;   /* 테라코타 CTA */
  --ww-accent:  #f2c94c;   /* 포인트 옐로 */
  --ww-green:   #6f9e80;   /* 보조 그린 */
  --ww-ink:     #44403c;   /* 본문 텍스트 */
  --ww-bg:      #faf6f0;   /* 페이지 배경 */
}

적용 순서

1. 1

   프리뷰에서 톤 확인

   12블록 프리뷰를 훑고 우리 프로젝트에 맞는 톤인지 판단합니다.

2. 2

   필요한 변수만 복사

   코드 탭에서 :root 블록 중 쓸 변수만 골라 복사합니다. 전체를 들여올 필요가 없습니다.

3. 3

   내 프로젝트에 붙여넣기

   내 전역 CSS의 :root에 변수를 추가합니다. 접두사가 있어 기존 변수와 충돌하지 않습니다.

4. 4

   컴포넌트에 매핑

   버튼·카드 등 내 컴포넌트의 색·라운드·간격을 var(--ww-*)로 치환합니다. 프리뷰의 블록 마크업을 매핑 예시로 참고하세요.