Yugen UI

Công cụ

Theme Designer

Tạo theme từ một màu key, rồi chọn bo góc, mật độ, chữ, màu trung tính, độ nổi và chuyển động. Các trục ngoài màu chỉ có vài bậc đã được kiểm tra; mỗi phần có bản xem trước và kiểm tra riêng, cuối trang là light, dark và high contrast cạnh nhau.

Màu

Màu key là brand80; 15 bậc còn lại sinh từ nó. Light và dark dùng các bậc khác nhau nên cả hai đều được kiểm tra.

Màu key (brand80)

Độ rực (vibrancy)100
Xoắn hue (°)0
Light
Chữ brand trên nền tint
Chữ brandXem chi tiếtMới
Dark
Chữ brand trên nền tint
Chữ brandXem chi tiếtMới

Kiểm tra

  • Chữ trắng trên nút primary (light)5.16:1
  • Chữ trắng trên nút primary (dark)6.45:1
  • Chữ brand trên nền tint5.71:1
  • Chữ brand trên nền tối5.19:1
  • Khác hue so với danger31°

Hình dáng

Cả ramp bo góc đổi cùng tỉ lệ để control, card và dialog giữ tương quan; nút tròn vẫn tròn.

Bo góc

NhãnBo vừa
control 4px

Alex Chen

Thiết kế

Lưu thay đổi?

card 6px · dialog 8px

Mật độ & chữ

Mật độ

Một hệ số cho spacing và chiều cao control. Ở bậc Gọn, đoạn YugenProvider phần Xuất thêm density và control mặc định size small.

Chọn trong danh sách hoặc gõ tên font rồi nhấn Enter. Stack nào cũng kết thúc bằng font hệ thống; font web không đi kèm CSS xuất ra.

Cỡ chữ gốc

Cả type ramp nhân theo tỉ lệ; line height được tính lại, không chỉnh riêng.

Segoe UI
Tiêu đề24px / 32px
Tiêu đề phụ20px / 28px
Nội dung chính của trang14px / 20px
Chú thích12px / 16px
size small · 24px
size medium · 32px

Kiểm tra

  • Vùng bấm nhỏ nhất (size small)24px

Nền & độ nổi

Đổi ở light và dark; high contrast giữ nguyên.

Màu trung tính

Pha nhẹ một sắc vào thang xám; tương phản được kiểm tra lại.

Độ nổi

Cả thang bóng đổi cùng lúc. Phẳng vẫn giữ một nửa bóng cho Menu, Dialog để tách khỏi nền.

Light
1234
Chữ chínhChữ phụChữ mờ
CardMenuDialog
Dark
1234
Chữ chínhChữ phụChữ mờ
CardMenuDialog

Kiểm tra

  • Chữ trên nền trung tính (light, dark)5.68:1

Chuyển động

Nhân thời lượng ×0.75 / ×1 / ×1.25, tối đa 500ms. prefers-reduced-motion vẫn được ưu tiên.

Chuyển động

Nhanh100ms
Vừa200ms
Chậm400ms

Glass

Vật liệu glass của Yugen Labs. Blur, bão hoà và độ đục đi cùng nhau; độ đục không xuống dưới mức giữ chữ 4.5:1 trên nền đen hay trắng.

Glass (Yugen Labs)

Blur 24px, bão hoà 180%, độ đục 0.8 / 0.82 (light / dark).

Sắc của glass

Theo brand: nền glass lấy bậc 160 (light) hoặc 20 (dark) của ramp. Cần trình duyệt có relative color syntax.

Light
Dark

Kiểm tra

  • Chữ trên glass, nền sau đen hoặc trắng (light, dark)5.55:1

Xem trước

Component thật dùng theme vừa tạo, light, dark và high contrast cạnh nhau. Theme lồng nên không ảnh hưởng phần còn lại của trang.

Đạt cả 8 kiểm tra

LightMới

Không gian làm việc

Đã đồng bộ · Xem chi tiết

Mời thành viên

Lời mời được gửi qua email trong vài phút.

Hoá đơnTrạng thái
HD-1024Đã thanh toán
HD-1025Chờ duyệt

Đã lưu thay đổi

Đã đồng bộ với các thiết bị khác.

DarkMới

Không gian làm việc

Đã đồng bộ · Xem chi tiết

Mời thành viên

Lời mời được gửi qua email trong vài phút.

Hoá đơnTrạng thái
HD-1024Đã thanh toán
HD-1025Chờ duyệt

Đã lưu thay đổi

Đã đồng bộ với các thiết bị khác.

High contrastMới

Không gian làm việc

Đã đồng bộ · Xem chi tiết

Mời thành viên

Lời mời được gửi qua email trong vài phút.

Hoá đơnTrạng thái
HD-1024Đã thanh toán
HD-1025Chờ duyệt

Đã lưu thay đổi

Đã đồng bộ với các thiết bị khác.

Xuất token

CSS: dán vào file CSS chính của app, ngay sau @import "yugen-ui/theme.css", rồi đặt brand cho YugenProvider. Gồm brand ramp và mọi lựa chọn ở trên. JSON (chỉ brand ramp): nhập vào Figma (Tokens Studio, Variables) hoặc Style Dictionary.

Dùng: <html data-brand="my-brand">
CSS
[data-brand="my-brand"] {  --brand-10: #240c16;  --brand-20: #391324;  --brand-30: #4c1930;  --brand-40: #61213f;  --brand-50: #79274d;  --brand-60: #912d5c;  --brand-70: #a72f69;  --brand-80: #c2347a;  --brand-90: #e24a92;  --brand-100: #fa65a8;  --brand-110: #fb7cb2;  --brand-120: #fd8ebc;  --brand-130: #ffa7c9;  --brand-140: #fec1d7;  --brand-150: #fed6e4;  --brand-160: #fdedf3;}
<YugenProvider applyToDocument brand="my-brand" theme="light">
  <App />
</YugenProvider>