DESIGN.md — Taiho Ventures (Editorial Index)

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

1. Aesthetic Anchor

Primary family: Editorial Minimalism — biotech VC reading like an investment journal, with section-numbered chapters (§01, §02, §03), a masthead ribbon, and a portfolio table that owns the page. Secondary remix: Data-Dense Pro / Terminal-Core — JetBrains Mono is load-bearing for ribbons, eyebrows, table headers, and chips. Mono is the default for utility text, not a cameo. Reference brands: MPM BioImpact (clinical precision) × GV (data-forward life-science VC) × 5AM Ventures (institutional gravitas) × The Browser Company "Volume" / Bloomberg Pursuits style ribbons (issue-as-volume metaphor). Visual atmosphere: A printed quarterly. Cream paper with hairline rules and inset boxes; ink-black bands with a single flame accent for high-contrast spreads; serif display at extreme sizes (138px hero, 160px footer wordmark) sitting next to dense mono metadata. Section numbering (§00 → §07) gives the page a journal-spine logic. Tables are a feature, not a fallback. The page reads like a "View Source" of an investment thesis.

2. Brand Voice

Adjectives: literary, precise, reportorial, dry-witted, decade-aware. Voice anchor: Orwell — the craftsman voice. Plain English in service of clear thinking; no startup register; numbers and verbs do the work. Italics are reserved for proper nouns and emphatic clauses, not for decoration. Voice sample:

"Taiho Ventures is the corporate venture arm of Taiho Pharmaceutical — an evergreen fund built to support breakthrough therapeutics on the science's timeline, with the credibility, infrastructure, and global reach of an 80-year pharmaceutical partner on the cap table."

Says:

"Patient capital, partner science."
"A focused thesis — so the right founders self-qualify."
"We respond — even when the answer is no."

Avoids: "ecosystem," "world-class," "unlock," "next-gen," "premier," "transform," any verb that sounds like a deck. No exclamation points. Headlines stay terse — five to nine words is the upper bound. Sample sentences:

A first-in-class EGFR exon-20 program for non-small cell lung cancer, co-created from Taiho pipeline science in 2019, syndicated alongside leading institutional investors, and re-acquired by Taiho Pharmaceutical in 2023 to advance development at global scale.

Backed early. Held long.

3. Color Palette & Roles

Mode: both — paper-cream is the dominant surface; ink-black bands punctuate at §02 (Track Record) and the footer. Dominant: #FAF6EC (--press-paper) — warm cream page surface; #16181F (--press-ink) — body type on cream + dominant surface on ink bands. Accent: #FDB913 (--press-flame) — single-accent flame for italic emphasis, anniversary marks, active-nav underline, pill tag on case study, IPO/active-stage indicators. The flame is the only warm punch. Surfaces: #F4EEE1 (--press-cream) deeper cream for inset bands + side panels; #EBE3D2 (--press-cream-2) table header tint; #DAD0BC (--press-rule) hairline rule on cream; #E7DFCC (--press-rule-soft) softer hairline; #2A2D38 (--press-line) hairline rule on ink; #8E5224 (--press-copper) italic emphasis on cream (proper nouns); #1F8A96 (--press-teal) Phase-3 stage pip + IPO outcome tag; #C8102E (--press-red) M&A outcome tag. Notes: Flat color only — no gradients, no glows, no shadows on inset elements. Hairline rules (1px on --press-rule) are doing the heavy lifting visually. Italics are colored: copper on cream, flame on ink. Headlines on cream are ink, headlines on ink are cream — never washed.

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 — weight 300 (light + italic), 400 fallback for body-serif moments. 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. Mono font: JetBrains Mono — https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap — weights 400, 500. Mono is structural, not decorative. Used for: ribbon, eyebrows, section numbers (§ Section 01), table column headers, table stage/outcome cells, filter chips, sort selectors, footer metadata, anniversary strip, button labels, every uppercase tag. Pairing principle: Light serif display + workhorse sans body + load-bearing mono utility. Three families, each with a clear semantic role. Mono is never used for paragraphs; serif is never used for buttons or eyebrows. Weight extremes: Display at 300 weight, 138px hero, 160px footer wordmark. Body at 400. Mono utility at 11px / 0.08em–0.18em tracking. Bold-weight is reserved for mono's b element to mark a value-vs-label flip in inline data lines. Size scale: Hero H1 138px / 0.92 / -0.035em · Section H2 64px / 1.02 / -0.022em · Case-study H3 54px / 1.04 · Card title H4 24–30px · Lead 19–21px serif italic · Body 14–15px sans · Metadata mono 10–11px · Footer wordmark 160px (display feature, not a heading). Section numerals (§ Section 01): 36px italic serif as a label, paired with 11px mono "Section" prefix. Max font sizes per page: 7 — hero, section H2, H3, H4, body, mono utility, footer wordmark. The wordmark counts because it's deliberately blown out as a visual moment. Banned (do not use): Inter, Roboto, Open Sans, Lato, Space Grotesk, Manrope, Geist, Satoshi, system stacks. No transitional / decorative serifs (Playfair, DM Serif). No alternate monos (Fira Code, IBM Plex Mono, Space Mono) — JetBrains Mono only.

5. Layout & Density

Grid: 12-col with a 1280px container; section padding 120px vertical, 40px horizontal. Sticky nav (paper-cream, 1px ink-rule bottom). Section heads are a 3-col grid: numbered label / H2 / right-aligned mono metadata block. Tables and bordered grids extend full container width. Container max-width: 1280px. Section rhythm: Cream → cream-deep → INK (Track Record numbers, full bleed) → cream → cream-deep → INK (footer) — heavy bands punctuate, they don't dominate. Every section opens with the §-number / H2 / metadata three-column head. Min container padding: 24px (mobile), 40px (desktop). Asymmetry / overlap commitments: Hero H1 collides asymmetrically with an aside — 1.2fr 1fr grid, headline left at 138px, "Letter from the Investment Team" intro right at 21px serif. The hero accent (Patient capital, partner *science*) has a flame-yellow underline drawn beneath the word "science" via a ::after pseudo at bottom: .16em. The Anniversary Strip is a single ink band injected mid-hero (grid-template-columns: auto 1fr auto). Mandate is a 4-column hairline-bordered table where the first cell uses a --press-cream fill to mark the lead column. Numbers band on ink uses 120px serif italic figures with mono labels — a magazine-style data spread.

6. Atmosphere & Media

Hero treatment: Solid cream paper. The hero is type-only — no photography, no illustration. Composition is anchored by the 138px serif H1 with a flame underline behind one word. Bordered hero-meta strip (Issue / Origin / AUM / Mandate) sits above the hero as a print-style metadata band. Atmospheric layers: Hairline 1px rules on --press-rule (cream) and --press-line (ink) doing 80% of the structural work. Single flame yellow accents per band. Mono-set §-numbers and Volume / Issue labels carry the "this is a periodical" cue. Photography appears only in the case-study spread and the Dispatch news cards, treated with a 4:5 aspect-ratio frame and a subtle ink-gradient scrim — never full-bleed. Shadow style: None. Borders carry weight; nothing floats. The only depth cue is the flame-underline ::after behind the hero accent word. Media stance: type-only — with editorial-photography reserved for case-study + dispatch only. Stance reasoning: The "investment journal" metaphor depends on the page reading as a printed object. Decorative imagery would break the spine. Photography is allowed but is treated as plates inside the spread, not background atmosphere.

7. Do's and Don'ts

Do:

Number every section with § Section 01 … § Section 07 in mono + serif-italic numeral.
Open every section with the 3-column head: numbered label / H2 / right-aligned mono metadata.
Use JetBrains Mono for ribbons, eyebrows, chips, tags, table headers, and stage/outcome pips. Mono is structural.
Set the hero in 138px serif light with a flame-yellow underline behind one accent word (::after at -1 z-index, 0.18em tall, 0.6 opacity).
Use a bordered Volume / Issue / Origin / AUM / Mandate strip above the hero.
Treat the portfolio as a real <table> — column headers in mono, stage pips with colored dots, outcome cells as bordered mono badges (IPO teal, M&A red, Co-Lead copper).
Set the footer wordmark at 160px serif italic with the flame on the italic word.
Use italic serif for proper nouns (companies, people, places) and emphatic clauses — colored copper on cream, flame on ink.
Use the anniversary strip as a single ink band (auto 1fr auto) injected into the hero with a 64px italic-serif "10."

Don't:

Use Inter, Roboto, Open Sans, Lato, system stacks, or Space Grotesk.
Use any monospace other than JetBrains Mono.
Use gradients, glows, or shadows. Borders only.
Use purple, gemstone, or AI-center color tokens. The accent is flame yellow; the warm pop is copper italic; the blue is deep teal — that's it.
Use the three-up icon-card feature grid.
Use hamburger nav on mobile — design a stacked nav that preserves the masthead-and-section feel.
Write CTAs like "Get started," "Sign up," "Learn more" — use scoped, journal-toned CTAs ("Read the mandate," "Submit a deck," "Send to investment team").
Render mono for paragraphs or long-form copy.
Pad the page with photography. Hero is type. Background is type. Photography is plates inside named spreads only.
Bold-weight a serif headline. Display weight is 300; emphasis is italic + color.

8. Agent Prompt Guide

For any agent reading this file:

Read this DESIGN.md in full before writing any code, copy, or styling for 33-editorial-press-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-b-editorial.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-b-editorial.html). External references:

taihoventures.com (current, pre-rebrand)
MPM BioImpact / GV / 5AM Ventures aesthetic vocabulary
Bloomberg Pursuits / The Browser Company "Volume" issue framing

Additions log:

2026-05-08: Initial DESIGN.md captured by columbus-design-md-builder from Claude Design handoff bundle (Concept B — Editorial Index).

Landing

Open detail →

desktop 1440×900

33-editorial-press-taiho-toi/landing

mobile 390×706

9:41

33-editorial-press-taiho-toi

Open →