Colors & Brands

Colors & Brands

1thay dùng kiến trúc 2 tầng màu: Primitive tokens (giá trị gốc) và Semantic tokens (vai trò). Điều này cho phép đổi toàn bộ giao diện chỉ bằng cách map lại semantic token sang primitive khác.

Primitive Tokens (🎨 1color)

5 bộ màu brand, mỗi bộ có thang 050 → 999:

Brand	Vai trò	Token prefix
1tayquen	Success, positive	--color-teal-*
1reputa	Info, secondary	--color-blue-*
1kien	Primary, accent	--color-indigo-*
1haychay	Danger, negative	--color-red-*
1ghi	Surface, text, border	--color-gray-*

Semantic Tokens (🎯 ui colors)

Đây là tầng nên dùng khi code component. Mỗi semantic token alias đến một primitive.

Semantic Token	Alias →	Giá trị
--color-bg-primary	Gray 000	#FFFFFF
--color-bg-secondary	Gray 050	#F6F7F9
--color-bg-brand	Indigo 600	#1C1EFF
--color-text-primary	Gray 950	#11131A
--color-text-secondary	Gray 500	#838799
--color-text-inverse	Gray 000	#FFFFFF
--color-border-primary	Gray 200	#DCDEE6
--color-accent	Indigo 600	#1C1EFF
--color-accent-success	Teal 600	#019A7C
--color-accent-danger	Red 500	#F44F44

Multi-Brand Mode

File Figma rpt-design-system có 2 brand modes:

• reputa-blue — Mặc định, dùng 1kien (Indigo) làm accent
• premier-red — Đổi accent sang đỏ

Chỉ cần đổi 1 variable branding/* trong Figma, toàn bộ component tự động cập nhật. Tương tự trong code:

/* Brand A: Indigo */
:root { --color-accent: var(--color-indigo-600); }

/* Brand B: Red */
:root { --color-accent: var(--color-red-500); }

Light / Dark Mode

☀️ Light

Nền trắng, chữ Gray 950, accent Indigo 600.

Primary Action

🌙 Dark

Nền Gray 950, chữ trắng, accent Indigo 400.

Primary Action