foundations
foundations là các token và quy ước cơ bản — nền tảng để xây dựng mọi thành phần giao diện. mỗi giá trị được định nghĩa một lần trong src/tokens/tokens.css và dùng xuyên suốt trong astro, storybook, và figma.
kiến trúc token 3 lớp
học từ SAP và Calcite — tách biệt reference, semantic, và component tokens để kiểm soát chính xác phạm vi thay đổi khi chuyển brand hoặc theme.
reference
--ref-* raw values cố định. không bao giờ thay đổi. ~120 tokens.
semantic
--color-* --text-* --surface-* --border-* theme-aware. brand + dark mode override lớp này. ~70 tokens.
component
--btn-* --card-* --input-* --table-* luôn trỏ đến lớp 2. tự động kế thừa theme. ~50 tokens.
--ref-blue-600 → --color-brand-600 → --btn-primary-bg nội dung foundations
colors
4 brand palettes (10 shades), neutral-ghi (12 stops), semantic colors, dark mode
typography
4 font families, 14-step type scale, brand font overrides, usage matrix
spacing
4px grid scale, radius, shadows, opacity, z-index, size tokens
iconography
lucide (line) + carbon (fill), 4 sizes, icon system conventions
single source of truth
tất cả token được định nghĩa trong src/tokens/tokens.css. astro import css, storybook import css + js. figma mirror từ code. một nguồn, nhiều nơi dùng.