Install
Two ways to use the Huchu design system: pull the static stylesheet into any HTML page, or install the source modules into a Next.js app.
Static HTML
The fastest path. Link three files and you have the entire visual system.
<!-- Tokens (color, type, spacing, motion) --> <link rel="stylesheet" href="/huchu/tokens.css"> <!-- Components (buttons, cards, tables, inputs) --> <link rel="stylesheet" href="/huchu/components.css"> <!-- Inline-SVG icons --> <script src="/huchu/icons.js" defer></script>
Then write markup using the documented classes — .btn-primary, .card, .dt-toolbar. No build step. No JavaScript required to render.
Next.js (tate2301/huchu)
If you're working in the live ERP repo, the tokens already ship as CSS variables in app/globals.css and the components are Tailwind-derived shadcn primitives.
# From the repo root pnpm install pnpm dev # Add a new component by extending the existing primitives # Read components/ui/ for the source — it mirrors this docs site 1:1
The tate2301/huchu repo is the canonical source. This design system documents the contract — what tokens exist, which variants are blessed, how they’re used together.
Token files
Tokens come in two shapes — CSS variables and a JSON manifest for design tools.
| File | Purpose | Used by |
|---|---|---|
| tokens.css | CSS variables for color, type, motion, layout | Every HTML doc + every Tailwind theme |
| components.css | The component layer — .btn, .card, .input, .table | Static prototypes and the docs site |
| icons.js | Inline-SVG helper for <span data-icon> | Every page |
| system.css | Docs-site chrome (sidebar, TOC, specimen) | This site only |
| shared.css | Hub / marketing chrome | Kits, portals, verticals |
| dash.css | Dashboard shell layout | Vertical example pages |
| portal-shell.css | Portal app bar, tab bar, list rows | Portal example pages |
Updates
Versioned via the changelog. New components ship behind a "Beta" pill until they've appeared in two live kits.