Design System

Design System của Conan bắt nguồn từ conan1.com. Site mới sao chép token và component thay vì tự định nghĩa lại.

Nguyên tắc

Arial ở mọi nơi. Không dùng font tuỳ biến, kể cả cho code block.
Một màu nhấn duy nhất: terracotta #cc4e2d. Mọi màu khác là trung tính, trừ thang điểm đánh giá.
Bo góc 8px, viền 1px, không đổ bóng nặng.
Cỡ chữ tối thiểu 14px cho mọi nội dung đọc được.
Tôn trọng prefers-reduced-motion. Animation là gia vị, không phải nội dung.

Thành phần	Nguồn
Token màu, radius, font	`conan1.com/src/index.css`
`cn()` helper	`conan1.com/src/lib/utils.ts`
Button	`conan1.com/src/components/ui/button.tsx`
Icon	Heroicons (`@heroicons/react`)
Animation	Motion (`motion/react`)

TIP

conan1.com dùng Lucide. Các ứng dụng nội bộ mới (Compass) dùng Heroicons. Khi copy component từ conan1.com, nhớ đổi import icon.