dg-superapp / design-system / Phase 2

DGC MiniApp Design System

Khmer-first design tokens for Cambodia government mini-apps. Ships as a single shadcn registry item — one install, all tokens. Latin + Khmer side-by-side, WCAG-AA contrast, Tailwind v4, dark mode.

ប្រព័ន្ធរចនាដែលផ្តោតលើអក្សរខ្មែរសម្រាប់កម្មវិធីរដ្ឋាភិបាលកម្ពុជា។

Browse tokens

npx shadcn@latest add http://registry.016910804.xyz/r/dgc-theme.json

Primary palette

Cambodia blues. --blue-900 is the DGC brand anchor (#0D47A1) and the default shadcn --primary.

--blue-050212 62% 96%#EEF4FB

--blue-100205 87% 94%#E3F2FD

--blue-400207 90% 61%#42A5F5

--blue-500207 90% 54%#2196F3

--blue-600208 79% 51%#1E88E5

--blue-700212 80% 42%#1565C0

--blue-800220 71% 40%#1E4FB0

--blue-900216 85% 34%#0D47A1alias: primary / brand

--blue-950220 83% 23%#0A2A6B

Neutrals

Greyscale. --gray-050 is --background; --gray-900 is --foreground.

--white0 0% 100%#FFFFFFalias: card / popover

--gray-050216 33% 97%#F5F7FAalias: background

--gray-1000 0% 93%#EEEEEEalias: muted / secondary

--gray-2000 0% 88%#E0E0E0alias: border / input

--gray-3000 0% 74%#BDBDBD

--gray-4000 0% 62%#9E9E9E

--gray-5000 0% 46%#757575

--gray-6000 0% 38%#616161alias: muted-foreground

--gray-7000 0% 26%#424242

--gray-9000 0% 13%#212121alias: foreground

--gray-950216 12% 8%#121417

Semantic palette

Status colors for success / warning / danger / info plus their tinted backgrounds. Dark variants pre-computed as HSL triplets (D2).

--success123 46% 34%#2E7D32alias: green-700

--success-bg125 39% 94%#E8F5E9alias: green-100

--warning37 95% 56%#F9A825alias: amber-700

--warning-bg46 100% 94%#FFF8E1alias: amber-100

--danger0 66% 47%#C62828alias: destructive / red-700

--danger-bg351 100% 96%#FFEBEEalias: red-100

--info201 98% 41%#0288D1alias: info-600

--info-bg199 94% 94%#E1F5FEalias: info-100

Type scale

Latin specimen (Inter) + Khmer specimen (Noto Sans Khmer). R3.3 — any element with lang="km" picks up the Khmer stack and a roomier line-height via the :lang(km) cascade.

--text-xs · 0.75rem