DESIGN.md — Taiho Ventures (Heritage & Warmth)

Per-style brand authority for src/styles/32-heritage-copper-taiho-toi/. Sourced from a Claude Design handoff bundle (tvl-based-on-onc-v3/project/concept-a-heritage.html, May 2026). Treat sections 1–7 as canonical truth.

1. Aesthetic Anchor

Primary family: Warm Editorial — long-tenured pharma partner reading like a serif-led editorial feature, not a pitch deck. Secondary remix: Heritage / institutional pharma — copper masthead, anniversary stamp, rounded pill nav inherited from the Taiho Oncology brand language. Reference brands: Taiho Oncology (warm cream + copper + teal corporate brand) × SR One (credibility, warmth) × 5AM Ventures (pharma-grade gravitas). Visual atmosphere: Warm cream paper grounded by a deep copper-to-bronze hero with backlit lab-glass photography. Serif headlines drop italic copper accents the way a print article uses pull quotes. Body type sits in a clean sans, but the display is unapologetically literary — tall, light-weight, hairline-tracked. Surfaces alternate cream / mint / copper bands so the page feels like turning the chapters of a long-form report.

2. Brand Voice

Adjectives: patient, scientifically precise, institutional, decade-aware, founder-respectful. Voice anchor: Gladwell-adjacent — the trusted senior partner who explains the science without condescension, then earns the close by quoting numbers. Voice sample:

"Taiho Ventures is the corporate venture arm of Taiho Pharmaceutical — a $400M evergreen fund backing breakthrough therapeutics from preclinical through proof of concept, alongside the world's leading institutional life-science investors."

Says:

"The bridge to what comes next."
"Patient capital partner with strategic intent."
"Scientists first, investors second."

Avoids: "ecosystem," "premier," "world-class," "transform," "unlock potential," any startup-y "let's build the future" register. No purple verbs. Sample sentences:

Founded in 2016 and backed by Taiho Pharmaceutical's eight-decade R&D engine, we invest where breakthrough biology meets a credible path to global commercialization — with the patience to develop science on the science's timeline, not the fund's.

A textbook proof point for our build-to-buy model: we co-created the company, contributed pipeline science, syndicated capital with leading institutional partners, and re-acquired the asset to advance development at global scale.

3. Color Palette & Roles

Mode: light (with deep copper hero band + copper case-study band as the dark moments). Dominant: #FAF7F3 (--heritage-paper) — warm off-white page background; #3F2A1F (--heritage-ink) — warm near-black body type. Accent: #1F8A96 (--heritage-teal) — primary CTA + serif headline color (heading H1/H2 are teal, not ink); #FDB913 (--heritage-flame) — flame accent (rules under eyebrows, italic emphasis on copper bands, anniversary stamp pip). Surfaces: #F8F2E8 (--heritage-cream) section bg, #DCF1F1 (--heritage-mint) pale section bg, #8E5224 (--heritage-copper) deep copper band + footer, #3A1E10 (--heritage-copper-deep) copper hero scrim + footer gradient bottom, #E8DFD4 (--heritage-line) hairline rules. Notes: No pure black, no pure white. Headline color is teal on light bands and white-with-flame-italic on copper bands. Italic emphasis is always a color shift (copper or flame), never a font swap. Mint is reserved for the IPO pip and one or two pale section accents — used sparingly.

4. Typography Rules

Headline font: Source Serif 4 — https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..700&display=swap — weights 300, 400 (italic). Body font: Source Sans 3 — https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;500;600;700&display=swap — weights 400, 500, 600. Pairing principle: Literary serif display (light + italic) over a workhorse humanist sans for body, eyebrows, nav, and metadata. Body is only sans; serif appears in headlines, mandate-card titles, stat values, person names on dark cards. Weight extremes: H1 at 88px / 400-italic-mix vs eyebrows at 12px / 600-uppercase. Display is light (400 regular, italic for emphasis); UI is medium-to-semibold. Size scale: H1 88px / 0.98 / -0.025em · H2 56px / 1.05 / -0.018em · H3 32–40px serif · Lead 19–21px sans · Body 16px / 1.55 · Eyebrow 12–13px / 0.16em uppercase · Mono cameo 11px (data tags only). Max font sizes per page: 5 distinct sizes — H1, H2, H3, body, eyebrow. Banned (do not use): Inter, Roboto, Open Sans, Lato, Space Grotesk, Manrope, Geist, Satoshi, system stacks. No display-decorative serifs (Playfair, DM Serif). Body is never set in serif.

5. Layout & Density

Grid: 12-col with a 1280px container; section padding 120px vertical, 56px horizontal. Strong horizontal banding (cream / paper / mint / copper) gives the page rhythm. Two-column splits are asymmetric (1.05fr 1fr or 0.95fr 1.1fr) — never a clean 50/50. Container max-width: 1280px. Section rhythm: Varied — paper hero → cream mandate (dense pillars + matrix card) → paper anniversary stats → copper case study (heavy, dark) → cream portfolio logo grid → copper team grid → muted outreach form → copper footer. Density alternates with breathing room. Min container padding: 24px (mobile), 56px (desktop). Asymmetry / overlap commitments: Pill nav floats white-on-copper inside the gradient header (rounded-pill shadow over a dark band). Mandate matrix card sits inside the cream band as a white-on-cream "card-in-band" — borrowed from print reference layouts. Stats grid uses a 1px hairline divider against --heritage-line to feel like a printed table, not boxed cards.

6. Atmosphere & Media

Hero treatment: Photographic. Deep copper-to-bronze gradient (#3A1E10 → #8E5224) at top behind utility nav + pill nav, transitioning into a full-bleed lab-bench photograph at 78% scrim (rgba(41,21,11,.78) → .42 → .65). Hero copy sits white over the photograph; flame-yellow rule precedes the eyebrow. Atmospheric layers: Subtle copper gradient in the hero header zone. Flame-yellow 2px rules under eyebrows. Pillar bars (left border, 2px copper-soft for default, flame-yellow for emphasis). Photographic case study image with a soft top-left scrim. No noise, no grain, no halftone. Shadow style: Subtle — 0 1px 2px rgba(63,42,31,0.04), 0 4px 12px rgba(63,42,31,0.06) for cards; 0 6px 20px rgba(0,0,0,.10) for the pill nav float over the copper band. Nothing cinematic. Media stance: editorial-photography (warm-tone lab/clinical/translational imagery — no stock smiling-team, no abstract glow renders). Stance reasoning: The brand is an 80-year pharmaceutical company's CVC arm — backing real molecules, real trials, real scientists. Photography earns credibility that decorative abstraction can't.

7. Do's and Don'ts

Do:

Lead headlines in Source Serif 4 light + italic, with italic words colored copper (light bands) or flame (copper bands).
Use the flame yellow as a pip — eyebrow rule, anniversary chip "10," IPO/M&A status tag — never as a fill.
Run a copper/bronze gradient header into a full-bleed photograph for the hero.
Pair eyebrows (sans, 12px, 0.16em uppercase) above every section H2.
Use rounded-pill shapes for primary buttons and the floating nav (9999px radius).
Treat italic as the only emphasis device — never bold serif, never underline.
Show data in column-based stat grids with a single accent cell (copper bg + flame italic numeral).

Don't:

Use Inter, Roboto, Open Sans, Lato, system stacks, or Space Grotesk.
Use purple gradients on white (or any AI-center gradient).
Use the three-up icon-card feature grid.
Use hamburger nav on mobile (the desktop pill nav is the brand expression — design a stacked equivalent, not a hamburger).
Write CTAs like "Get started," "Sign up," "Learn more" — use scoped CTAs in the brand's voice ("See our investment mandate," "Submit an opportunity," "Send to investment team").
Use mono for body, lists, or paragraph text — mono does not appear in this concept.
Render hero text on white. The hero is always copper-bronze with photography.
Use saturated mint as a primary surface; mint is a pale accent only.
Bold-weight a serif headline. Display weight stays at 400 (italic for emphasis).

8. Agent Prompt Guide

For any agent reading this file:

Read this DESIGN.md in full before writing any code, copy, or styling for 32-heritage-copper-taiho-toi.
Treat sections 1–7 as canonical truth. Don't override them inline.
Reject any change that violates the Don'ts in section 7. Surface the conflict to the user rather than silently picking one side.
The source design HTML lives at research/toi-may-2026/claude-design-handoff/tvl-based-on-onc-v3/project/concept-a-heritage.html — treat it as the visual ground truth for spacing, exact hex values, and component composition. When the prototype and DESIGN.md disagree, the prototype wins on visuals; DESIGN.md wins on principles.
If the user is asking for something this DESIGN.md doesn't cover, propose an addition to this file rather than introducing the decision in component code.
If the user is asking to change something in this file, route the request to columbus-design-md-builder rather than editing the file inline.
When sections conflict: section 7 (Don'ts) wins over everything; section 1 (Anchor) wins over sections 3–6; section 2 (Voice) is independent.

9. Notes & References

Created: 2026-05-08 Last updated: 2026-05-08 Source URL: Claude Design handoff bundle https://api.anthropic.com/v1/design/h/7P7oC5GO01Wv95Xjsf1LFw (tvl-based-on-onc-v3/project/concept-a-heritage.html). External references:

taihoventures.com (current, pre-rebrand)
Taiho Oncology brand language (copper / teal / serif lockup)

Additions log:

2026-05-08: Initial DESIGN.md captured by columbus-design-md-builder from Claude Design handoff bundle (Concept A — Heritage & Warmth).

Landing

Open detail →

desktop 1440×900

32-heritage-copper-taiho-toi/landing

mobile 390×706

9:41

32-heritage-copper-taiho-toi

Open →