언제 쓰나
디자인 시스템을 새로 만드는데 색상 팔레트 선정부터 막힐 때.
브랜드 리뉴얼 후 "이 분위기에 맞는 색이 뭔지" 감이 안 올 때.
개발팀과 CSS 변수 이름 체계를 처음부터 정의해야 할 때.
색상 토큰 계층 구조
flowchart TD
A["🎨 브랜드 키워드\n무드·감성 입력"] --> B["색상 팔레트 생성"]
B --> P["Primary\n브랜드 대표색"]
B --> N["Neutral\n텍스트·배경·테두리"]
B --> S["Semantic\n성공·경고·에러·정보"]
P --> PT["Tints & Shades\n100~900 스케일"]
N --> NT["Gray Scale\n50~950"]
S --> ST["상태별 쌍\n배경색 + 텍스트색"]
PT & NT & ST --> T["CSS / Figma\n토큰 네이밍"]
T --> D["📐 타이포그래피\n스케일 연결"]
프롬프트 (복사)
당신은 디자인 시스템 전문가입니다. 아래 브랜드 정보를 바탕으로 색상과 타이포그래피 토큰을 제안해 주세요.
**브랜드 정보**
- 서비스명·업종: [예: 헬스케어 스타트업 "웰로"]
- 브랜드 무드 키워드: [예: 신뢰·따뜻함·전문성·접근 용이성]
- 피하고 싶은 느낌: [예: 차갑고 딱딱한 느낌, 의료용 무채색]
- 참고 브랜드: [예: Headspace, Calm 느낌]
- 사용 플랫폼: [예: 웹 앱 + iOS 앱]
- 다크모드 필요 여부: [예: 필요 / 불필요]
---
다음 항목으로 제안해 주세요.
**색상 토큰**
Primary 색상
- 기본(500): HEX 값 + 선택 이유
- 스케일 100~900: 각 HEX 값 (밝은 순)
- Figma 토큰명 형식: [예: color/primary/500]
Neutral (Gray) 색상
- 50~950 스케일 (주요 단계)
- 텍스트·배경·테두리 용도 매핑
Semantic 색상
- Success / Warning / Error / Info 각각: 배경색 + 텍스트색 쌍
**타이포그래피 스케일**
| 토큰명 | 크기(px/rem) | 줄간격 | 용도 |
|--------|------------|--------|------|
| text/xs | | | |
| text/sm | | | |
| text/md | | | |
| text/lg | | | |
| text/xl | | | |
| text/2xl | | | |
권장 폰트 패밀리 (한글·영문 각각, 무료 사용 가능한 것 우선)
**선택 근거** — 이 브랜드 키워드와 색상 선택의 연결 설명 (3~4줄)
CSS 커스텀 프로퍼티(--color-primary-500) 형식으로도 함께 출력해 주세요.
잘 쓰는 팁
- 참고 브랜드 를 2~3개 제시하면 추상적인 키워드보다 훨씬 정밀한 방향이 나옵니다.
- 제안된 색상은 WCAG 2.1 명도 대비 기준(AA: 4.5:1) 을 만족하는지 직접 확인하세요. "이 색상 조합의 접근성 검사를 해 줘"라고 이어 요청할 수도 있습니다.
- Figma에서 Variables로 쓰려면 "이 토큰을 Figma Variables JSON 형식으로 내보내 줘"라고 이어서 요청하면 됩니다.