Stats
Actions
Tags
From krds
Use when implementing colors, typography, layout, spacing, shapes, elevation, or high-contrast mode for Korean government digital services following KRDS. Triggers on 색상, 폰트, 서체, 타이포, 레이아웃, 그리드, 간격, 래디어스, 엘리베이션, 선명한 화면, 다크모드, 반응형.
How this skill is triggered — by the user, by Claude, or both
Slash command
/krds:krds-styleThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
KRDS(Korea Design System)는 대한민국 정부 디지털 서비스의 일관된 사용자 경험을 위해 6가지 핵심 스타일 요소를 정의한다.
KRDS(Korea Design System)는 대한민국 정부 디지털 서비스의 일관된 사용자 경험을 위해 6가지 핵심 스타일 요소를 정의한다.
실제 디자인 토큰 값은 아래 CSS 파일에서 확인한다:
node_modules/krds-uiux/resources/css/token/krds_tokens.css
이 파일에는 PRIMITIVE(원시 색상), MODE-LIGHT(라이트 모드 시맨틱), MODE-HIGH-CONTRAST(선명한 화면 시맨틱), RESPONSIVE-PC/MOBILE(반응형 타이포·간격), SEMANTIC(gap/padding/radius) 토큰이 모두 포함되어 있다.
상세 토큰 목록은 다음 레퍼런스 파일을 참조한다:
references/color-tokens.md — 전체 색상 토큰references/typography.md — 타입 스케일 토큰references/spacing.md — 간격·패딩·래디어스 토큰화면 내 색상 면적 비율을 지켜 시각적 안정감을 확보한다.
| 역할 | 비율 | 색상 계열 | 용도 |
|---|---|---|---|
| Base | 60% | Gray | 배경, 서피스, 여백 |
| Secondary | 30% | Secondary | 카드, 패널, 보조 영역 |
| Primary | 10% | Primary | CTA 버튼, 링크, 포커스 |
| Accent | 5% 이하 | Point / Danger / Warning / Success | 강조, 알림, 상태 표시 |
색상 단계 번호(5~95)와 명도 대비를 연계한 접근성 지표:
| 매직넘버 | 대비비 | WCAG 레벨 | 용도 |
|---|---|---|---|
| 40 | 3:1 | AA (대형 텍스트, UI 컴포넌트) | 아이콘, 비활성 테두리, 큰 글자 |
| 50 | 4.5:1 | AA (일반 텍스트) | 본문 텍스트, 레이블, 일반 아이콘 |
| 70 | 7:1 | AAA | 중요 본문, 소형 텍스트 |
| 90 | 15:1 | 선명한 화면 | 고대비 모드 본문 텍스트 |
시스템 색상(Danger, Warning, Success, Information)은 반드시 아이콘 + 텍스트를 병행해야 한다. 색상만으로 상태를 전달하면 색각이상자가 정보를 인지할 수 없다.
| 요소 유형 | Default | Hover | Pressed |
|---|---|---|---|
| Primary 버튼 (fill) | primary-50 | primary-60 | primary-70 |
| Secondary 버튼 (fill) | primary-5 | primary-10 | primary-20 |
| Tertiary 버튼 (fill) | transparent | gray-5 | gray-10 |
| Text 버튼 (fill) | transparent | secondary-5 | secondary-10 |
| Link | primary-50 | primary-60 | primary-70 |
색각이상(Color Vision Deficiency)을 가진 사용자도 구분할 수 있는 안전한 8색 조합:
| 이름 | Hex 코드 |
|---|---|
| Black | #000000 |
| Orange | #E69F00 |
| Sky blue | #56B4E9 |
| Bluish green | #009E73 |
| Yellow | #F0E442 |
| Blue | #0072B2 |
| Vermilion | #D55E00 |
| Reddish purple | #CC79A7 |
--krds-pc-font-size-body-medium: 1.7rem)--krds-typo-font-weight-regular: Regular)--krds-typo-font-weight-bold: Bold)Heading과 Body 텍스트의 크기 차이는 1.25~1.5배를 유지한다.
예시: Body medium(17px) 대비 Heading small(19px) = 1.12배, Heading medium(24px) = 1.41배, Heading large(32px) = 1.88배
상세 타입 스케일은 references/typography.md 참조.
| 단계 | 최소 너비 | 컬럼 수 | Gutter | Margin |
|---|---|---|---|---|
| small | 360px+ | 4 | 16px | 16px |
| medium | 768px+ | 8 | 16px | 24px |
| large | 1024px+ | 12 | 24px | 24px |
| xlarge | 1280px+ | 12 | 24px | 24px |
1200px — xlarge 이상에서 콘텐츠가 이 너비를 초과하지 않는다.
Header
└─ Breadcrumb
└─ [Left Menu] + Main Contents + [Right Menu]
└─ Footer
컨테이너 높이 × 0.125, 결과가 홀수이면 짝수로 올림| 단계 | 크기 | CSS 변수 (예시) |
|---|---|---|
| xsmall | 2px (0.2rem) | --krds-radius-xsmall1, --krds-radius-xsmall2, --krds-radius-xsmall3 |
| small | 4px (0.4rem) | --krds-radius-small1, --krds-radius-small2, --krds-radius-small3 |
| medium | 6 | --krds-radius-medium1~--krds-radius-medium4 |
| large | 10px (1.0rem) | --krds-radius-large1, --krds-radius-large2 |
| xlarge | 12px (1.2rem) | --krds-radius-xlarge1, --krds-radius-xlarge2 |
| 레벨 | 용도 | 표현 방법 |
|---|---|---|
| -1 | 배경 아래 (sunken) | 색상 차이로 구분 |
| 0 | 기본 배경 (base) | 기본 서피스 색상 |
| +1 | 카드, 탭, 약간 떠 있는 요소 | 그림자 shadow1 (#0000000d) |
| +2 | 드롭다운, 팝오버 | 그림자 shadow2 (#00000014) |
| +3 | 모달, 사이드 패널 | 그림자 shadow3 (#0000001f) + 딤드 배경 |
| +4 | 긴급 공지, 최상위 알림 | 강한 그림자 + 딤드 (alpha-black75) |
--krds-light-color-alpha-shadow1/2/3 사용--krds-light-color-background-dim (alpha-black75) 적용--krds-light-border-width-variable-regular (0.1rem) 또는 -medium (0.2rem)| 요소 | 필요 대비비 |
|---|---|
| 본문 텍스트 | 15:1 이상 |
| 헤딩, 레이블 | 7:1 이상 |
| 아이콘 | 4.5:1 이상 |
선명한 화면에서 레이어가 올라갈수록 점차 밝아지게 설정한다:
| 레이어 | Light 모드 | High Contrast 모드 |
|---|---|---|
| 기본 배경 | gray-0 (#ffffff) | gray-100 (#000000) |
| 서피스 subtler | gray-5 (#f4f5f6) | gray-95 (#131416) |
| 서피스 subtle | gray-10 (#e6e8ea) | gray-90 (#1e2124) |
선명한 화면 모드의 Secondary 색상은 라이트 모드와 완전히 다른 색상을 사용한다:
#346fb2 (블루 계열)#268097 (틸/시안 계열)이는 어두운 배경에서 가독성을 확보하기 위한 의도적 설계이다.
| 모드 | variable-regular | variable-medium |
|---|---|---|
| Light | 0.1rem (1px) | 0.2rem (2px) |
| High Contrast | 0.2rem (2px) | 0.3rem (3px) |
선명한 화면 모드에서는 경계선 두께를 자동으로 증가시켜 요소 구분을 강화한다.
npx claudepluginhub jiminlee-way/awsome-krds-koreadesignsystem --plugin krdsCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.