Skip to content

KRDS Design System · One Markdown File

The design tokens, component markup, CSS and JS of KRDS — the Korean government's digital service design system — packed into one self-contained md file. Copy or download it and hand it straight to your AI assistant.

Government design system · Single MD file

Everything in KRDS, the Korean government's digital service design system — design tokens, 74 components, and CSS and JS that actually run, icons and fonts built in — fits in this one document with no external files. Copy or download it and hand it straight to your AI assistant.

2.4MB single file 74 components 1,800+ design tokens External deps 0
Download (.md)

Copying may take a few seconds because the file is large.

LIVE PREVIEW

Here's what it looks like

A live render built from nothing but the CSS, JS and markup inside the md file. It runs in an iframe, fully isolated from this site's styles — go ahead and click the tabs and accordions.
krds-preview.html Open in a new tab

The government already built it — why remake it?

KRDS is already public on the krds.go.kr website and as an npm package (krds-uiux). Both, though, assume a person reads the docs and ports them into code by hand, or installs the package and wires it into a build pipeline.

With AI, the bottleneck moves. When you ask an assistant like Claude or Cursor to "build this screen with this design system", docs scattered across many pages and files work far worse than a single file that fits whole in the context window.

So we merged the tokens, component markup, CSS and JS into one file and inlined all 91 icons and the fonts as base64. The result: "Drop this one file into your project and you're done."

1
Copy or downloadGrab the whole md file with the buttons above.
2
Save it in your projecte.g. DESIGN.md or docs/krds.md.
3
Ask your AISay "build the UI based on this document" and you're done.

Original source

The design tokens, component markup, icons and fonts in this document are the original work of the Ministry of the Interior and Safety of the Republic of Korea, known as KRDS(Korea Design System).
This page and the md file are an unofficial derivative put together by BellRiver Lab for developer convenience. They were not produced or endorsed by the Korean government or the Ministry of the Interior and Safety, and have no affiliation with any government agency.

Related tools