Cowork UI Kit v0.5.12

Foundation + semantic

HSL-math primitives, 68 semantic roles, DTCG + Figma JSON.

7 production brands

An Nhien · KHI · BetterBuy · Xanh · Kryphan · HaoGood · AI Tools.

Font system

Inter · Lora · IBM Plex Mono · Instrument Serif · VN diacritic-safe.

Lucide-derived sprite

Single SVG sprite per archetype.

Building blocks

Loading · number input · slider · file uploader · tag.

Composed atoms

Date picker · empty state · error state.

Complex sections

Toast · toolbar · treeview · resizable panels.

6 archetype wireframes

A · B · C · D · E · F skeleton scaffolds.

Composed archetypes

page-A through page-F + PWA flows.

Login

3-step auth flow: email → password → success state.

Checkout

Cart → shipping → payment → confirm.

Onboarding

Welcome → profile → first-action multi-step.

Settings

Account · preferences · destructive actions.

Voice + tone library

Button labels · empty states · error messages · CTA copy.

MICROCOPY.md

Rules for clear, brand-appropriate UI copy.

FLOWS.md

Pattern catalogue for multi-step journeys.

Archetype gallery

6 archetypes × warm/dark + 6 trend explorations.

Production demos

Real-world component compositions per brand.

28 motion tokens

Reduced-motion contract + 15-pattern demo.

Loading · empty · error

Skeleton · spinner · toast · banner patterns.

Token × component grid

All atoms/molecules in every brand context.

PWA manifest + shell

iOS/Android install · safe-area · viewport.

Kit overview

Quick start · what ships · how to consume.

Decision tree

5-min start: archetype choice · 3 scenarios · QC rules.

Semantic tokens

68 tokens · editorial patterns · deck patterns.

Gotchas + patterns

G1-G19 codified · iteration learnings.

Per-patch history

v0.5.0 → v0.5.12 release notes.

Gate behaviour

Token audit · path audit · contrast · Lighthouse.

72% coverage audit

10 top-missing · benchmark vs Carbon/Polaris/Spectrum.

WCAG discipline

Contrast · landmarks · keyboard · focus order.