Contact us

v0.3.0 · Mới: brand mode UU

Một hệ, mọi brand, mọi nền tảng.

UU Design System là bộ token, component và luật tương tác mà ÚÙ Creative Studio dùng cho mọi sản phẩm — viết đủ rõ để designer, developer lẫn AI dựng đúng ngay lần đầu, trên web, Flutter và Zalo Mini App.

Xem tài liệu Dành cho AI
Thử đổi brand cả trang
48component và mẫu màn đã chốt
57token màu theo vai trò
2mật độ: Touch · Compact
100icon UU công khai
3nền tảng code: React · Flutter · Zalo

Bốn nguyên tắc

Luật ít, chạy đúng mọi nơi

Viết cho cả AI, không chỉ cho người

llms.txt

Mỗi trang tài liệu có bản Markdown gốc, mục lục llms.txt và skill cho Claude. Bộ chấm tự động đo AI dựng giao diện có đúng luật không — phải 0 lỗi nghiêm trọng mới được giao.

Dành cho AI

Một cơ chế tương tác cho mọi thứ

Hover và nhấn chỉ phủ một lớp màu mỏng, không đổi nền hay chữ. 144 trạng thái của 4 bộ nút đã soát khớp 100%.

State layer

Tương phản đo thật

Chữ trên nút brand UU, đo theo WCAG:

7.49:1
Đạt AAĐạt AAA
Contrast

Một component, mọi brand

Không có if (brand)

Màu thương hiệu gói trong 21 token. Component không biết mình đang ở brand nào — đổi brand là đổi một thuộc tính data-theme.

Brand mode

Cách dùng

Ba cách dùng UU DS

UU DS giữ UI đúng chuẩn, DNA tạo chất riêng của sản phẩm.

Cách 1

Tự thiết kế

Dựng màn bằng UU DS library trên Figma, nhờ AI trích DNA, rồi AI dựng tiếp màn, làm handoff hoặc code.

Dựng tiếp mànHandoffCode

Cách 2

Thuần AI

Đưa ảnh, link Figma hoặc website làm style anchor, AI trích DNA rồi dựng màn.

Dựng màn

Cách 3

Bản Basic

Chưa có style? AI dựng bản Basic để thử nhanh.

Thử nhanh
Xem cách dùng

Kiến trúc token

Màu gốc → vai trò → component

Component chỉ được gọi tên vai trò. Hex nằm ở tầng dưới cùng, không component nào chạm vào.

Tầng 1 · primitive 211 màu gốc · 19 ramp × 11 bậc
Tầng 2 · semantic 57 token gọi theo vai trò · brand chỉ đổi tầng này
Tầng 3 · component 48 component chỉ đọc vai trò, chạy mọi brand
Brand modeDefault · UU — đổi bằng data-theme
DensityTouch cho app · Compact cho desktop
LayoutMở rộng · thu gọn cho điều hướng bên
Đơn vịWeb dùng rem để co theo cỡ chữ người dùng · app dùng px
Đọc kiến trúc token

Giải phẫu component

Mọi con số đều có tên

Mỗi khoảng cách, cỡ chữ, bo góc đều trỏ về một token. Đây là component thật, phóng to 2×, số đo lấy trực tiếp từ nó.

TextButtonAccent · Base

  1. Khungcao 48, bo tròn hếtcontrol-height-baserounded-circlebackground-interactive
  2. Nhãnstyle label 16/24, cách lề 16text-labelobject-on-interactivecontrol-padding-x-base
  3. Icon suffixhộp 24, cách nhãn 8control-icon-basecurrentColorgap-2
  4. State layerlớp ::after màu chữ — đang nhấp nháy để bạn thấyopacity-20 hoveropacity-40 pressed

Brand × density

Cùng một form, bốn bối cảnh

Touch cho màn chạm, Compact cho desktop. Hai trục độc lập — component tự co theo token, không sửa một dòng code.

Touch · UUnút 48 · ô 48
Compact · UUnút 32 · ô 32
Touch · Defaultnút 48 · ô 48
Compact · Defaultnút 32 · ô 32

Danh mục

Component

Mỗi component có trang tài liệu riêng: cách dùng, mọi biến thể, và phần nào chưa chốt.

Không chỉ component — còn chỉ cách chọn

Bộ cây quyết định: trả lời từng câu hỏi là ra component nên dùng cho tình huống của bạn.

Nền tảng

Một nguồn, bốn đầu ra

Web (React)

Component React và CSS thuần, tên trùng spec, token CSS và icon dùng chung.

Hướng dẫn

Flutter

Widget cùng tên và cùng prop với bản web, token sinh từ cùng một file.

Hướng dẫn

Zalo Mini App

Dùng thẳng bản React, kèm hướng dẫn riêng cho môi trường mini app.

Hướng dẫn

Figma

Thư viện UU DLS dùng cùng tên biến và cùng giá trị token với code.

Dành cho developer

Bật brand và mật độ ngay trên thẻ html, còn lại là class có sẵn:

<html data-theme="uu" data-density="compact">

<button class="uu-btn uu-btn--base uu-interactive tb-accent-solid">
  Đăng bài
</button>

Làm sản phẩm cùng ÚÙ

ÚÙ Creative Studio dựng và vận hành design system cho startup và doanh nghiệp: từ token, thư viện Figma đến component code và tài liệu cho AI.

Liên hệ studio Xem Storybook

UU DS phiên bản 0.3.0 · cập nhật 18/10/2026 · Nhật ký thay đổi