Hệ thống Thiết kế · 06.A

Bảng màu — chia 3 lớp.

Lớp 1: 4 màu thương hiệu HAI 2015 (giữ nguyên). Lớp 2: 2 hệ accent cho 2 phương án thiết kế. Lớp 3: neutral scale cho text, border, background.

Brand Core · 4 màu HAI

HAI Green #1A8F3D · CMYK 100/0/100/0

HAI Blue #0066B3 · CMYK 100/45/0/0

HAI Red #D7282F · CMYK 0/95/95/15

HAI Orange #F08C1E · CMYK 0/55/95/0

02.A

Heritage Premium · accent + neutral

Warm White #FAF7F0 · Background

Heritage Gold #C9A961 · Accent

Heritage Ink #1F1B16 · Text primary

50#FAF7F0

100#F5EFE0

300#E5D5A8

500#C9A961

700#8B6F3A

02.B

Modern Minimalist · accent + neutral

Pure White #FFFFFF · Background

Modern Emerald #10B981 · Accent

Slate 900 #0F172A · Text primary

100#F1F5F9

200#E2E8F0

300#CBD5E1

500#64748B

900#0F172A

Semantic · success / warning / error / info

Success · HAI Green Tăng trưởng · Pass

Warning · HAI Orange Cảnh báo · Partial

Error · HAI Red Dịch hại · Fail

Info · HAI Blue Khoa học · Note

Tokens — CSS custom properties

:root {
  /* Brand — không đổi */
  --hai-green: #1A8F3D;
  --hai-blue:  #0066B3;
  --hai-red:   #D7282F;
  --hai-orange:#F08C1E;

  /* Heritage Premium */
  --heritage-gold:        #C9A961;
  --heritage-warm-white:  #FAF7F0;
  --heritage-ink:         #1F1B16;

  /* Modern Minimalist */
  --modern-emerald:    #10B981;
  --modern-slate-900:  #0F172A;
  --modern-slate-200:  #E2E8F0;
}

[data-variant="heritage"] {
  --bg:        var(--heritage-warm-white);
  --accent:    var(--heritage-gold);
  --text:      var(--heritage-ink);
}

[data-variant="modern"] {
  --bg:        #FFFFFF;
  --accent:    var(--modern-emerald);
  --text:      var(--modern-slate-900);
}

Tiếp tục: Typography · 06.B →