Huchu DS · 0.5
Single source of truth · v0.5

One operating system. Every site, every shift.

The component library, page templates, shells, and product kits that power Huchu — across gold, retail POS, schools, scrap, warehouses, and twelve more verticals. Built mobile-first; deployable as web, desktop, and PWA.

Foundations
7
Color · type · motion · voice
Components
48
Buttons · fields · status
Blocks
26
Headers · toolbars · empty
Shells
9
Dashboard · settings · 6 portals
Vertical kits
12
Gold · retail · schools · 9 more
Portal shells
6
POS · parent · student · 3 more
Build on

Foundations

Tokens, type, motion, and voice. The rules every screen obeys.

Colors
Cool neutral + Huchu blue
Typography
Atkinson Hyperlegible
Motion
6 durations · 4 easings
Iconography
Lucide-style 1.6px
Spacing
8-point rhythm
Elevation
Hairline first
Voice
6 writing principles
Principles
5 north-star rules
Anatomy of the system

From atoms to whole pages

Every product surface in Huchu is composed in the same direction: primitives → blocks → patterns → shells → kits. Each layer is documented on its own.

Components

The atoms — buttons, inputs, badges, status, avatars, switches, chips.

48 primitivesBrowse →

Blocks

The compounds — headers, stat cards, toolbars, empty states, callouts.

26 blocksBrowse →

Patterns

Recurring assemblies — data table, settings, modal, auth flow.

7 patternsBrowse →

Shells

Whole-page chromes — dashboard, settings, every portal frame.

9 shellsBrowse →

Twelve verticals, one platform

Each vertical kit ships with its own pages, dashboards, and forms — composed from the same primitives, tuned for its operating context.

Live dashboard demo →

Gold operations

Pours, dispatches, settlement control, reconciliation, exception alerts, ZIMRA compliance.

6 modulesOpen kit →

Scrap & recycling

Buying records, yard stock, pricing history, bulk sales, supplier history, settlement.

6 modulesOpen kit →

Retail & POS

POS & checkout, stock control, shift management, purchasing, reporting.

5 modulesOpen kit →

Schools / Campus

Student records, fees, attendance, timetables, results, parent portal.

6 modulesOpen kit →

Automotive & fleet

Lead management, vehicle inventory, deal progression, fleet ops, service.

5 modulesOpen kit →

Multi-site operations

Centralized dashboard, inter-branch transfers, consolidated reporting, oversight.

5 modulesOpen kit →

HR & payroll

Employee records, payroll runs, payslip delivery, attendance, compliance reports.

5 modulesOpen kit →

CCTV & surveillance

Camera management, live monitoring, playback & search, incident logs.

5 modulesOpen kit →

Warehouses & stores

Stock register, receiving, issuing, stock take, fuel tracking.

5 modulesOpen kit →

Thrift & secondhand

Bale intake, grading, lot inventory, sales tracking, supplier analysis.

5 modulesOpen kit →

Compliance

Permits & licenses, inspections, incident management, training, audit reports.

5 modulesOpen kit →

Maintenance

Equipment register, work orders, preventive scheduling, breakdown logs, cost tracking.

5 modulesOpen kit →

Audience-specific surfaces

Portals are not part of the dashboard. Each one has its own shell — chrome stripped to what its audience needs. All portals ship as web, PWA, and packaged mobile apps.

All portal shells →

POS terminal

Touch point-of-sale for cashiers and field buyers. Big tiles, fast keyboard search, one-tap charge.

Mobile Tablet Desktop
3 shells · 5 pagesOpen →

Parent portal

Fee balances, attendance, notices, term reports. Mobile-first; built for intermittent connectivity.

Mobile Tablet
2 shells · 4 pagesOpen →

Student portal

Timetable, results, attendance, library, notices. Tablet-first for institutional rollouts.

Mobile Tablet
2 shells · 3 pagesOpen →

Teacher portal

Class lists, marks entry, attendance, lesson plans. Tablet at the front of class; desktop for grading.

Mobile Tablet Desktop
3 shells · 3 pagesOpen →

Staff portal

Time-sheets, payslips, leave requests, internal directory. Desktop-first; PWA on phones.

Mobile Desktop
2 shells · 3 pagesOpen →

Admin control plane

Cross-tenant operations for the platform team. Subscriptions, support, health, audit.

Desktop
1 shell · 2 pagesOpen →

Cross-vertical surfaces

Modules every vertical inherits — same shell, same UI patterns, scoped permissions.

View dashboard shell →

Stock & inventory

Stockpiles, transfers, receiving, low-stock alerts.

6 surfacesOpen →

HR & payroll

Employee directory, payroll runs, leave, compliance.

7 surfacesOpen →

Maintenance & assets

Asset register, work orders, breakdowns.

5 surfacesOpen →

CCTV & surveillance

Live wall, playback search, NVR management.

4 surfacesOpen →

Settings

Workspace, members & roles, billing, SSO, API keys.

9 surfacesOpen →

Notifications

Popover, toast stack, inbox, per-channel preferences.

3 surfacesOpen →

The product speaks like an experienced operator.

Confident. Direct. Quietly human. No exclamation points, no apologies for things that haven't broken, no marketing in the chrome. The same six rules every screen obeys.

Name the real noun
"Invoice", "shift", "settlement" — never "record" or "item".
Lead with the next action
Buttons are verbs. "Approve" and "Post", never "Submit".
Trust the operator
No "Are you sure?" for reversible actions. Show undo instead.
One sentence is plenty
If you need more, the screen is wrong.
Quiet is correct
No celebratory motion. The work is the reward.
Use the canonical labels
Needs input · Running · Completed · Idle · Not started.