Render thật, không phải link
Mọi pattern trong Cowork UI Kit hiển thị sống động ngay tại đây — mobile (8), auth (4), states (4), landing (7), editorial (6), deck (6), tool (5), PWA flow (4 brand). Iframe embed giữ brand context riêng từng pattern, chrome (header/section frame) dùng An Nhien.
Mobile patterns
Touch-first primitives — bottom sheet, OTP, swipe action, pull refresh, sticky CTA, segmented, week strip, tab bar. Mỗi pattern render trong phone frame 9:16, iframe embed file gốc mobile/patterns/*.html để giữ behavior thật.
Auth flow
Card-based entry/exit cho mọi product — login (email + social), signup (strength meter + terms), password reset (2-step), OTP verify (6-digit + countdown). Iframe full card scaled 3:4 viewport.
Empty + Error states
Friendly fallbacks khi không có data, không tìm thấy kết quả, 404 page, hoặc đang loading. Mỗi state có icon + title + 1-2 CTA — không bao giờ trống unsatisfying.
Landing blocks
Compose archetype C (Landing) từ blocks tái sử dụng — 3 hero variant + features grid + pricing + testimonials + FAQ + footer. Iframe 16:9-ish giữ tỉ lệ desktop, đầy đủ animation/hover.
Editorial blocks
Long-form reading surfaces — article header với drop cap, pull quote big italic, author bio card, related posts grid, series TOC, newsletter signup. Editorial brand (A-Kryphan) dùng Fraunces font, iframe giữ context riêng không bleed sang chrome An Nhien.
Deck slides
Slide deck primitives 16:9 — title, big stat, comparison, timeline, quote, closing. Mỗi slide standalone HTML để autoplay/print. Grid 3-col mini preview, click ↗ để xem fullscreen.
Tool blocks
Archetype B (Tool/Admin) building blocks — list+detail layout, toolbar, filter sidebar, empty state, CRUD form. Dark aesthetic mặc định, fit cho SaaS admin/internal tool.
Mobile app flows
Archetype F (PWA) end-to-end app shell — mỗi brand 1 flow đầy đủ status bar + dynamic island + tab nav + content. An Nhien shop · KHI Pilates booking · HaoGood restaurant · A-Kryphan blog reader. Iframe giữ brand riêng từng flow.