도움말/자산 사용법

디자인시스템 적용하기

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

프리뷰로 톤 확인

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

토큰 구조

모든 토큰은 :root의 CSS 변수로 선언되며, DesignSkill 배포 표준 접두는 --ds-*입니다. (일부 초기 자산은 --ww-* 같은 브랜드 접두를 사용합니다 — 접두만 다를 뿐 구조는 동일합니다.)

:root {
  --ds-primary: #fae100;   /* 브랜드 메인 (실측 원색) */
  --ds-accent:  #ff0919;   /* 포인트 컬러 */
  --ds-ink:     #000000;   /* 본문 텍스트 */
  --ds-bg:      #ffffff;   /* 페이지 배경 */
  --ds-radius-1: 8px;      /* 라운드 스케일 */
}

적용 순서

1. 1

   프리뷰에서 톤 확인

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

2. 2

   필요한 변수만 복사

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

3. 3

   내 프로젝트에 붙여넣기

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

4. 4

   컴포넌트에 매핑

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