skills.rest
JiminLee-way
JiminLee-wayCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

krds-style

Apply KRDS styling guidelines for consistent color, typography, layout, and elevation.

Updated Apr 5, 2026
Search Tags:#typography#accessibility#design-system#style-guide#color-tokens#elevation#krds
One-click install
npx skills add https://github.com/JiminLee-way/Awsome-KRDS-KoreaDesignSystem --skill krds-style
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: krds-style
Source: https://github.com/JiminLee-way/Awsome-KRDS-KoreaDesignSystem/tree/main/plugins/krds/skills/krds-style
Command: npx skills add https://github.com/JiminLee-way/Awsome-KRDS-KoreaDesignSystem --skill krds-style

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

KRDS-style guidelines help teams implement a cohesive visual language across color, typography, layout, shapes, and elevation, reducing design drift in government digital services.

Core Features & Use Cases

  • Comprehensive token references for colors, typography, spacing, radii, and elevation used in KRDS
  • High-contrast and accessibility guidelines ensuring legible UI in diverse environments
  • Design-system enablement: standardizes UI components and layout decisions for cross-platform consistency

Quick Start

Import and apply the KRDS tokens from node_modules/krds-uiux/resources/css/token/krds_tokens.css and follow the documented scales for typography and spacing to start building KRDS-compliant interfaces.

Frequently Asked Questions about krds-style

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I apply KRDS design tokens for consistent government UI styling?▼

Apply KRDS design tokens by importing the CSS token file from the package resources, then reference the standardized color, typography, spacing, radii, and elevation scales to build interfaces with structural coherence across devices.

What accessibility features does the KRDS style guide include for high-contrast modes?▼

The KRDS style guide includes high-contrast mode mappings and accessibility guidelines to ensure legible UI in diverse environments, enforcing token references that maintain text clarity and structural conventions across all breakpoints.

Can I use KRDS styling guidelines for responsive web layout breakpoints?▼

Yes, KRDS styling guidelines define four responsive layout breakpoints to standardize cross-platform UI decisions, ensuring design-system coherence and consistent structural behavior across different device widths.

What's the best way to structure elevation and radii in a government design system?▼

Structure elevation and radii using the KRDS six-level elevation model and five-step radius system, which enforces standardized shape and shadow conventions to reduce design drift across government digital services.

Does the KRDS style guide require dependencies to implement color and typography scales?▼

No external dependencies are required; the KRDS style guide supplies comprehensive token references for color and typography scales directly, allowing teams to import the CSS token file and apply the documented scales immediately.

Related Skills

Explore More Design & Creative Skills→
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced
xaderlagguixaderlaggui
3

app-ui-design

Design accessible mobile UI systems for iOS and Android.

Community
Advanced
iButtersiButters
3

responsive-design

Creates mobile-first web layouts with fluid typography, breakpoints, and container queries.

Community
Advanced
Owl-ListenerOwl-Listener
2.0k

design-token

Define and organize design tokens across color, spacing, typography, elevation, border, and motion.

Community
Intermediate