Atoms · 20 components
Strict atomic design. Mỗi atom render 2 aesthetic — WARM bên trái cho consumer / editorial / PWA, DARK bên phải cho dashboard / tool / dev. Mọi màu đến từ semantic CSS variables — đổi brand preset là cả palette shift theo HSL math.
Multi-line input — min 4 rows, char counter, resize vertical.
Warm aesthetic
Ghi chú khách
Markdown được hỗ trợ
0 / 500
Feedback (filled)
Markdown được hỗ trợ
82 / 500
Dark aesthetic
Query editor
⌘ + Enter to run
0 chars
Commit message
conventional commit
108 / 500
closed state · native chevron
Dropdown chọn 1 giá trị. Closed state — chevron suffix, h-10.
search input + open dropdown
Select có search built-in — list options expand bên dưới, có hover state.
Warm aesthetic
Tìm sản phẩm
Trầm Khánh Hòa thượng hạng
Trầm tốc nội địa
Trầm xông Indonesia
3 / 47 sản phẩm
Dark aesthetic
Pick a table
auth.users
khi.users_archive
3 / 142 tables
unchecked / checked / indeterminate / disabled
Multi-select boolean. 18px box, label cùng dòng.
Warm aesthetic
Đồng ý nhận khuyến mại
Đã xác nhận đặt lịch
Một số mục đã chọn (indeterminate)
Disabled (chưa mở)
Dark aesthetic
Notify on deploy
Auto-rollback enabled
Partial selection
Disabled (paid plan)
Single-select boolean group. Circle + filled dot khi selected.
Warm aesthetic
Hình thức thanh toán
Chuyển khoản
Thẻ tín dụng
Tiền mặt tại studio
Trả góp (sắp ra mắt)
Dark aesthetic
Deploy strategy
rolling
blue-green
canary 10%
recreate (downtime)
08 · Atom
Switch / Toggle
on / off · binary toggle
Toggle settings on/off — immediate effect (không cần submit).
Warm aesthetic
Nhận SMS nhắc lịch
2 tiếng trước buổi tập
Đăng ký nhận email
Bản tin tháng + ưu đãi
Push notification
Cần app mobile
Dark aesthetic
DEBUG_MODE
Verbose logging
AUTO_BACKUP
Daily 03:00 UTC
09 · Atom
Badge / Tag / Chip
5 status · solid / soft / outline
Inline label cho status, count, category. Min 12px (WCAG).
Warm aesthetic
Solid
Primary
Thành công
Lỗi
Cảnh báo
Thông tin
Soft
Đang ủ
Hoàn tất
Đã hủy
Trễ hẹn
Mới
Outline + dot
Dark aesthetic
Solid
PROD
200 OK
500
WARN
INFO
Soft
staging
healthy
failed
degraded
syncing
Outline + dot
10 · Atom
Avatar / AvatarGroup
sizes · initial · group stack
Initial fallback khi không có image. Group stack với negative margin.
Warm aesthetic
Sizes (24 / 32 / 40 / 56)
sm / md / lg · loading indicator
CSS animated. Border-based ring, color tự inherit từ semantic var.
Warm aesthetic
Sizes (16 / 24 / 32 / 48)
In button context
Dark aesthetic
In button context
determinate · indeterminate
Track + fill. Height 6/8/10px tuỳ context. Status colors có thể swap fill.
Warm aesthetic
Doanh thu tháng
92% · vượt mục tiêu
Buổi tập đã dùng
11/12 · sắp hết
Indeterminate
đang đồng bộ...
Dark aesthetic
Deploy · health check
100% · OK
Indeterminate
streaming...
Loading placeholder mimic shape thật. Shimmer animation 1.6s.
Rich content panel, anchored từ trigger. Khác tooltip ở chỗ tương tác được.
Warm aesthetic
Lọc theo trạng thái
Đang hoạt động
Áp dụng
Đặt lại
Dark aesthetic
copy ID ⌘C
duplicate ⌘D
export JSON ⌘E
delete ⌫
horizontal · with-label · vertical
Visual separator. Dùng var(--rule) cho mảnh + var(--border) cho đậm.
Warm aesthetic
Đăng nhập
Tiếp tục với Google
An Nhien
KHI Wellness
BetterBuy
Dark aesthetic
request.headers
request.body
20 inline SVG · 1.5 stroke · 24px box
Inline SVG, currentColor stroke. Optical 24px viewport, stroke 2.
Warm aesthetic
search
calendar
close
plus
info
Single key hoặc chord. Min 22px, mono font, border + shadow nhẹ.
Warm aesthetic
Single keys
⌘
K
Enter
Esc
⇧
field caption · required · optional
Field label trên form input — 14px medium, optional/required hint inline.
20 · Atom
Helper / Error text
muted hint · validation message
Dưới field — 12px hint mặc định, color đổi theo state (text-3 / danger / success / warning).
Cowork UI Kit · Atoms
20 atoms · semantic CSS vars · HSL math · WCAG AA · v0.4