WOO Design System

Trang mẫu. Mọi giá trị trên trang này đọc thẳng từ css/tokens.css, sinh từ tokens/*.tokens.json.

Bản 0.3.0 — chỉ có chế độ sáng. Chế độ tối, lưới bố cục và chuyển động sẽ thêm sau khi chốt đợt 1.

Thành phần

Màu gốc

navy#071A38WOO Navy — thương hiệu chính
gold#C98A2EWOO Gold — điểm nhấn; không dùng làm màu chữ (2.8:1)
canvas#FAFAF7Nền giao diện
white#FFFFFFNền thẻ
ink#111315Chữ chính
slate#6B7280Chữ phụ, eyebrow
mist#E5E7EBViền thẻ, đường kẻ, nền phụ
success#287052Hoàn thành
progress#27669AĐang tiến triển; đang chọn; focus
attention#A66B24Cần chú ý — dùng cho icon, viền, thanh
critical#A7463DCần xử lý
success-wash#E8F1EC
progress-wash#E8EEF5
attention-wash#F5EDE1
critical-wash#F3E6E4
navy-wash#E8ECF3
gold-wash#FDF7E3
attention-text#956020Chữ Amber trên nền Amber nhạt — 4.55:1 (chốt 24/10)
nav-active-text#955812Chữ menu đang mở — 5.21:1 trên #FFF3E5 (chốt 24/10)
nav-active-icon#B76B16Icon menu đang mở
nav-active-bg#FFF3E5Nền mục menu đang mở
control-border#868E9BViền ô nhập, dropdown, ô tìm kiếm, checkbox — ≥ 3:1 (chốt 24/10)

Màu theo vai trò

color.bg.canvas{color.canvas}
color.bg.surface{color.white}
color.text.primary{color.ink}
color.text.secondary{color.slate}
color.text.heading{color.navy}
color.text.attention{color.attention-text}
color.border.default{color.mist}
color.border.control{color.control-border}
color.action.primary-bg{color.navy}button.primary.bg = primary (02B)
color.state.selected{color.progress}Đang chọn (dữ liệu) = xanh Progress, không dùng Navy hay Gold (02B)
color.state.focus{color.progress}Viền focus: 2px trắng + 2px Progress (mục 25)
color.menu.active-bg{color.nav-active-bg}
color.menu.active-indicator{color.gold}Thanh dọc 4px bên trái mục đang mở
color.menu.active-icon{color.nav-active-icon}
color.menu.active-text{color.nav-active-text}

Chữ

h1 Phát triển · Giữ · Tươi mới · Hướng Tiêu đề trang · 32/40
h2 Phát triển · Giữ · Tươi mới · Hướng Tiêu đề section · 24/32
h3 Phát triển · Giữ · Tươi mới · Hướng Tiêu đề thẻ · 20/28
h4 Phát triển · Giữ · Tươi mới · Hướng Tiêu đề nhỏ · 16/24
body-l Phát triển · Giữ · Tươi mới · Hướng Nội dung chính · 16/24
body-m Phát triển · Giữ · Tươi mới · Hướng Nội dung phụ, nhãn · 14/20
body-s Phát triển · Giữ · Tươi mới · Hướng Chú thích · 12/16
eyebrow HÀNH TRÌNH HỌC CỦA BẠN Chữ in hoa, giãn +0.08em (0.88px ở cỡ 11), màu Slate

Khoảng cách

space.xs4px · Icon + chữ
space.sm8px · Trong chip, khoảng cách hàng nhỏ
space.md12px · Padding nút, khoảng cách mục trong thẻ
space.lg16px · Padding thẻ, khoảng cách giữa thẻ
space.xl24px · Padding section nhỏ
space.2xl32px · Padding section lớn
space.3xl48px · Khoảng cách giữa section
space.4xl64px · Hero, trang landing

Bo góc

xs · 4px
sm · 8px
md · 12px
lg · 16px
xl · 20px
full · 9999px

Đổ bóng

smThẻ nhẹ
mdDropdown
lgModal, drawer, bottom sheet
goldNút chính, nổi bật