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%
REV
$2.4M
MRR
$184K
CHURN
2.8%
ARPU
$47.2
A · Dashboard / Report
DARK P4

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
Pulse
Inbox
My issues
Sprints
IN PROGRESS
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
WARM P1

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
Quartz Journal
Issue 47
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
Slate
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
9:41
Good morning,
Lan
☀️ Clear 27° · 🌿 12 days
M
T
W
T
F
S
S
TODAY
🌅 Morning pages
🌿 Walk outside
🌙 Wind down
F · PWA / Mobile-first
WARM P1 mobile

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)
4 files

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
DOCUMENTATION
MD

INDEX.md

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

../INDEX.md
WARM
ButtonGhost
badge
DARK
ButtonGhost
badge
L1 · ATOMS
20 atoms

Atoms

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

WARM
Card title
Soft shadow + cream
Toast success
DARK
Card title
Surface + border
Toast success
L2 · MOLECULES
10 molecules

Molecules

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

REV
$2.4M
+12.4%
CHART
HEATMAP
L3 · ORGANISMS ⭐
20 organisms

Organisms

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

WARM HERO
Begin where you are.
Start free
DARK HERO
Inference, at edge of light
Get API key
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

  1. Foundation tokens (colors warm + dark, typography, spacing, radius, shadow, motion, mesh)
  2. 20 primitives showcase
  3. 15 composites showcase
  4. 10 dataviz showcase
  5. 11 page patterns showcase
  6. INDEX.md documentation
  7. 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)
  8. React component library — react/ exports JSX cho Next.js project (sau khi anh test aesthetic trong production thực tế)
  9. Wire /kry-qc ui verify project dùng đúng preset, không hardcode color, font ≥12px, tap ≥32px, contrast 4.5:1
  10. Wire /kry-init --with-ui project mới auto setup preset + chọn archetype
  11. 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.