Theme danghong — Warm Apple x YC
Dùng cho danghong.me, media.danghong.me và docs.danghong.me. Quy tắc lưới, truy cập và tên token ở Core; component riêng của danghong.me ở www/design.
1. Triết lý
Giao thoa giữa thẩm mỹ cao cấp và thực chứng dữ liệu:
- 30% Apple (The Editorial Look): tối giản, typography tinh tế (
Inter), khoảng trắng rộng, chuyển động mượt nhưng không rườm rà. - 70% YCombinator (The Evidence Look):
- Real Image First: chỉ dùng ảnh thật của sản phẩm và con người.
- Data Transparency: con số, chỉ số trình bày rõ ràng.
- Functional Density: thông tin dày nhưng sắp xếp khoa học, giúp ra quyết định nhanh.
Keywords: Warm Apple Minimalism, Functional Density, Real-time Evidence, Human-centric.
2. Màu
| Vai trò | Hex | Ứng dụng |
|---|---|---|
| Nền chính | #F9F7F5 | Warm Beige, dễ chịu |
| Nền nhấn | #EDE6DE | Shadow Beige, phân tách section |
| Chữ | #1D1D1F | Charcoal Black |
| Nhấn | #8E3A3A | Luxury Crimson: link, nút chính |
| Đường kẻ | #E5E5E7 | Mảnh 0.5px, thay cho shadow |
| Card | #FFFFFF | Nền card |
Nơi khai báo token trong code:
| Site | File | Tên biến | Chế độ tối |
|---|---|---|---|
| danghong.me | website/src/app/globals.css | --background, --secondary, --foreground, --accent, --border, --card (dùng qua class Tailwind bg-background, text-accent, border-border-custom) | Không |
| media.danghong.me | media/src/render.js | --bg, --soft, --fg, --muted, --accent, --accent-soft, --line, --card | Có, theo prefers-color-scheme (accent #E08A8A) |
| docs.danghong.me | docs/.vitepress/theme/custom.css | Biến VitePress --vp-c-brand-*, --vp-c-bg* | Có, theo VitePress (accent #D98C8C) |
3. Chữ
- Inter cho nội dung, JetBrains Mono cho nhãn kỹ thuật và badge. Trên danghong.me nạp bằng
next/font/googletrongwebsite/src/app/layout.tsx. - Tiêu đề đậm (
font-bold/font-extrabold), tránhfont-blackcho khối văn bản lớn. - Tiêu đề song ngữ, hai màu: tiếng Anh là chính, tiếng Việt là phụ; dùng Charcoal và Crimson.
4. Hình ảnh và phản hồi
- Light-first trên danghong.me: website không có dark mode; nhịp thay đổi giữa Beige sáng và Shadow Beige. (Media và docs có dark mode, xem bảng mục 2.)
- Human-centric: ưu tiên có con người trong ảnh showcase.
- Tactile feedback: nút chính màu Crimson, lún xuống khi bấm.
- Card: viền 0.5px, bo góc 12px, shadow nhẹ.
5. Giọng văn
Thực dụng, gần gũi, tinh gọn. Chi tiết ở Content standards.
Việc còn mở
| # | Việc |
|---|---|
| TD1 | Media dùng tên token khác danghong.me (--bg thay vì --background...). Đổi về bộ tên ở Core §4 khi sửa media. |
| TD2 | Ba site lệch nhau về dark mode: website không có, media và docs có. Cần quyết định có thêm dark mode cho danghong.me không. |
Lịch sử
- 2026-10-23: Tách từ
B5_Design_System.md. Phần component riêng của danghong.me chuyển sangsites/www/design.md, phần lưới và responsive chuyển sangcore.md.