DESIGN.md — Taiho Ventures (Sumi · Ocean)

Per-style brand authority for src/styles/40-sumi-ocean-cvc/. Produced and maintained by columbus-design-md-builder. Read by columbus-design-author at scaffold time and by columbus-design-iterator on every refinement. Treat sections 1–7 as canonical truth.

1. Aesthetic Anchor

Primary family: Warm Editorial → cooled to a clinical white — Japanese-heritage editorial (Mincho display) set on a near-white ground, not warm washi. Secondary remix: Sumi brushwork — the ink-bleed gesture survives as a torn photo edge and the duotone, but the paper grain and sepia warmth are stripped out. Reference brands: Taiho Pharmaceutical (the parent's heritage + flame mark) × Flagship Pioneering / a16z bio (institutional biotech-VC restraint) × MUJI (cool, quiet, type-led calm). Visual atmosphere: Quiet, cool, and precise — a research-grade ground. The page reads like an annual report cropped to a single editorial spread: a left-anchored Mincho headline beside a cool-teal duotone photograph torn at the edge, then long generous sections of light-weight prose. The one warm note is gone; teal (Ocean) is the only saturated voice, and it speaks rarely. This is the committed Taiho Ventures direction — the resolved "Home v2" — distinct from the warmer sumi-brushwork explorations by its whiter ground, Ocean accent, and a Hanken Grotesk body in place of a serif body.

2. Brand Voice

Copy is locked / verbatim from the client copy deck — this style applies design to fixed copy, it does not author new copy. The fields below describe the deck's register so future component-level microcopy stays in key.

Adjectives: institutional, precise, understated, mission-led, unhurried. Voice anchor: Orwell — the plain craftsman voice. Concrete nouns, no salesmanship, claims backed by named outcomes (Arcus, Merck, J&J). Voice sample:

"Our mission is to create significant value by investing in the global biotech venture community and to bring innovative science to Taiho Pharmaceutical Co., Ltd."

Says: "Patient, long-term capital." · "A strategic partner, not just a check." · "We back companies whose science is strategically relevant to Taiho." Avoids: "ecosystem", "premier", "world-class", "disruptive", growth-stage hype, exclamation, response-time promises the firm can't keep. Sample sentences:

"Since 2016 we have invested in more than 30 early-stage private companies strategically relevant to Taiho Pharmaceutical." "Our portfolio has produced public listings and acquisitions by Johnson & Johnson, Eli Lilly, Sanofi, and Merck."

3. Color Palette & Roles

Mode: Light (the contact band + footer are the one sanctioned dark surface — a single continuous ink block). Dominant: #FCFEFE (--so-paper) — page ground, a whiter-than-white; also the light type laid on the dark ink band. Accent: #08817C (--so-accent, "Ocean") — primary buttons, links, hanging numbers, acquirer tags. Sharp punctuation, never a surface wash beyond the Sky tints. Surfaces: #EAF7F4 (--so-paper-deep, Sky tint — alt section) · #DDF2EE (--so-wash, Sky — the one featured wash) · #D7E1E0 (--so-rule, cool hairline) Ink: #15201E (--so-ink, cool near-black — body + dark sections) · #3C4B4B (--so-ink-soft, secondary body) · #5C6B6A (--so-sepia, cool grey marginalia) · #9CADAC (--so-sepia-soft, labels on dark) Rare accents: #E41B14 (--so-focus, "Focus" red) — eyebrows only, on light; becomes Sky #8FD4CE on the dark band. #FEC400 (--so-ochre, "Energy") — footer column headings, the single yellow. Notes: No gradients. No drop shadows. Depth comes from flat Sky tints and hairline rules. Color lands on type and the duotone, not on decorative fills.

4. Typography Rules

Headline font: Shippori Mincho B1 — https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;700 — weights 400 (subheads / light statements), 700 (display headlines). Body font: Hanken Grotesk — https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500 — weights 300 (long-form body, ledes), 400 (UI), 500 (eyebrows / buttons). Pairing principle: High-contrast — a humanist Mincho serif for display against a clean grotesk for body. Serif carries voice; sans carries information. Weight extremes: Display is 700 Mincho; body leans light (300). Avoid the 500/600 SaaS-bold middle in body copy — eyebrows and buttons are the only 500s. Size scale: H1 3.4rem · H2 2.5rem · lead-statement 1.75rem (light Mincho) · H3 1.4rem · body 1.0625rem · eyebrow 0.75rem. Max font sizes per page: 3 families of size (display / statement / body) — hold the line. Banned (do not use): Inter, Roboto, Open Sans, Lato, system stacks, Space Grotesk. No Japanese glyphs as decorative texture — Latin-glyph Mincho only (the brushstroke carries the heritage, not kanji).

5. Layout & Density

Grid: Asymmetric editorial. Hero ~60/40 (Mincho headline / duotone photo). Body sections use a 12-col shell with content ranged into 3/8 splits (eyebrow gutter + prose) and 2×2 hairline grids. Container max-width: 1280px. Section rhythm: Generous and even — 92px vertical section padding, airy. One featured wash section (Outcomes) breaks the white. Dark contact band + footer close as a single ink block. Min container padding: 24px (mobile), 80px (desktop). Asymmetry / overlap commitments: Eyebrows hang in a left gutter; "Why partner" is a 4-item 2×2 with hanging Ocean numbers and hairline rules; the hero photo carries a torn ink-bleed mask so its right edge is irregular, never a clean rectangle.

6. Atmosphere & Media

Hero treatment: Committed solid near-white (--so-paper) — clean, no gradient, no grain. Atmosphere is the duotone photo + type, nothing else. Atmospheric layers: n/a — the warm paper grain of the sumi-brushwork line is deliberately removed here. The only texture is the SVG turbulence mask tearing the hero photo's edge. Shadow style: None — flat pigment and hairlines only. Media stance: editorial-photography — one cool-teal duotone hero photograph (Sand Hill Road / the Menlo Park office / a lab), shadows → dark Ocean, highlights → Sky, with a torn ink-bleed edge. Swappable by the user. Stance reasoning: A single duotone still grounds an otherwise type-led page and ties the cool palette to a real place; the duotone keeps any dropped-in photo on-brand automatically.

7. Do's and Don'ts

Do:

Keep the ground a cool near-white; let Ocean teal be the only saturated voice, used sparingly.
Set display in Shippori Mincho (700 for headlines, 400 for light statements); set body in Hanken Grotesk light (300).
Tear the hero photo's edge with the turbulence mask and run it through the teal duotone filter.
Use eyebrows in Focus red on light, Sky on the dark band; hang Ocean numbers on the "Why partner" grid.
Close the page as one continuous dark ink block: contact band → DS "Footer · A".
Keep all deck copy verbatim; let outcomes name their acquirers (Merck, J&J, Eli Lilly, Sanofi) in Ocean.

Don't:

Use Inter, Roboto, Open Sans, Lato, system stacks, or Space Grotesk.
Reintroduce warm washi cream, sepia warmth, or the paper-grain overlay — this direction is deliberately cooled.
Use gradients, drop shadows, or color as a decorative surface fill (Sky tints excepted).
Use Japanese glyphs as decoration; the brushstroke/duotone carries the heritage.
Render the hero photo as a clean rectangle — the torn edge is the brand tell.
Write CTAs like "Get started" / "Sign up" / "Learn more" generically — keep the deck's own labels ("Investment Focus", "Get in Touch").

8. Agent Prompt Guide

For any agent reading this file:

Read this DESIGN.md in full before writing any code, copy, or styling for 40-sumi-ocean-cvc.
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.
Copy is locked/verbatim from the deck — do not rewrite headlines or body copy; only structure/style it.
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-06-02 Last updated: 2026-06-02 Source URL: Claude Design handoff bundle tvl-legacy-revamp-v1 (Home v2.html — the committed brand direction); parent: http://www.taiho.co.jp/en/ External references:

Bundle Home v2.html #tv-brand-theme block — the canonical token overrides (whiter ground + Ocean/Sky/Focus/Energy, Hanken + Mincho as separate tokens).
Brand assets: public/brand/taiho-logomark.svg, taiho-flame.svg, taiho-single-wordmark.svg.

Additions log:

2026-06-02: Initial DESIGN.md captured by columbus-design-md-builder from the tvl-legacy-revamp-v1 Claude Design bundle (committed "Home v2" direction).

Home

Open detail →

desktop 1440×900

40-sumi-ocean-cvc/home

mobile 390×706

9:41

40-sumi-ocean-cvc

Open →