Đọc USAGE.html trước — 5 phút.
Decision tree chọn archetype · 3 scenario (Next.js / HTML / WordPress) · cheatsheet · rules QC
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
KPI grid · charts · table
Revenue overview với 4 KPI sparkline, area chart multi-series, donut mix, bar chart top products, heatmap, transaction table.
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.
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.
revolution of
doing less.
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.
slowed down.
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.
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.
Aesthetic foundations — anh đã chốt
Bloom · daily companion
Cream + warm mesh + Instrument Serif. Foundation cho archetype C / D / E / F.
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 · semantic · brand · preset
HSL primitive + role-based semantic + brand override + Tailwind preset. Đổi 1 hue → cả palette shift theo math.
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
Molecules
Card (4 variants) · Form group · Toast · Banner · Dropdown · Search bar · Tabs · Breadcrumb · Pagination · Accordion
Organisms
Modal · Drawer · Cmd palette · Navbar · Sidebar · Hero · Pricing · FAQ · CTA · KPI · Chart · Table · Heatmap · Funnel · DateRange · ...
Templates · Layout skeletons
Wireframe-style scaffolds — pick 1, drop content vào, ship. DashboardLayout · InternalToolLayout · LandingLayout · ArticleLayout · DeckLayout · MobileShellLayout
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.
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)