Skip to content

Foundations Overview

Foundations là các design tokens và nguyên tắc cơ bản tạo nên nền tảng của 1thay design system. Mọi component và pattern đều được xây dựng từ những foundations này.

TokenMô tảTrang
ColorsBảng màu với semantic tokens cho light/dark modeXem →
TypographyHanken Grotesk, Inter, JetBrains Mono — type scale đầy đủXem →
SpacingThang khoảng cách dựa trên lưới 4pxXem →
IconographyHệ thống icon, kích thước, stroke styleXem →
ShadowsĐộ nổi và elevation tokensXem →
  1. Bắt đầu với Colors — chọn semantic tokens cho nền, chữ, border
  2. Thiết lập Typography — chọn font và cỡ chữ cho từng cấp
  3. Áp dụng Spacing — dùng token spacing cho padding, margin, gap
  4. Thêm IconsShadows khi cần