# KRDS 디자인 토큰

| 항목 | 경로 |
|------|------|
| CSS | `css/tokens.css` (`common.css`에서 `@import`) |
| 근거 | 디지털 정부서비스 UI/UX 가이드라인 (2025.08) |

관련: [layout.md](./layout.md) · [적용가이드.md](./적용가이드.md)

---

## 쓰는 방법

컴포넌트 색은 **시맨틱 토큰** 또는 킷 별칭을 씁니다. primitive(`--krds-color-light-primary-50` 등)를 직접 쓰지 않습니다.

| 별칭 | 값 | 용도 |
|------|----|------|
| `--ccolor` | primary-50 `#256EF4` | 주요 버튼(`.ccolor`) · 강조 |
| `--scolor` | primary-60 `#0B50D0` | 버튼 hover/pressed · 본문 링크성 강조 |
| `--krds-color-text-basic` | gray-90 `#1E2124` | 본문·로고 |
| `--krds-color-text-primary` | primary-60 | GNB 현재 · 링크성 텍스트 |
| `--krds-color-action-primary` | primary-50 | 액션(버튼 배경) |
| `--krds-color-border` | gray-20 `#CDD1D5` | 구분선 |

기관 색을 바꿀 때는 `:root`에서 `--krds-color-light-primary-*` 스케일만 교체하면 `--ccolor`까지 따라갑니다.

---

## Primary (정부 청색)

| 단계 | 값 | 역할 |
|------|----|------|
| 5 | `#ECF2FE` | 표면(연한) |
| 50 | `#256EF4` | 액션 |
| 60 | `#0B50D0` | 텍스트·pressed (대비율) |
| 90 | `#03163A` | 가장 진한 단계 |

---

## 시스템 색

| 의미 | 토큰 | 값 |
|------|------|-----|
| 위험 | `--krds-color-danger` | `#DE3412` |
| 성공 | `--krds-color-success` | `#228738` |
| 정보 | `--krds-color-information` | `#0B78CB` |
| 경고 텍스트 | `--krds-color-warning` | `#9E6A00` |

---

## 복사 패키지

```
css/tokens.css
css/normalize.css
css/common.css          ← tokens.css import
```