Phát hành nội bộ · 2026 · v3.3

Design
System.

Tài liệu duy nhất, đầy đủ về nhận diện thương hiệu Thích Cay — từ token đến component, từ logo đến copy. Mở 1 file, có mọi thứ.

Xem slide deck Tải PPTX tokens.css README

Tóm tắt nhanh — Cheat sheet

Primary
#B41A1A
oklch(.47 .18 27)
Surface
#FBF5E7
oklch(.97 .02 89)
Card surface
#FFFCF1
--surface-elevated
Text
#2B241E
--neutral-800
Display font
DVN Luckiest Guy
UPPERCASE only
Heading font
Be Vietnam Pro
H1–H6, 300–900
Body font
Plus Jakarta Sans
variable 200–800
Logo font
Gagalin
không load cho UI
Spacing base
4px
--space-4 = 16px
Radius rule
≥ 6px
không bao giờ 0
Shadow
red-tinted
rgba(180,26,26,…)
Motion
150ms
bounce easing default
01

Thương hiệu

3 cards

Tinh thần thương hiệu Thích Cay — Đậm đà · Ấm áp · Rất Việt. Hệ thống logo (mark + wordmark), bộ icon Lucide 2px rounded với accent --brand-accent, và mood board cảm xúc tổng quan.

§ 9 · Brand · Iconography Mở riêng
02

Colors

5 cards

5 brand token cốt lõi + 1 elevated. Page bg luôn là Cream #FBF5E7; card luôn dùng --surface-elevated + shadow-md để tách khỏi bg. Tỉ lệ 60 / 30 / 10: cream paper · chilli red + ink · caramel + peach accent. Mỗi token có HEX, OKLCH, semantic role.

§ 4.1 · Colors · Brand Mở riêng
§ 4.3 · Colors · Primary scale (Chilli Red 50–950) Mở riêng
§ 4.4 · Colors · Neutral scale (0–900) Mở riêng
§ 4.5 · Colors · Semantic states Mở riêng
§ 4.6 · Colors · Signature gradient Mở riêng
03

Typography

5 cards

4 font · 26 token type scale. Display (DVN Luckiest Guy, UPPERCASE) cho hero — Heading (Be Vietnam Pro) cho H1-H6 — Body (Plus Jakarta Sans) cho UI/button/price — Mono (Be Vietnam Pro tabular-nums) cho SKU, mã đơn, timestamp.

§ 5.2 · Type · Scale 26 tokens Mở riêng
§ 5.1 · Type · Display — DVN Luckiest Guy Mở riêng
§ 5.1 · Type · Heading — Be Vietnam Pro Mở riêng
§ 5.1 · Type · Body — Plus Jakarta Sans Mở riêng
§ 5.6 · Type · Mono — Be Vietnam Pro tabular Mở riêng
04

Spacing

3 cards

Hệ 4px linear cho mọi padding/margin/gap. Radius luôn ≥ 6px — không bao giờ 0. Shadow red-tinted dùng rgba(180,26,26,…) thay vì black — giữ palette ấm.

§ 6.1 · Spacing · 4px scale Mở riêng
§ 6.2 · Spacing · Border radius Mở riêng
§ 6.3 · Spacing · Shadows Mở riêng
05

Components

6 cards

10 quy tắc bất biến áp dụng cho mọi card/panel/sheet/modal. Components nổi bật khỏi page bg, visual rhythm nhất quán. Primary CTA dùng signature gradient, tất cả button bo pill UPPERCASE.

§ NEW · Components · Rules chung Mở riêng
§ 10 · Components · Buttons Mở riêng
§ 12 · Components · Chips · Tags · Badges Mở riêng
§ 11 · Components · Inputs & form states Mở riêng
§ supplemental · Components · Hero & promo banner Mở riêng
§ 12 · Components · Product card Mở riêng
06

Motion

1 card

5 duration token + 5 easing. --duration-fast (150ms) là default cho hover/focus. --ease-bounce = cubic-bezier(.34, 1.56, .64, 1) cho rubber-stamp entries.

§ 8 · Motion · Duration & easing Mở riêng
07

Mood & UI Kits

1 surface

Mood board tổng quan (logo / palette / voice / specimen layout 12-col), kit landing page mẫu, và mini-app flow đang phát triển.

Brand · Mood board Mở riêng