Giao diện
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.
Từ tháng 10.2026, conan1.com dùng theme Clay Diorama (ecosystem-clay) — nguồn: web.conan1.com/b/conan1/theme/ecosystem-clay. Hệ sinh thái được hình dung như một sa bàn đất sét nặn tay: khối kem là các thương hiệu, lối đi đất nung nối chúng lại, nền đá xám giữ mọi thứ vững chãi. Bản sống của Design System nằm ở route /styles của conan1.com.
Nguyên tắc
- Arial ở mọi nơi. Sự thủ công đến từ chất liệu, không từ kiểu chữ.
- Một nút đất nung mỗi màn hình. Đất nung
#c44a2acho hành động chính và lối đi;#cc4e2dcho logo, tiêu đề nhấn. Màu thương hiệu con chỉ là một chấm 8–12px. - Chất liệu đất sét: bo 16–24px, bóng đôi nâu ấm, mờ, không góc nhọn, không viền mảnh, không kính mờ.
- Quan hệ vẽ bằng lối đi đất nung — dải 4–6px bo tròn cho stepper, timeline, sơ đồ thương hiệu.
- Nhân vật ở trạng thái rỗng, thành công, nhắc việc — Nhím Gai, Ốc Nhẫn, Chũi Đếm, Sẻ Nối.
- Cỡ chữ tối thiểu 14px; tôn trọng
prefers-reduced-motion.
Nguồn
| Thành phần | Nguồn |
|---|---|
Token màu, radius, bóng, lớp clay-* | conan1.com/src/index.css |
cn() helper | conan1.com/src/lib/utils.ts |
| Button | conan1.com/src/components/ui/button.tsx |
| Icon (120, Conan1 Clay) | conan1.com/public/icons/clay/*.svg + src/components/clay/ClayIcon.tsx |
| Nhân vật 2D (4 × 3 biểu cảm) | conan1.com/public/mascots/2d/<id>-<happy|think|cheer>.svg |
| Nhân vật 3D (render sa bàn) | conan1.com/public/mascots/3d/<id>-<wave|cheer>.webp, group.webp |
| Primitive (SectionHeading, ClayPath, Disclosure, MascotNote, StatPebble…) | conan1.com/src/components/clay/Primitives.tsx |
TIP
Các ứng dụng nội bộ (Compass) vẫn dùng Heroicons và token cũ; chỉ các site công khai sao chép bộ Clay.