# 02 — References

**Project:** website-tuvi
**Stage:** 2 — ui-reference
**Mood:** Truyền thống cao cấp (gold + đỏ đô + đen, serif Á Đông, vibe "tiệm trà cao cấp")

---

## Selected references (4)

| # | Site | Role | Why |
|---|------|------|-----|
| 1 | [diencamtamthe.com](https://diencamtamthe.com/) | **Functional clone** | Site gốc — clone 25+ tools, structure, taxonomy |
| 2 | [tuvi.vn](https://tuvi.vn/) | **Traditional VN tử vi** | Đỏ đô #a21313 chuẩn xưa, cách trình bày lá số 12 cung |
| 3 | [lichngaytot.com](https://lichngaytot.com/) | **Mobile UX competitor** | UX mobile mạnh, SEO chuẩn, nhiều tool tương tự |
| 4 | [shanghaitang.com](https://www.shanghaitang.com/) | **Luxury Á Đông aesthetic** | Đen tuyền + accent đỏ son + typography editorial — vibe "tiệm trà cao cấp" |

---

## 1. diencamtamthe.com — Functional clone

**Title:** Diễn Cầm Tam Thế
**Tagline:** "Xem tử vi, vận mệnh, thần số học, Kinh Dịch AI — Tư vấn phong thủy trực tuyến bằng AI"

### Visual DNA quan sát được
- **Font chính:** `Be Vietnam Pro` (Google Fonts, weights 300-800) + Material Symbols Outlined cho icons
- **Palette:** dark base (`#0a0714` near-black, `#1a1a2e` indigo-deep) + gold accent (`#ffaa00`) + cream (`#F5EDD8`) + lavender (`#a78bfa`) cho mystical
- **Layout:** dark theme mặc định, hero form ngày sinh above-fold, grid icon-card cho 25 tool, 10 sections
- **Tool taxonomy** (đã verify):
  - **Core:** Tử vi trọn đời, Vận mệnh AI, Tử vi năm/ngày, Tứ trụ, Số mạng 60 tuổi
  - **Phong thủy:** Phong thủy nhà, Màu sắc, Số ĐT, Năm xây nhà
  - **Lịch:** Lịch âm, Ngày tốt, Tuổi kết hôn
  - **Hợp tuổi & duyên:** Kuta, Hợp tuổi, So sánh duyên phận
  - **Mystic khác:** Thần số học, Cung hoàng đạo, Kinh Dịch, Giải mộng, Bàn tay
  - **Đặt tên:** Tên con, Tên công ty
  - **Library:** 24 sao, 12 cung, Blog, Thư viện AI

### 3+ traits to BORROW
1. ✅ **Cấu trúc hero**: form ngày sinh ngay above-fold, CTA "Xem ngay" big, 2 bullet trust ("AI", "Miễn phí")
2. ✅ **Tool taxonomy + grouping**: chia 25 tool thành ~6 nhóm — sao chép structure này
3. ✅ **Section Lục Diệu theo giờ + Tử vi hôm nay** (quick-check) — giúp user quay lại hằng ngày → retention
4. ✅ **Card icon-led** cho tool grid: emoji/material icon + heading rõ + 1 line desc

### What NOT to copy
- ❌ Dùng Material Symbols icon library — generic, kém Á Đông; thay bằng **Lucide** + custom SVG
- ❌ Palette hơi sci-fi (lavender + neon) — chệch khỏi mood "tiệm trà cao cấp"; ép tone về **gold + đỏ đô + đen** chuẩn truyền thống
- ❌ Hero typography weight quá nặng — giảm nhẹ, dùng serif cho heading thay sans
- ❌ Hơi nhiều shadow/glow — làm flat hơn, tinh tế hơn

---

## 2. tuvi.vn — Traditional VN tử vi

**Title:** Tử Vi Cổ Học Hàng Đầu Việt Nam

### Visual DNA
- **Font chính:** Roboto (placeholder, không tinh tế)
- **Palette:** đỏ đô đậm `#a21313` làm primary — RẤT chuẩn vibe tử vi truyền thống
- **Layout:** dày đặc text, image-heavy (61 images), nhiều h2/h3 → SEO content-first
- **Persona:** trung niên, đọc kỹ, ít animation

### 3+ traits to BORROW
1. ✅ **Đỏ đô #a21313** (hoặc gần đó) làm anchor color truyền thống — đây là tone "tử vi VN" đặc trưng
2. ✅ **Density of information**: tool page ngoài kết quả còn có giải thích lý thuyết → SEO + trust
3. ✅ **Image-heavy**: lá số tử vi vẽ ra hình, không chỉ text — cần tự render canvas/SVG cho lá số

### What NOT to copy
- ❌ UI cũ kỹ kiểu blog 2010 — bố cục dày đặc, không thoáng
- ❌ Roboto sans → đổi sang serif Á Đông để premium
- ❌ Không có dark mode

---

## 3. lichngaytot.com — Mobile UX competitor

**Title:** Lịch ngày TỐT - Tra cứu Lịch Vạn Niên, Xem Ngày Tốt Xấu, Tử Vi

### Visual DNA
- **Palette:** light grey `#eaeaea`/`#f2f2f2` + Google Material colors → khá generic
- **Layout:** 11 h2, 50 h3, 76 images, 34 buttons → mật độ tool cực cao, link mạnh
- **Mobile-first:** card layout, swipe carousel cho tool group, sticky bottom nav
- **SEO:** rất bài bản, schema markup, breadcrumb, related links

### 3+ traits to BORROW
1. ✅ **Sticky bottom nav mobile** với 4-5 icon chính (Home / Tử vi / Lịch / Phong thủy / Cá nhân) — tăng retention
2. ✅ **Carousel "Tools liên quan"** ở cuối mỗi tool page — cross-link engagement
3. ✅ **Schema + breadcrumb** chuẩn SEO — phải có ngay từ MVP
4. ✅ **Tool group page riêng** (vd: `/phong-thuy` list tất cả tool phong thủy) thay vì 1 page khổng lồ

### What NOT to copy
- ❌ Palette generic Material — không có cá tính
- ❌ Quá nhiều ads/banner — clean hơn
- ❌ Form input đơn giản quá — input ngày sinh cần custom picker (number wheel hoặc 3 dropdown)

---

## 4. shanghaitang.com — Luxury Á Đông aesthetic anchor

**Title:** SHANGHAI TANG | JOYFUL, MODERN, & EVOCATIVE WITH EASTERN ELEGANCE

### Visual DNA
- **Palette:** đen tuyền `#000000` + grey `#ededed` + accent xanh navy `#006bb4`
- **Typography:** serif sang (display) + sans cho body, line-height thoáng
- **Layout:** ảnh full-width chiếm dominant space, text minimal & oversized, generous whitespace
- **Mood:** quiet luxury, không loud, cảm giác "atelier", spacing rất rộng

### 3+ traits to BORROW (mood anchor — quan trọng nhất)
1. ✅ **Spacing rộng**: section padding ≥ 96px desktop, 64px mobile — tránh cảm giác "rẻ tiền chật chội"
2. ✅ **Display serif lớn cho heading** — dùng serif Á Đông (đề xuất `Noto Serif Display Vietnamese` hoặc `Playfair Display Vietnamese`)
3. ✅ **Đen tuyền + 1 accent màu mạnh duy nhất** — không màu tham, để gold/đỏ đô làm điểm nhấn duy nhất
4. ✅ **Image dominant, text minimal**: hero không cần nhiều chữ, dùng 1 ảnh symbolic (bát quái, kim tinh, lá số) + 1 H1 ngắn

### What NOT to copy
- ❌ Quá ít text (luxury fashion khác site công cụ — cần cả 2: SEO content + visual)
- ❌ Không có form/tool tương tác — site mình core là tool
- ❌ Background ảnh quá đậm có thể làm khó đọc → giữ contrast WCAG AA

---

## Synthesis — Visual language cuối cùng (input cho Stage 3 ui-system)

### Color mood (preliminary, sẽ refine ở ui-system)
| Token | Color | Role |
|---|---|---|
| `bg/primary` | `#0A0A0A` (near-black) | nền chính dark mode |
| `bg/elevated` | `#171313` (đen ấm hơi đỏ) | card, panel |
| `accent/gold` | `#D4AF37` (gold cổ điển) | CTA, highlight, lá số sao |
| `accent/red-dark` | `#8B0000` ~ `#A21313` (đỏ đô) | logo, badge, primary text accent |
| `text/primary` | `#F5EDD8` (cream warm) | text trên nền tối |
| `text/muted` | `#A89B7A` (gold muted) | text phụ |
| `border` | `#2A1F1F` (subtle warm dark) | divider |

### Typography
- **Display + Heading**: `Noto Serif Display` (Vietnamese subset) hoặc `EB Garamond` weight 600-700 — vibe truyền thống cao cấp
- **Body**: `Be Vietnam Pro` weight 400/500 — readable cho persona B (trung niên)
- **Numerals lá số**: `Crimson Pro` hoặc `Cormorant Garamond` — số trông "cổ điển"

### Spacing rhythm
- 8px base grid
- Section padding mobile 64px / desktop 96-128px
- Card padding 24px

### Mood keywords
**Quiet luxury · Á Đông cao cấp · Tinh tế nghiêm túc · Tiệm trà premium**
KHÔNG: flashy, neon, sci-fi, generic, cheap

### Interactions
- Subtle hover (gold underline expand, no aggressive scale)
- Smooth scroll, no parallax loud
- Loading: skeleton tinh tế, không spinner generic
- Cards: subtle 1px border + lift on hover, not heavy shadow

---

## Gate — Stage 2 EXIT CRITERIA

- [x] ≥2 references → **4 references**
- [x] Each has reason for selection → **đủ "Why" cho cả 4**
- [x] Each has ≥3 borrowable traits → **đủ ≥3 cho cả 4**
- [x] Each has "what NOT to copy" → **đủ cho cả 4**

✅ **PASS** — Sẵn sàng vào Stage 3 (ui-system)