# KRDS (범정부 UI/UX 디자인 시스템) 토큰 정리

조사일: 2026-09-29
용도: "같은 5장 발표자료를 디자인 시스템별 스타일로" 비교할 때 AI에 붙이는 참고 자료. 아래 값은 모두 공식 파일에서 그대로 옮긴 것이며, 임의로 만든 값은 없다.

## 출처

| 구분 | URL | 비고 |
|---|---|---|
| 공식 사이트 | https://www.krds.go.kr | 행정안전부 |
| 색상 가이드 | https://www.krds.go.kr/html/site/style/style_02.html | 팔레트, 매직넘버, 60-30-10 비율 |
| 타이포그래피 가이드 | https://www.krds.go.kr/html/site/style/style_03.html | 글자 스케일 표 (px, 굵기, 줄간격) |
| 형태(래디어스) 가이드 | https://www.krds.go.kr/html/site/style/style_04.html | 래디어스 5단계 |
| 레이아웃(간격) 가이드 | https://www.krds.go.kr/html/site/style/style_05.html | 8-point grid, gap 사용 규칙 |
| 디자인 토큰 가이드 | https://www.krds.go.kr/html/site/style/style_07.html | |
| 공식 GitHub | https://github.com/KRDS-uiux/krds-uiux | npm 패키지 `krds-uiux` |
| 토큰 원본 파일 | https://raw.githubusercontent.com/KRDS-uiux/krds-uiux/main/resources/css/token/krds_tokens.css | "Generated on Mon, Dec 9, 2024" 표기. 이 문서의 HEX 값은 전부 이 파일 기준 |

## 라이선스

- 저작권 페이지: https://www.krds.go.kr/html/site/utility/utility_06.html
- **공공누리 제1유형**. 상업적, 비상업적 목적 모두 자유 사용, 변경 및 2차적 저작물 제작/배포 허용.
- 조건: **출처 표기 필수.** 공식 예시 문구: "본 저작물은 행정안전부에서 2024년 작성하여 공공누리 제1유형으로 개방한 '범정부 UI/UX 디자인시스템(KRDS)'을 이용하였으며, 해당 저작물은 'KRDS 디자인시스템 홈페이지(www.krds.go.kr)에서 무료로 다운받으실 수 있습니다."
- GitHub 저장소에는 별도 오픈소스 라이선스 파일이 없고(README에 "KRDS의 이용약관을 따름"), 위 저작권 페이지가 기준이다.
- 주의: 정부 상징(태극 문양 등)이나 "대한민국 공식 전자정부 누리집" 표시는 쓰지 말 것. 색과 규칙만 참고.

## 단위 주의

토큰 파일은 rem 단위이고 KRDS는 **rem 기본값을 10px(62.5%)** 로 둔다 (타이포그래피 가이드 "표현 단위(rem)" 항목). 즉 `1.7rem = 17px`. 아래 표의 px는 이 기준으로 환산한 값이다.

## 1. 색상 토큰 (기본 모드, light)

### 1-1. 주요 색상 팔레트 (primitive)

| 단계 | primary | secondary | gray |
|---|---|---|---|
| 0 | | | #ffffff |
| 5 | #ecf2fe | #eef2f7 | #f4f5f6 |
| 10 | #d8e5fd | #d6e0eb | #e6e8ea |
| 20 | #b1cefb | #bacbde | #cdd1d5 |
| 30 | #86aff9 | #90b0d5 | #b1b8be |
| 40 | #4c87f6 | #6b96c7 | #8a949e |
| **50** | **#256ef4** | #346fb2 | #6d7882 |
| 60 | #0b50d0 | #1c589c | #58616a |
| 70 | #083891 | **#063a74** | #464c53 |
| 80 | #052561 | #052b57 | #33363d |
| 90 | #03163a | #031f3f | #1e2124 |
| 95 | #020f27 | #02162c | #131416 |
| 100 | | | #000000 |

### 1-2. 강조(point) 및 시스템 색상 (primitive)

| 단계 | point (강조) | danger | warning | success | information |
|---|---|---|---|---|---|
| 5 | #fbeff0 | #fdefec | #fff3db | #eaf6ec | #e7f4fe |
| 10 | #f5d6d9 | #fcdfd9 | #ffe0a3 | #d8eedd | #d3ebfd |
| 20 | #ebadb2 | #f7afa1 | #ffc95c | #a9dab4 | #9ed2fa |
| 30 | #e0858c | #f48771 | #ffb114 | #7ec88e | #5fb5f7 |
| 40 | #d65c66 | #f05f42 | #c78500 | #3fa654 | #2098f3 |
| 50 | #d63d4a | #de3412 | #9e6a00 | #228738 | #0b78cb |
| 60 | #ab2b36 | #bd2c0f | #8a5c00 | #267337 | #096ab3 |
| 70 | #7a1f26 | #8a240f | #614100 | #285d33 | #085691 |
| 80 | #521419 | #5c180a | #422c00 | #1f4727 | #053961 |
| 90 | #310c0f | #390d05 | #2e1f00 | #122b18 | #03253f |
| 95 | #21080a | #260903 | #241800 | #0e2012 | #021a2c |

### 1-3. 역할별(semantic) 토큰, 기본 모드 (토큰 파일의 참조를 HEX로 풀어 적음)

| 토큰 | 참조 | HEX |
|---|---|---|
| background-white | gray-0 | #ffffff |
| background-gray-subtler | gray-5 | #f4f5f6 |
| background-gray-subtle | gray-10 | #e6e8ea |
| background-inverse | gray-90 | #1e2124 |
| surface-primary-subtler | primary-5 | #ecf2fe |
| surface-secondary-subtler | secondary-5 | #eef2f7 |
| surface-inverse | gray-90 | #1e2124 |
| text-bolder | gray-95 | #131416 |
| text-basic | gray-90 | #1e2124 |
| text-subtle | gray-70 | #464c53 |
| text-disabled | gray-40 | #8a949e |
| text-primary | primary-60 | #0b50d0 |
| text-secondary | secondary-80 | #052b57 |
| text-point | point-60 | #ab2b36 |
| text-basic-inverse | gray-0 | #ffffff |
| element-primary (주요 버튼 등) | primary-50 | #256ef4 |
| element-primary-light | primary-10 | #d8e5fd |
| element-primary-lighter | primary-5 | #ecf2fe |
| element-secondary | secondary-70 | #063a74 |
| border-gray-light | gray-20 | #cdd1d5 |
| border-gray | gray-30 | #b1b8be |
| border-gray-dark | gray-60 | #58616a |
| border-primary | primary-50 | #256ef4 |
| border-primary-light | primary-10 | #d8e5fd |
| divider-gray-light | gray-20 | #cdd1d5 |
| divider-gray | gray-40 | #8a949e |
| divider-primary | primary-50 | #256ef4 |
| icon-gray | gray-80 | #33363d |
| icon-primary | primary-50 | #256ef4 |
| icon-point | point-50 | #d63d4a |
| link-default | primary-50 | #256ef4 |
| link-hover | primary-60 | #0b50d0 |
| link-pressed | primary-70 | #083891 |
| link-visited | (직접 값) | #5917b8 |

## 2. 타이포그래피

- 서체: **Pretendard GOV** (국문, 영문 공통. 토큰 `--krds-typo-font-type: Pretendard GOV`). Pretendard를 기반으로 공공기관 접근성과 가독성에 맞춰 만든 서체. 다운로드 링크는 타이포그래피 가이드 페이지의 "Pretendard GOV 서체 바로가기"에 있음.
- 확장형 스타일 권장 대체 서체(가이드 원문): 노토 산스, 나눔 고딕, 스포카 한 산스
- 굵기: 표준형은 **regular(400), bold(700) 두 가지**. "이상적인 텍스트 두께: regular(400), medium(500), bold(700)"
- 줄 간격: **최소 150%**
- 본문 기본 크기: **17px** (Pretendard GOV가 상대적으로 작아서 17px 사용. 일반 최소 기준은 16px)
- 글자 간격 토큰: `letter-spacing-0: 0rem`, `letter-spacing-1: 0.1rem`(1px)

| 스타일 | PC(px) | 모바일(px) | 굵기 | 줄간격 | 자간 |
|---|---|---|---|---|---|
| display-large | 60 | 44 | 700 | 150% | 1px |
| display-medium | 44 | 32 | 700 | 150% | 1px |
| display-small | 36 | 28 | 700 | 150% | 1px |
| heading-xlarge | 40 | 28 | 700 | 150% | 1px |
| heading-large | 32 | 24 | 700 | 150% | 1px |
| heading-medium | 24 | 22 | 700 | 150% | 0px |
| heading-small | 19 | 19 | 700 | 150% | 0px |
| heading-xsmall | 17 | 17 | 700 | 150% | 0px |
| heading-xxsmall | 15 | 15 | 700 | 150% | 0px |
| body-large(-bold) | 19 | 19 | 400 (bold는 700) | 150% | 0px |
| body-medium(-bold), 기본 | 17 | 17 | 400 (bold는 700) | 150% | 0px |
| body-small(-bold) | 15 | 15 | 400 (bold는 700) | 150% | 0px |
| body-xsmall(-bold) | 13 | 13 | 400 (bold는 700) | 150% | 0px |
| label-large / medium / small / xsmall | 19 / 17 / 15 / 13 | 동일 | | | |

제목 계층 매핑(가이드 원문): h1 = xlarge~large, h2 = large~medium, h3 = medium~small, h4 = small~xsmall, h5 = xsmall~xxsmall.

## 3. 간격 (spacing)

- 원칙: **8-point grid system** 기준.
- primitive number 스케일 (rem, 괄호는 px):
  number-0 0, number-1 0.1rem(1), number-2 0.2rem(2), number-3 0.4rem(4), number-4 0.6rem(6), number-5 0.8rem(8), number-6 1rem(10), number-7 1.2rem(12), number-8 1.6rem(16), number-9 2rem(20), number-10 2.4rem(24), number-11 2.8rem(28), number-12 3.2rem(32), number-13 3.6rem(36), number-14 4rem(40), number-15 4.4rem(44), number-16 4.8rem(48), number-17 5.6rem(56), number-18 6.4rem(64), number-19 7.2rem(72), number-20 8rem(80), number-21 9.6rem(96), number-max 100rem

| gap 토큰 | px | padding 토큰 | px |
|---|---|---|---|
| gap-1 | 2 | padding-1 | 2 |
| gap-2 | 4 | padding-2 | 4 |
| gap-3 | 8 | padding-3 | 8 |
| gap-4 | 12 | padding-4 | 10 |
| gap-5 | 16 | padding-5 | 12 |
| gap-6 | 20 | padding-6 | 16 |
| gap-7 | 24 | padding-7 | 20 |
| gap-8 | 32 | padding-8 | 24 |
| gap-9 | 40 | padding-9 | 32 |
| gap-10 | 48 | padding-10 | 40 |
| gap-11 | 64 | | |
| gap-12 | 80 | | |

레이아웃 간격 (PC / 모바일, px):

| 토큰 | PC | 모바일 |
|---|---|---|
| gap-layout-h1-h2 | 48 | 32 |
| gap-layout-h2-h2 | 80 | 40 |
| gap-layout-h2-h3 | 40 | 24 |
| gap-layout-h3-h3 | 64 | 32 |
| gap-layout-h3-h4 | 24 | 16 |
| gap-layout-h4-h4 | 40 | 24 |
| gap-layout-h4-h5 | 16 | 12 |
| gap-layout-title-body-large / medium / small | 24 / 20 / 16 | 20 / 12 / 8 |
| gap-layout-text-text-large / medium / small | 20 / 16 / 12 | 16 / 12 / 10 |
| gap-layout-image-text-large / medium / small | 32 / 24 / 20 | 24 / 20 / 16 |
| padding-card-large / medium / small / xsmall | 40 / 32 / 24 / 16 | 24 / 24 / 20 / 12 |

가이드 원문 규칙: 카드 세로형, 가로형, 모듈형 간격은 모두 gap-7(24px). 인풋, 카드, 셀렉트를 가로로 조합할 때는 gap-5(16px).

## 4. 래디어스 (radius)

| 레벨 | 값 | 토큰 | 적용 컴포넌트 (가이드 원문) |
|---|---|---|---|
| xsmall | 2px | radius-xsmall1~3 | 인디케이터, 배지, 프로그레스 바 |
| small | 4px | radius-small1~3 | 칩, 체크박스, 라디오, 스위치, 태그 |
| medium | 6px (medium1, 2) / 8px (medium3, 4) | radius-medium1~4 | 버튼, 텍스트 인풋, 셀렉트, 페이지네이션 (기본값) |
| large | 10px | radius-large1~2 | 카드, 다이얼로그 |
| xlarge | 12px (최댓값) | radius-xlarge1~2 | 배너, 다이얼로그, 바텀 시트 |
| max | 100rem | radius-max | 완전한 원형 |

- 표준형은 2px~12px만 사용, **최댓값 12px** ("과하게 둥근 형태로 변형되는 것을 방지").
- 계산법: 컨테이너 높이 x 1/8(0.125) = radius, 반올림 후 홀수면 더 큰 짝수로.

## 5. 핵심 사용 규칙 (가이드 원문 요약)

1. **색상 비율 60-30-10.** 60%는 배경 및 중립색(gray), 30%는 보조 색상(secondary), 10%는 주요 기능이나 중요한 상호작용 색상(primary).
2. **강조 색상(point, 빨강 계열)은 최대 5%.** "중요한 강조 요소에만 제한적으로 사용하며 최대 5%를 넘기지 않도록 한다." 새 알림, 중요 알림 배지 같은 곳에만.
3. **primary(#256ef4)는 주요 액션과 중요한 정보에만.** secondary(#063a74 계열)는 덜 중요한 액션이나 구분용 배경, 사이드 메뉴 등 전체 톤.
4. **매직넘버로 명도 대비 확보.** 단계 차이 40 = 3:1, 50 = 4.5:1, 70 = 7:1, 90 = 15:1. 예: 흰 배경(gray-0) 위 본문 글자는 gray-90(#1e2124).
5. **색만으로 의미를 전달하지 않는다.** 시스템 색상(danger, warning 등)은 아이콘이나 텍스트와 함께 사용. 상태별 조합 예: 아이콘 danger-50, 텍스트 danger-60, 배경 danger-5, 보더 danger-10.

## AI에 붙일 때 한 줄 요약

흰 배경(#ffffff), 본문 #1e2124, 보조 글자 #464c53, 주요 강조 #256ef4 (10% 이내), 보조 톤 #063a74, 빨강 강조 #d63d4a는 5% 이내, 서체 Pretendard GOV(없으면 Pretendard), 굵기 400/700만, 줄간격 150%, 본문 17px, 제목 32~40px, 모서리 6~12px, 간격 8의 배수.