00-templates/ui-kit/_previews/

Cowork UI Kit — Aesthetic + Archetypes + Production Kit

v0.3 · 6 archetypes · 55+ components · 2026-05-19

CẦN BẮT ĐẦU LÀM 1 DỰ ÁN MỚI?

Đọc USAGE.html trước — 5 phút.

Decision tree chọn archetype · 3 scenario (Next.js / HTML / WordPress) · cheatsheet · rules QC

Step 2 · review 6 page archetypes

6 page archetype, build trên 2 aesthetic anh đã chốt.

Em chọn palette P1 Terracotta Sand (warm) + P4 Graphite Aurora (dark), font Instrument Serif + Inter (warm) + Inter tight + IBM Plex Mono (dark). Mỗi archetype render với neutral product — anh xem aesthetic + layout thuần, không bị brand đánh lừa.

Anh xem → feedback từng archetype → em build production tokens + components + patterns.

6 page archetypes — neutral content

Northwind Analytics +12.4%

A · Dashboard / Report

KPI grid · charts · table

Revenue overview với 4 KPI sparkline, area chart multi-series, donut mix, bar chart top products, heatmap, transaction table.

Best fit: KHI Funnel, Cakeinsights, FB Ads, home.dang.pm, AI Tools

PUL-247 Webhook retry backoff

PUL-248 SSO race condition

PUL-249 Billing async queue

B · Internal Tool / SaaS App

DARK P4 refined

Sidebar · list/detail · CRUD

Project tool layout — sidebar nav, top bar tabs, task list grouped status, right detail panel với activity + comments. Linear-feel.

Best fit: KWM admin, Outline, Pancake MCP UI, internal tools

☕ A daily ritual

Coffee that meets you where you are.

Start subscription

C · Landing / Marketing

Hero · features · pricing · FAQ

Murmur coffee subscription — hero warm mesh, 3-feature emoji icons, 4-step how it works, testimonial, 2-tier pricing, FAQ accordion, CTA closing.

Best fit: KHI Landing, ldp-khi, an-creative, BetterBuy DTC, consumer brand

ESSAYS · LIVING

The quiet
revolution of
doing less.

by Lan Nguyen · 12 min read

D · Editorial / Content

WARM P1 editorial

Article · drop cap · pull quote

Long-form magazine — Fraunces serif heavy, drop cap, max-w-2xl body, pull quote rules, author bio, related grid. Slow living theme.

Best fit: A-Kryphan blog, BetterBuy chapters, brand storytelling

ANNUAL REPORT · 2026

The year we
slowed down.

E · Presentation / Deck

WARM P1 maximalist

5 slides · cover · stat · compare · quote · divider

Slate Annual Report 2026 deck — cover bleed mesh, big number 1,247, before/after compare, huge italic quote, chapter divider coral bleed.

Best fit: KHI/BB pitch decks, mcp-slide-engine output, annual reports

☀️ Clear 27° · 🌿 12 days

✓ 🌅 Morning pages

○ 🌿 Walk outside

○ 🌙 Wind down

F · PWA / Mobile-first

Phone frame · habit tracker · 44pt taps

Nest mindfulness app — 390×844 phone mockup, greeting serif, weather + streak gentle card, 7-day picker, habit checklist, weekly chart, bottom nav.

Best fit: khi-funnel, khi-pilates, KWM member, consumer PWA

Aesthetic foundations — anh đã chốt

Begin where you are.

TREND 06 · WARM FOUNDATION

Bloom · daily companion

Cream + warm mesh + Instrument Serif. Foundation cho archetype C / D / E / F.

Inference, at the edge of light.

TREND 05 · DARK FOUNDATION

Aurora · inference platform

Dark + mesh violet/cyan/emerald + Inter tight + IBM Plex Mono. Foundation cho archetype A / B.

Production kit — Atomic Design strict + HSL math (v0.4)

FOUNDATION · TOKENS (HSL math)

foundation · semantic · brand · preset

HSL primitive + role-based semantic + brand override + Tailwind preset. Đổi 1 hue → cả palette shift theo math.

foundation.css semantic.css brand-default.css tailwind.preset.js

INDEX.md

Tra cứu nhanh — 2 aesthetic + 6 archetype + 55+ component + brand mapping + usage HTML/React/CSS. Anh start here.

Atoms

Button (5×3) · Input · Select · Checkbox · Switch · Badge · Avatar · Spinner · Skeleton · Tooltip · Icon (20) · Kbd · Label · Helper

Soft shadow + cream

✓ Toast success

Surface + border

✓ Toast success

L2 · MOLECULES

Molecules

Card (4 variants) · Form group · Toast · Banner · Dropdown · Search bar · Tabs · Breadcrumb · Pagination · Accordion

L3 · ORGANISMS ⭐

Organisms

Modal · Drawer · Cmd palette · Navbar · Sidebar · Hero · Pricing · FAQ · CTA · KPI · Chart · Table · Heatmap · Funnel · DateRange · ...

Begin where you are.

Inference, at edge of light

L4 · TEMPLATES ✨

6 skeletons · NEW

Templates · Layout skeletons

Wireframe-style scaffolds — pick 1, drop content vào, ship. DashboardLayout · InternalToolLayout · LandingLayout · ArticleLayout · DeckLayout · MobileShellLayout

⚡

SKILL ĐÃ REGISTER

Trong cli/ccd gõ `/kry-ui`

Em sẽ auto-detect brand từ CWD, propose HSL, scaffold tokens + archetype skeleton vào project. KHÔNG hỏi thừa.

Next step

Roadmap

✓ Foundation tokens (colors warm + dark, typography, spacing, radius, shadow, motion, mesh)
✓ 20 primitives showcase
✓ 15 composites showcase
✓ 10 dataviz showcase
✓ 11 page patterns showcase
✓ INDEX.md documentation
→ Brand presets — preset/{brand}.preset.js map brand color vào warm/dark semantic (7 brand: An Nhien, KHI, BetterBuy, Xanh, A-Kryphan, HaoGood, AI-Tools)
→ React component library — react/ exports JSX cho Next.js project (sau khi anh test aesthetic trong production thực tế)
→ Wire /kry-qc ui verify project dùng đúng preset, không hardcode color, font ≥12px, tap ≥32px, contrast 4.5:1
→ Wire /kry-init --with-ui project mới auto setup preset + chọn archetype
→ Optional: deploy gallery lên ui.dang.pm (static host)

Trend exploration · archive

4 trend gốc em research lúc đầu (Bento / AI Tool Dark / Mesh / Editorial) + 3 file v1 brand-coupled. Giữ để compare.

▶

Apple/Linear modular cards

Cursor/Perplexity terminal

Stripe/Anthropic aurora

Editorial Maximalist

Are.na/Pitchfork print-DNA

Landing brand-coupled

v1 reject — KHI/BB/An Nhien bias

Admin brand-coupled

v1 reject — Linear/Lark/Soft dán brand

E-com brand-coupled

v1 reject — An Nhien/BB dán content