ThaiHao platform

Five surfaces. One design language. Built for trust across borders.

Multi-tenant cross-border commerce connecting Thai SME producers with Chinese consumers through KOL and KOC live commerce. This system carries tokens, brand assets, design-system preview cards, and eight UI kits — distilled, sketchable, and ready to extend.

#AC0022 IBM Plex Sans · Inter · JetBrains Mono 8px card · 4px button th-TH · zh-CN · en-US WCAG 2.1 AA

The ten invariants

Every design decision is checked against these. Refuse drift; offer the closest compliant alternative.

D1Two weights only. 400 regular, 500 medium. Never bold.
D2Sentence case. The only uppercase is the tracked label-caps style.
D3No emoji. Tabler outline icons. Locale flag in LanguageFlag is the one exception.
D4Tokens, not hex. Per-tenant theming and dark mode depend on it.
D5Quad-column currency. Amount · ISO code · trust pill · fx context if cross-currency.
D6Trust before value. Every estimated monetary value carries a visible trust signal.
D7Reason codes gate. Revoke, suspend, refund, override, force-unlock — submit disabled until a reason is chosen.
D8Every string through i18n. Producer opens in th-TH; KOL in zh-CN; admin in en-US.
D9WCAG 2.1 AA. Focus rings, ARIA labels, 4.5:1 contrast, errors conveyed by more than color.
D10Audit on transition. Every value derived from a state transition has an inline AuditLink.

UI kits

Eight surfaces, three locales, four device profiles. Each kit is an interactive click-through prototype running React + Babel-standalone from a CDN.

Producer portal

Thai SME owners and brand managers — Khun Somchai's surface. Home, settlement, onboarding pipeline.

th-TH Mobile-first Medium density

KOL portal

Individual KOLs, KOCs, and agency managers — Li Wei's surface. Bookings, earnings, calendar with block-out slots.

zh-CN Mobile-first Medium-high density

Admin console

Platform staff — Sarah Tan's surface. Dashboard, tenants, sanctions, command palette, people management.

en-US Desktop-only High density

C-suite portal

Executive read — Daniel Park's surface. GMV, MRR, cross-border flow, compliance health, annual targets.

en-US Desktop Aggregated read

Employee portal

Department-scoped internal staff — Sales, Customer Care, Finance, Operations. Pipeline, producer health, settlement queue.

en-US Desktop Per-department

Partner portal

Fulfillment, logistics, distributor. Pick lists, dispatch board with route SLA, multi-brand catalog with reorder.

en-US · zh-CN Desktop + tablet Phase 3+

Consumer storefront

Chinese end-consumers — Discover, live shopping, product detail, cart with cross-border shipping context.

zh-CN Mobile-first Phase 5+

Auth flows

Multi-locale entry — sign up, log in, password reset, MFA setup, suspicious-login revoke.

th-TH · zh-CN · en-US Mobile-first Multi-persona

Design system specimens

Tokens, components, and pattern cards. Open any one to see the rendered specimen on its own.

Open gallery

Colors

4 cards
Primary Surface tonal layers Semantic state Per-tenant theming

Type

2 cards
Type scale Type families

Spacing & surface

4 cards
Spacing scale Radii Borders Elevation

Components

9 cards
Buttons Inputs Pills Status dots Trust pills Currency display Metric card Table row Pipeline bar

Patterns & brand

7 cards
Empty · loading · error Reason code selector Audit drawer Accessibility Locale & date Icons Logo

Documents

Brand and skill reference, distilled.

README

Brand summary, content fundamentals, visual foundations, iconography. The full system documentation.

SKILL manifest

Agent Skill bundle — usable in Claude Code. Quick-start, persona universe, invariants summary.

Tokens — colors_and_type.css

Every variable in one file. Colors, type, spacing, motion, borders, radii — light and dark theme.