Color System

색상 토큰은 src/styles/tokens.css(@theme)에서 정의합니다. 새 회사에 템플릿을 적용할 때도 이 표의 토큰 이름과 용도는 그대로 유지하고 Hex 값만 교체합니다.

Brand Color · Gray Scale · Semantic Color

tokens.css @theme 기준 실제 값

Brand Color

주 브랜드 톤 — CTA, 강조, Dark 섹션

brand-50

#eef3f9

배경 강조, badge bg

brand-100

#d5e3f2

연한 배경

brand-300

#6ba8d9

보조 강조

brand-400

#1e88e5

hover / sub accent

brand-600

#1e4b85

주요 강조, Dark 섹션 CTA

brand-700

#183f6f

기본 CTA, eyebrow, accent 라인

brand-800

#123358

hover / active

Gray Scale (Neutral / Stone)

본문, 배경, 테두리 — stone-50~950

stone-50

#fafaf9

섹션 보조 배경, 페이지 헤더 배경

stone-100

#f5f5f4

이미지 placeholder 배경, 태그 bg

stone-200

#e7e5e4

border(카드, 구분선)

stone-400

#a8a29e

placeholder 텍스트

stone-600

#57534e

본문 텍스트

stone-700

#44403c

본문 강조 텍스트

stone-900

#1c1917

제목, 강조 텍스트

stone-950

#0c0a09

Hero / Dark 섹션 배경

Semantic Color

상태·알림 전용 — 브랜드 톤과 분리해 항상 동일한 의미로 사용

success-50 / success-600

#16a34a

성공, 승인, 정상 상태

warning-50 / warning-600

#d97706

주의, 대기, 확인 필요

error-50 / error-600

#dc2626

오류, 필수 표시(*), 실패

info-50 / info-600

#2563eb

정보성 안내

Project

HANSUNG

Version

1.0.0

Stack

Tailwind CSS v4 · HTML5 · Vanilla JavaScript

Last Update

2026-07-18

Build

Tailwind CLI (minified) · No bundler · Static Hosting