Design System Golden Lotus

Nguồn Chuẩn

File Figma:

• https://www.figma.com/design/ZllZIMyuuJY8rRniXtk5lW/Spa?node-id=0-1
• File key: ZllZIMyuuJY8rRniXtk5lW

Nguồn trong code:

• Tokens: shared/design/*
• UI primitives: shared/ui/*
• Tương thích legacy: constants/Colors.ts, constants/Layout.ts, constants/Typography.ts

Core Tokens

Màu:

• Gold: #EAA31F
• Gold soft: #F7DBA8
• Cream: #FEF9F1
• Cream deep: #FCF2E0
• Home gray: #F6F6F6
• Surface: #FFFEFC
• Primary text: #212121
• Secondary text: #555555
• Tertiary text: #828282
• Header brown: #5A3600
• Success: #4CAE4F
• Error: #F44034

Typography:

• Font mặc định: Inter
• Label đậm: Inter 700
• Label membership như MEMBER / GOLD: Inria Serif 700
• Brand/auth logo text chỉ dùng Montserrat khi node Figma xác nhận

Layout:

• Mobile Figma frame width: 440
• Content width chuẩn: 400
• Side margin chuẩn: 20
• Gap phổ biến: 10, 15, 20, 25

Radius:

• Input/button: 3
• Chip: 5
• Card: 10
• Pill/circle: 999+

Quy Tắc Dev

• Không hard-code màu trong screen trừ màu asset một lần.
• Không tự phát minh font size trong screen. Nếu Figma cần size mới thì thêm token trước.
• Dùng shared/ui primitives cho screen mới.
• Screen hiện tại có thể giữ import legacy trong lúc migrate, nhưng code mới nên import từ shared/design và shared/ui.
• File screen không nên chứa header, tab bar hoặc card implementation dài và lặp lại.
• Khi Figma API chưa dùng được, ghi rõ quyết định token là tạm thời trong implementation note.