Token

Token khai báo trong conan1.com/src/index.css, dưới dạng CSS custom property, và map sang Tailwind v4 qua @theme inline (bg-clay, text-terra, text-slate…).

Bảng c1-clay

Token	Giá trị	Vai trò	Tỉ lệ
--clay	#f4eee6	Kem đất sét — thẻ, tấm nền (--card)	~45%
--warm	#fff7ed	Nền trang (--background)	~25%
--sand	#d8c3a5	Thẻ phụ, vùng chọn, thanh rỗng	~12%
--slate	#5b6b78	Chữ phụ, icon trung tính (--muted-foreground)	~8%
--terra	#c44a2a	Nút chính, lối đi (--primary, --ring)	~7%
--brand	#cc4e2d	Logo, tiêu đề nhấn	—
--ink	#111111	Chữ chính (--foreground)	~3%

Chữ trên nền đất nung luôn là #fff7ed.

Bóng

Bóng luôn nâu ấm rgb(78 44 26), không bao giờ đen xám.

Token	Dùng cho
--shadow-clay	Thẻ thường: ngoài 0 10px 24px /.14, trong sáng mép trên trái, trong tối mép dưới
--shadow-clay-sm	Thẻ nhỏ, pill, nút phụ
--shadow-clay-lg	Plinth, hero, trạng thái hover
--shadow-groove	Rãnh lõm: ô nhập, thanh tiến độ

Radius, chữ, chuyển động

Token	Giá trị
--radius-sm … --radius-2xl	12px, 16px, 20px, 24px, 32px
--font-sans	Arial, Helvetica, sans-serif
--ease-clay	cubic-bezier(.45,.05,.4,1)

H1 40–56px đậm, giãn chữ -0.5px; H2 28–36px; H3 20/28px; thân bài 16/26px; chú thích 14px đá xám.

Lớp thành phần

clay-card (--sm, --sand), clay-plinth, clay-lift, clay-pill (--sand, --terra), clay-dot, clay-groove, clay-path, clay-photo, clay-badge, clay-squash, clay-drop, clay-disclosure.

WARNING

Không hard-code mã màu trong component. Dùng class Tailwind ánh xạ từ token hoặc var(--...).