Brand book.

Năm nguyên tắc. Mọi quyết định khác suy ra từ đây.

1. Biên tập, không tiếp thị. Chúng tôi là một quỹ và operator, không phải SaaS. Trang đọc như một ấn phẩm, không phải landing page. Không minh hoạ, không icon trang trí, không hero video.
2. Serif là bản sắc. Display face (Fraunces) nói lên vốn, tư duy dài hạn, phong thái institutional. Sans (Inter) lo dễ đọc. Mono (JetBrains Mono) dành cho metadata và eyebrow.
3. Kem ấm, không trắng lạnh. Nền off-white ấm, chữ mực đậm. Cam accent dùng tiết chế — một tín hiệu, không phải trang trí.
4. Khoảng trắng là tính năng. Nhịp dọc rộng, lề rộng, khoảng trống có chủ đích. Chỉ nén mật độ khi nó có nghĩa (bảng, bullet, memo).
5. Bất đối xứng trên grid. Text trái / hình ảnh phải là nhịp hero mặc định. Grid 12 cột bên dưới giữ mọi thứ thẳng hàng kể cả khi bố cục trông rất editorial.

Tất cả màu nằm ở src/app/globals.css dưới dạng CSS variables trong @theme. Không hardcode hex trong component — luôn dùng token.

Nền & mực

Accent

Quy tắc

• Accent là tín hiệu, không phải trang trí. Tối đa một element accent trên mỗi viewport.
• Gold dành cho metadata. Kicker, ngày, section identifier. Không dùng cho prose.
• Không bao giờ dùng trắng tinh hoặc đen tinh. Chỉ dùng kem (--color-bg) và mực (--color-ink).

Ba font

Fraunces là chữ ký của thương hiệu. Đặt font-variation-settings: "opsz" 144 cho mọi display size. <em> trong heading tự động chuyển sang italic, màu accent, weight nhẹ — đây là treatment đặc trưng, đừng override.

Type scale

Grid

• Container: .wrap = max-width 1440px, centered, padding clamp(20px, 5vw, 80px).
• Grid: 12 cột trong .wrap trên desktop, 1 cột trên mobile.
• Text column: cột 1–7 trên desktop. Không bao giờ rộng hơn ~640px.
• Auxiliary column: cột 10–12 trên desktop.

Vertical rhythm

Section cách nhau bằng 1 line 1px (--color-line), không bằng đổi màu nền.

Button — .btn

• Pill (border-radius: 999px), padding 10px 16px.
• Label mono uppercase 11.5px, tracking 0.1em.
• Base: nền trong suốt, border --color-line-2, chữ mực.
• Hover: đảo màu — nền mực, chữ kem. Mũi tên .arr dịch phải 3px.
• .btn-primary — nền accent, chữ trắng.
• .btn-ghost — viền mềm hơn, chữ ink-soft.

Một primary trên mỗi viewport.

Fund card

Card đứng riêng, nền kem (--color-bg), border 1px, radius 10px, shadow nhẹ. Bên trong: label (14px ink), value (display clamp(34, 3vw, 44)), caption (13px ink-mute), CTA (13px accent). Radius giữ ở 10px — institutional, không consumer-app.

Chúng tôi chủ động không dùng icon system. Các element hình ảnh duy nhất:

• Logo mark — biểu tượng sóng trong /public/brand/. Nav 30px, footer 40px, error 64px.
• Mũi tên — ký tự → (U+2192). Không phải SVG custom.
• Gold rule — span 1px × 20–24px cho bracket eyebrow/kicker.
• Dấu cộng — ký tự + trong mono, phân cách pillar trong horizontal strip.

Nếu một khái niệm cần giải thích, viết thêm một câu. Đừng với tới icon.

Nguyên tắc: tinh tế, ngắn, có chủ đích.

Mọi motion tôn trọng prefers-reduced-motion: reduce.

Ngôn từ là một phần của thiết kế. Một hệ thống hình ảnh sạch đẹp không cứu được copy yếu.

• Việt và Anh bình đẳng. Mỗi trang có cả hai. Không coi VI là bản dịch của EN — viết native mỗi thứ tiếng. Từ chuyên ngành phổ biến (SPV, LPAC, VCC, ILPA, cap table) giữ nguyên tiếng Anh trong copy VI.
• Không sáo rỗng. Không "full-stack ecosystem partner". Không "unlocking the future". Viết như một partner nhắn cho founder.
• Câu ngắn được. Đoạn ngắn cũng được. Phá bức tường trước khi nó hình thành.
• Số liệu cụ thể. "$100–200K ticket, quyết định trong 3 tuần" hơn "nhanh, founder-friendly".
• CTA trực tiếp. "Gửi pitch", "Yêu cầu deck LP". Không phải "Liên hệ".
• Ngôn ngữ pháp lý lạnh. Privacy và Terms cố tình khô — không brand voice, không đùa.

• Breakpoint (Tailwind mặc định): sm 640 · md 768 · lg 1024 · xl 1280 · 2xl 1536. Custom: xs 480.
• Typography scale tại md (768) — điểm break duy nhất cho hầu hết display copy.
• Grid collapse về 1 cột dưới lg (1024).
• Fund card, side rail, hình ảnh phụ ẩn dưới md — ưu tiên nội dung trên điện thoại.
• Touch target: tối thiểu 40×40px.

• Contrast: tất cả body meet WCAG AA với --color-bg. Ink-mute trên kem là sàn — không xuống dưới cho chữ mang nghĩa.
• Focus state: mọi interactive element có focus ring. :focus-visible mặc định chấp nhận được; không xoá nó.
• Mọi decor có aria-hidden="true" — gold rule, mũi tên, background art, marquee, fund card overlay.
• Ảnh có alt. Ảnh nền set qua bg-[url()] (Tailwind) nếu mang nghĩa thì wrapper có role="img" + aria-label; không thì aria-hidden.
• Tôn trọng prefers-reduced-motion. Không có loop infinite chạy ngầm cho người giảm motion.

1. Không hardcode màu hoặc font-size — dùng token và class. Nếu chưa có token thì thêm vào globals.css trước khi dùng.
2. Không thêm icon library. Nếu nghĩ rằng cần, đọc lại phần 6.
3. Không thêm font mới. Nếu nghĩ rằng cần, đưa team xem trước.
4. Không bỏ qua dịch. Mọi chuỗi user-facing phải có trong cả messages/vi.json và messages/en.json.
5. Giữ hero trong một fold. Render đủ nghĩa không cần scroll trên laptop 1366×768.
6. Section border 1px --color-line. Không 2px, không màu, không gạch đứt.
7. Một accent mỗi viewport. Cam có hạn.
8. Ship với cả hai locale. Test /vi/... và /en/... trước khi merge.

Câu hỏi, đề xuất, hoặc trường hợp guideline chưa phủ: brand@trendory.vn.