One set of tokens. The same hand-drawn look, in every framework.
GHDS is a cross-platform design system that uses @ghds/tokens as its single
source of truth to deliver the same hand-drawn style across React, Lit web components, and
React Native. Explore the tokens, components, and patterns in the docs below.
Explore
Getting Started
Install GHDS and render your first component on screen.
Fonts
Font-family stacks for English and Korean, the chosen typefaces, and how to load self-hosted web fonts via Fontsource.
Design Style
Color, typography, spacing, radius, and shadow — design tokens generated automatically from @ghds/tokens.
Foundations
Layout & grid, icons, motion, elevation, and z-index layering — the structural and interaction primitives behind every component.
Theming
Rebrand GHDS by overriding a few CSS variables — with a live playground.
Components
Live-render React and Lit components side by side on one screen.
Patterns
Reusable composition patterns for forms, feedback, and more.
Design Principles
Five principles and the voice & tone that guide every token, component, and word in GHDS.
UX Writing
Microcopy rules for buttons, errors, empty states, and a shared product glossary.
About & Accessibility
The design system's philosophy and its WCAG 2.1 AA accessibility commitment.
Resources
A collection of links for packages, the repository, changelog, and more.
AI Agent Skills
Install a skill so your AI coding assistant generates correct GHDS code.