Get started
Huchu is the design system behind a Zimbabwe-built operating platform — gold pours, retail tills, school fees, scrap yards, and a dozen more verticals. This page is the fastest way in: who it's for, what's actually shippable today, and where everything lives.
Who it's for
Three audiences, one source of truth.
| You are… | Start here | Why |
|---|---|---|
| A designer | Foundations → Voice & tone | The colors, type, spacing, and the six writing rules every screen obeys. |
| An engineer | Install → Tokens → Components | Link two CSS files, read the token tables, copy a component. No framework lock-in. |
| A PM or lead | Guides → Solutions | How features get composed, and what already ships per vertical and portal. |
What ships today
Honest status check before you wire anything in. The system is split into two layers — one you can use right now, one we're still cutting.
| Layer | Status | Use it like |
|---|---|---|
tokens.css + components.css + icons.js |
Stable | Copy the three files into your project, link them in <head>, write the documented classes. Works in any HTML, any framework, no build step. |
@corelithzw/react (in packages/react/) |
v0.1.3 | Published to public npm. Anonymous npm install @corelithzw/react — no .npmrc, no token. |
Short version
Use the CSS for anything that isn't React, or grab @corelithzw/react from public npm for a JSX-shaped API with full TypeScript types. The cookbook snippets import from the React package verbatim.
Pick a path
Two on-ramps. Most teams start with (a), graduate to (b) when the React package ships.
(a) Use the CSS only — fastest, works today
The whole visual system is two CSS files and a tiny icon helper. Copy them out of this repo, link them in your head, write the documented class names.
<!-- in your <head> --> <link rel="stylesheet" href="/huchu/tokens.css"> <link rel="stylesheet" href="/huchu/components.css"> <script src="/huchu/icons.js" defer></script>
Then write markup using the blessed classes. Icons render from data-icon attributes wherever icons.js finds them.
<button class="btn btn-primary"> <span data-icon="check" data-icon-size="14"></span> Approve settlement </button>
Full file list and copy instructions on the Install page.
(b) Use the React components — @corelithzw/react
Published to public npm. Anonymous install — no .npmrc, no token.
# Install npm i @corelithzw/react react react-dom # In your app entry — once import '@corelithzw/react/styles.css'; import { Button } from '@corelithzw/react';
Owner / troubleshooting notes on the Install page. Release notes in the package changelog.
How to use a component
Every component page follows the same shape, so once you've read one you've read them all.
- Open the component — e.g. Button. The page opens with live specimens.
- Switch Preview → Code on any specimen toolbar to reveal the markup, then hit Copy code.
- Resize with the viewport buttons (Mobile · Tablet · Desktop) to confirm it holds up — Huchu is mobile-first.
- Read the Parts table for the exact tokens (radius, padding, height) so you can match it pixel-for-pixel.
- Follow Do & don't for the rules that keep usage consistent across verticals.
Worked example — a primary action on a gold-pour settlement screen, with both paths shown:
// CSS path — works today <button class="btn btn-primary">Approve settlement</button> // React path — pre-alpha; same DOM, JSX wrapper <Button variant="primary">Approve settlement</Button>
Where to find things
The system is layered from atoms up to whole solutions.
Foundations
Color, type, spacing, motion, a11y.
Tokens
Every variable, in tables you can copy.
Components
Buttons, inputs, badges — the atoms.
Blocks
Headers, stat cards, toolbars.
Patterns
Data table, modal, auth flow.
Guides
How to compose pages and features.