Brand book.

Five rules. Everything else is derived from them.

1. Editorial over marketing. We are a fund and an operator, not a SaaS. Pages read like a publication, not a landing page. No illustrations, no playful icons, no hero videos.
2. Serif as identity. The display face (Fraunces) signals capital, long-term thinking, and institutional posture. Sans (Inter) handles body legibility. Mono (JetBrains Mono) is reserved for metadata and eyebrows.
3. Warm cream, not cold white. The palette is a warm off-white background with high-contrast ink. Accent orange is used sparingly — a signal, not a decoration.
4. Space is a feature. Generous vertical rhythm, wide margins, and intentional emptiness. Density is used only where it earns meaning (tables, bullets, memos).
5. Asymmetry with a grid. Text-left / imagery-right is the default hero rhythm. The 12-column grid underneath keeps everything aligned even when the composition looks editorial.

All colors live in src/app/globals.css as CSS variables under @theme. Do not hardcode hex values in components — always use the token.

Surface & ink

Accent

Rules

• Accent is signal, not ornament. One accent-color element per viewport at most.
• Gold is for metadata. Kickers, dates, section identifiers. Not for prose.
• Never use pure white or pure black. Cream (--color-bg) and ink (--color-ink) only.

Faces

Fraunces carries the brand. Set font-variation-settings: "opsz" 144 on all display-size uses. <em> inside any heading auto-switches to italic, accent color, and a lighter weight — this is a signature treatment; do not override.

Type scale

Grid

• Container: .wrap = max-width 1440px, centered, padding clamp(20px, 5vw, 80px).
• Grid: 12 columns inside .wrap on desktop, 1 column on mobile.
• Text column: cols 1–7 on desktop. Never wider than ~640px measure.
• Auxiliary column: cols 10–12 on desktop.

Vertical rhythm

Sections are separated by a single 1px line (--color-line) — never by background color alternation.

Button — .btn

• Pill (border-radius: 999px), padding 10px 16px.
• Label: mono uppercase, 11.5px, 0.1em tracking.
• Base: transparent background, --color-line-2 border, ink label.
• Hover: inverted — ink background, cream label. .arr (→) slides right 3px.
• .btn-primary — accent background, white label.
• .btn-ghost — same outline but softer border and ink-soft label.

Rule of one primary per viewport.

Fund card

Free-standing card, cream background (--color-bg), 1px line border, 10px radius, subtle shadow. Inside: label (14px ink), value (display clamp(34, 3vw, 44)), caption (13px ink-mute), CTA (13px accent). Border-radius stays at 10px — institutional, not consumer-app.

We deliberately do not use an icon system. The only graphic elements:

• Logo mark — the wave-ish symbol in /public/brand/. Nav 30px, footer 40px, error 64px.
• Arrow glyph — the character → (U+2192). Never a custom SVG arrow.
• Gold rule — a 1px × 20–24px span for eyebrow/kicker brackets.
• Plus glyph — the character + in mono, separating pillars in horizontal strips.

If a concept needs explaining, write one more sentence. Do not reach for an icon.

Principles: subtle, short, purposeful.

All motion respects prefers-reduced-motion: reduce.

The words are part of the design. A spotless visual system cannot save weak copy.

• Vietnamese + English are peers. Every page ships in both locales. Don't treat VI as a translation of EN — write each natively. Industry terms (SPV, LPAC, VCC, ILPA, cap table) stay in English inside VI copy.
• No clichés. No "full-stack ecosystem partner." No "unlocking the future." Write like a partner writing to a founder.
• Short sentences are fine. Short paragraphs too. Break the wall before it forms.
• Numbers are specific. "$100–200K ticket, decided in 3 weeks" beats "fast, founder-friendly checks."
• CTA verbs are direct. "Pitch us," "Request LP deck." Not "Get in touch."
• Legal language stays cold. Privacy and Terms are deliberately plain — no brand voice.

• Breakpoints (Tailwind defaults): sm 640 · md 768 · lg 1024 · xl 1280 · 2xl 1536. Custom: xs 480.
• Typography scales at md (768) — the single break for most display copy.
• Grid collapses to 1 column below lg (1024).
• Fund card, side rails, secondary imagery hidden below md — content-first on phones.
• Touch targets: minimum 40×40px for any interactive element.

• Contrast: all body copy meets WCAG AA against --color-bg. Ink-mute on cream is the floor — do not go lighter for text that conveys meaning.
• Focus states: every interactive element has a visible focus ring. Default :focus-visible is acceptable; do not remove it.
• Every decorative element has aria-hidden="true" — gold rules, arrows, background art, marquee, fund card overlay.
• All images have alt. Background images get role="img" + aria-label when they carry meaning; otherwise aria-hidden.
• Respect prefers-reduced-motion. No infinite loops become background processes on a reduced-motion viewer.

1. Don't hardcode colors or font sizes — use tokens and classes. If something doesn't have a token yet, add one in globals.css before using it.
2. Don't add icon libraries. If you think you need one, re-read §6.
3. Don't add a new font. If you think you need one, bring it to the team first.
4. Don't skip the translation. Every user-facing string lands in both messages/vi.json and messages/en.json.
5. Keep the hero one fold. It should render meaningfully without scroll on a 1366×768 laptop.
6. Section borders are 1px --color-line. Not 2px, not colored, not dashed.
7. One accent per viewport. Orange is rationed.
8. Ship with both locales working. Test /vi/... and /en/... before merging.

Questions, suggestions, or a case the guideline doesn't cover: brand@trendory.vn.