KRDS provides guidelines to help developers easily apply the design system by installing the KRDS HTML Component Kit in their projects.
Page Contents
Through the tutorial video below, developers can learn how to install the HTML Component Kit in a project, extract design tokens, customize styles, and modify design tokens.
The standard style uses Pretendard GOV as the default typeface by adding the Pretendard GOV web font CDN within the page.
If you wish to use the kit without installation, load the CSS and JavaScript files in the page as shown below.
After installation, import the CSS files and components into your project as follows.
Design tokens created in the design tool can be exported as a JSON file using the export function. After converting this JSON file into CSS variables and applying them for component
styling, any later design updates can be reflected simply by updating the JSON file.
Detailed instructions on extracting design tokens from Figma can be found in the tutorial video.
All attributes for design tokens and CSS variables can be reviewed in the Design Token List.
To use all KRDS design elements, include the following in your SCSS file.
To use components individually, first import the common SCSS file and then import each component.
Load the JavaScript file in the page as shown below.
Although, in principle, design tokens should be modified in the design file and then applied to the code, token values may be modified in the code if they cannot be managed
directly in the design file.
When modifying design tokens in code, do not edit the original source values but redeclare the necessary token values (CSS variables) in the project’s CSS or SCSS file.