Màu sắc

Phân cấp thị giác bằng neutral

Dùng neutral sáng hơn cho bề mặt cần tập trung. Mắt người dùng sẽ được dẫn tới vùng quan trọng nhất mà không cần thêm màu.

Shared color đồng bộ trên toàn bộ M365, dùng trong component giá trị cao (avatar, lịch, badge) để người dùng nhận ra chức năng giữa các sản phẩm. Dùng tiết kiệm — chỉ để nhấn vào vùng quan trọng.

Shared color trong dark mode

Ở dark mode, shared color dịch chuyển độ bão hoà và độ sáng để giảm mỏi mắt và đảm bảo tương phản — không chỉ đảo ngược màu.

Màu ngữ nghĩa (semantic)

Một số shared color được dành riêng để truyền đạt phản hồi, trạng thái hoặc mức khẩn cấp, dựa trên liên tưởng thực tế: đỏ = nguy hiểm, vàng/cam = thận trọng, xanh lá = tích cực. Luôn đi kèm icon/chữ để giảm tải nhận thức.

Brand color tạo nhận diện tức thì cho sản phẩm. Áp dụng có chủ đích vào vùng cụ thể để tạo điểm nhấn và giữ người dùng định hướng. Mỗi brand là một ramp 16 bậc; đổi brand chỉ cần data-brand.

Brand mặc định của Yugen UI là Sakura 桜 #C2347A — hồng anh đào đậm, tương phản 5.16:1 với chữ trắng, và lệch hue ~30° so với đỏ danger để nút chính không bao giờ bị nhầm với hành động phá huỷ. Bậc nhạt 130–160 chính là sắc cánh hoa (#FFA7C9 → #FDEDF3).

// index.html — đổi brand cho toàn ứng dụng
<html data-brand="web">

// Một vùng riêng (đặt kèm data-theme nếu nằm trong theme khác)
<section data-theme="light" data-brand="teams">...</section>

Trên web, component đậm dần khi tương tác: sáng nhất khi nghỉ, đậm hơn khi hover, đậm nhất khi nhấn/chọn. (Windows làm ngược lại: control sáng dần khi tương tác.)

Trạng thái focus

Khi focus bằng bàn phím, màu control không đổi — thay vào đó khung ngoài có nét dày hơn (2px colorStrokeFocus2) để phân biệt tương tác bàn phím với chuột. Nhấn Tab để thử.

Gradient trong Fluent 2 là ngôn ngữ biểu cảm: xuất hiện ở minh hoạ, hero, trang giới thiệu — tạo cảm giác ánh sáng và chuyển động. Gradient không phải màu chức năng nên không bao giờ dùng cho control hay trạng thái.

import { GradientText, WavyUnderline, BloomArt } from "@/components/ui";

<h1 className="relative inline-block font-display text-display">
  <GradientText gradient="sakura">Yugen UI</GradientText>
  <WavyUnderline gradient="sakura" className="absolute inset-x-0 -bottom-4 h-5" />
</h1>

<div className="h-28 rounded-2xlarge bg-gradient-dusk" />

1. Đảm bảo tương phản đủ cho người thị lực kém hoặc mù màu: chữ ≥ 4.5:1 (chữ lớn ≥ 3:1), thành phần UI ≥ 3:1.
2. Khi có thể, cho phép người dùng tự chọn bảng màu (light / dark / brand) phù hợp với họ.
3. Không dùng màu làm cách truyền đạt duy nhất — luôn đi kèm chữ, icon hoặc hình dạng.

Bảng dưới đây được tính trực tiếp từ token đang áp dụng — đổi theme ở góc trên để kiểm tra dark mode.