Showcase 01 · v0.5

Primitives — building blocks

Mọi token + atom + icon của Cowork UI Kit render thật trên cùng 1 trang. Brand annhien · aesthetic warm. HSL math, 0 hex literal, đổi 1 file brands/<name>.brand.css là cả palette shift.

01 / 10 · Colors

Color tokens

Primary palette (4 step), 4 status colors, 5 surface tones aesthetic-warm. Tất cả compose từ HSL math trong foundation.css.

Primary palette (brand-driven)

--primary · --primary-deep · --primary-soft · --primary-bg

--primary

hsl(28 40% 38%)

--primary-deep

L − 10%

--primary-hover

L − 5%

--primary-active

L − 15%

--primary-soft

L + 25%

--primary-bg

L + 30% · α 0.4

--accent

hsl(38 55% 60%)

--highlight

hsl(24 70% 70%)

Status colors

success · warning · danger · info + soft

--success

hsl(158 64% 40%)

--success-soft

L + 40% · α 0.3

--warning

hsl(38 92% 50%)

--warning-soft

L + 35% · α 0.3

--danger

hsl(0 75% 60%)

--danger-soft

L + 25% · α 0.3

--info

hsl(195 86% 53%)

--info-soft

L + 30% · α 0.3

Warm aesthetic surface

--bg · --surface · --surface-2 · --border · --rule

--warm-bg

hsl(40 50% 96%)

--warm-surface

L 98%

--warm-surface-2

L 94%

--warm-border

L 87%

--warm-rule

L 83%

--warm-text

L 17%

--warm-text-2

L 35%

--warm-text-3

L 55%

02 / 10 · Typography

Typography scale

Modular scale 1.25× (major third). 10 size · 5 line-height · 3 font family. Tracking từ tightest tới widest cho display vs label.

Font families

Inter · Instrument Serif · IBM Plex Mono

Aa — Inter

--font-sans

Body, UI, label. Sans default toàn kit. Weight 400 body / 500 label / 600 emphasis / 700 heading sans.

Aa — Instrument

--font-serif (italic)

Display heading aesthetic warm. Editorial moments, hero, brand wow point.

Aa — Plex Mono

--font-mono

Label, code, tabular num, data table. Cho dashboard archetype A và tooling.

Size scale (10 step)

--type-xs → --type-7xl

xs · 12

The quick brown fox

sm · 14

The quick brown fox

md · 16

The quick brown fox

lg · 20

The quick brown fox

xl · 24

The quick brown fox

2xl · 30

The quick brown fox

3xl · 36

The quick brown fox

4xl · 48

Quick brown fox

5xl · 60

Quick fox

7xl · 96

Line-height variants

tight 1.1 · snug 1.25 · normal 1.5 · relaxed 1.65 · loose 1.75

tight 1.1

Used for display headings, hero, big numbers. Compact rhythm khi font lớn.

snug 1.25

H2 H3 subtitle. Vẫn đọc được tốt mà không quá thở.

normal 1.5

Body default. UI text. Cân bằng giữa density và breathing room.

relaxed 1.65

Long-form reading. Editorial. Article body khi paragraph >2 dòng.

loose 1.75

Quotes, pullquote, hero subtitle khi font lớn cần thở rất nhiều.

03 / 10 · Spacing

Spacing scale

4px rhythm. 14 step từ 4px tới 128px. Bar visual render bằng px thật để cảm nhận tỉ lệ.

--space-14px

--space-28px

--space-312px

--space-416px

--space-520px

--space-624px

--space-832px

--space-1040px

--space-1248px

--space-1664px

--space-2080px

--space-2496px

--space-32128px

04 / 10 · Radius

Radius scale

9 level từ 0 tới pill. Render khối thật cho thấy cảm giác từng radius — khác chip / card / hero card / pill.

none

4px

6px

8px

12px

16px

2xl

24px

3xl

32px

full

9999

05 / 10 · Border

Border width scale

5 level từ 0 (no border) → 3px (indicator bar). Hairline 1px default, 1.5px cho input focus, 2px cho error.

--border-0

--border-1

1px · default

--border-2

1.5px · focus

--border-3

2px · error

--border-4

3px · indicator

06 / 10 · Shadow & Elevation

Shadow + elevation

6 shadow level (xs → 2xl), 6 elevation composed (border + shadow), 3 glow variants cho dark mode.

Shadow tokens

--shadow-xs · sm · md · lg · xl · 2xl

2xl

Elevation system (composed)

--elevation-0 → --elevation-5 · border + shadow

0 · flat

1 · hover row

2 · card

3 · dropdown

4 · modal

5 · toast

Glow variants (dark preview)

--glow-primary · --glow-violet · --glow-emerald

glow-primary

glow-violet

glow-emerald

07 / 10 · Motion

Motion tokens

5 duration · 6 easing curves. Bấm "Replay" để xem từng curve animate trên dot. Curve khác = "feel" khác.

Duration scale

instant · fast · normal · slow · slower

0ms

instant

120ms

fast · hover

200ms

normal

320ms

slow · modal

480ms

slower · page

Easing curves (live demo)

click Replay để chạy 1600ms across track

1600ms / curve · auto-repeat: off

linear

--ease-linear

ease-out

cubic-bezier(.32,.72,0,1)

ease-out-soft

cubic-bezier(.4,0,.2,1)

ease-in-out

cubic-bezier(.65,0,.35,1)

ease-bounce

cubic-bezier(.68,-.55,.265,1.55)

ease-spring

cubic-bezier(.5,1.5,.5,1)

08 / 10 · Z-index

Z-index scale

9 level từ base (0) tới tooltip (90). Stack visualization — mỗi card offset 24px để thấy stacking thật.

base

--z-base · 0

raised

--z-raised · 10

dropdown

--z-dropdown · 30

sticky

--z-sticky · 40

fixed

--z-fixed · 50

overlay

--z-overlay · 60

modal

--z-modal · 70

toast

--z-toast · 80

tooltip

--z-tooltip · 90

09 / 10 · Atoms

20 atom components

Components nguyên tử của kit — render thật mọi variant. Mỗi cái xài token thuần, đổi brand preset là re-skin.

01 · Avatar

3 sizes · image · fallback initials · gradient

sm · 32

md · 44

lg · 64

image

accent grad

highlight grad

02 · Badge

6 variants · primary/success/warning/danger/info/neutral

primary success warning danger info neutral

12 NEW Pending Archived v0.5

03 · Button

5 variants × 3 sizes · 15 cells

primary secondary ghost danger success w/ icon

04 · Checkbox

default · checked · indeterminate · disabled

Default unchecked

Checked — Receive newsletter

Indeterminate — 3/5 selected

Disabled — locked option

Disabled + checked

05 · Combobox

closed · open dropdown with search

closed

Tìm khách hàng…

open

Mai L

06 · Divider

horizontal · vertical · with text

horizontal

with text

or continue with

vertical

Active

Archived

Trash

07 · Helper

info · warning · error variants

Email sẽ dùng để gửi xác nhận đơn hàng và tracking.

Kho còn 3 sản phẩm cuối — số lượng có thể thay đổi nhanh.

Số điện thoại không hợp lệ. Format: +84 9XX XXX XXX

08 · Icon

3 sizes · sm 16 / md 20 / lg 24

16 · sm

20 · md

24 · lg

32 · color

48 · danger

09 · Input

default · focused · error · disabled

Email · default

Tên đầy đủ · filled

SĐT · focused (visual)

Mật khẩu · error

Tối thiểu 8 ký tự.

Mã KH · disabled

10 · Kbd

single key · combo

Tìm kiếm: ⌘ + K

Lưu: Ctrl + S

Submit form: Enter

Cancel: Esc

Navigate: ↑ ↓ ← →

Toggle theme: Shift + ⌥ + T

11 · Label

default · required marker

Họ tên

Email *

SĐT optional

12 · Popover

positioned · with content

13 · Progress

linear · circular · 25/50/75

linear

Onboarding25%

Upload50%

Sync75%

Complete100%

circular

25%

50%

75%

14 · Radio

group of 3 · 1 selected

Kênh nhận thông báo

Email · marketing và xác nhận đơn

SMS · chỉ tracking giao hàng

Zalo · trao đổi 1-1 với consultant

15 · Select

closed · open with options

closed

Trầm hương nguyên liệu

open

Nhang vòng — premium

16 · Skeleton

3 shapes · line · block · circle · shimmer

17 · Spinner

3 sizes · 16/24/40

sm · 16

md · 24

lg · 40

18 · Switch

off · on · disabled

Off — Email marketing

On — Push notification

Disabled — SMS (chưa khả dụng)

Disabled + on — Lock

19 · Textarea

default · error

default

error

Mô tả phải có ít nhất 80 ký tự (hiện 9).

20 · Tooltip

positioned above · trigger element

10 / 10 · Icons

Icon set (24)

Lucide-style stroke 1.75 · 24 viewport. Click tile để copy SVG markup. Group: action, nav, status, social.

plus

check

edit

trash

save

home

arrow-left

arrow-right

chevron-down

chevron-up

info

alert

success

warning

star

heart

mail

phone

message

Tip: Click 1 icon để copy <svg><use href="sprite.svg#name"/></svg> markup vào clipboard.

Color tokens

Primary palette (brand-driven)

Status colors

Warm aesthetic surface

Typography scale

Font families

Size scale (10 step)

Line-height variants

Spacing scale

Radius scale

Border width scale

Shadow + elevation

Shadow tokens

Elevation system (composed)

Glow variants (dark preview)

Motion tokens

Duration scale

Easing curves (live demo)

Z-index scale

20 atom components

01 · Avatar

02 · Badge

03 · Button

04 · Checkbox

05 · Combobox

06 · Divider

07 · Helper

08 · Icon

09 · Input

10 · Kbd

11 · Label

12 · Popover

Filter customers

13 · Progress

14 · Radio

15 · Select

16 · Skeleton

17 · Spinner

18 · Switch

19 · Textarea

20 · Tooltip

Icon set (24)