Canvas

Brand brief — Clay & Ocean Taiho TOIDESIGN.md▸

DESIGN.md — Taiho Oncology (TOI) corporate refresh

Per-style brand authority for src/styles/27-clay-ocean-taiho-toi/. Captured from the April 2026 Taiho-TOI corporate-website brand refresh — a fully codified deck + comp pair, not an invented brand. 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 × Healthcare-Corporate — saturated clay-brown frame bands and pale teal card middles, with serif-display + humanist-sans typography and candid editorial photography of people and labs. Secondary remix: Soft Healthcare / Soft Futurism — the rounded-corner Sky-teal card system and the rounded-pill Ocean CTAs come from the modern healthcare-app idiom (think Apple Health, Calm, Headspace pharma-adjacents) grafted onto a more grounded editorial base. Reference brands: Eli Lilly's 2024 corporate refresh (warm brand-color confidence × pharma) × Daiichi Sankyo / Astellas (Japanese pharma restraint and modesty) × NEJM and academic-medical-center editorial (clinical credibility through serif headlines). Visual atmosphere: The page reads like the lobby of a research hospital that just got rebranded by Pentagram — warm, plainspoken, photography-forward, but quietly clinical underneath. Saturated clay-brown bands frame each section like chapter heads in a printed annual report; between them the page breathes in cream and pale teal. Photography is candid and unstaged: real people, real labs, natural light, real faces.

2. Brand Voice

Lifted from the Taiho-TOI deck and the comp's headlines — captured rather than interviewed via anti-slop-copy because the source material already commits to a clear tone. If a future iteration wants more depth, run anti-slop-copy against this section and update.

Adjectives: warm, plainspoken, human-first, quietly credible, unjargoned Voice anchor: Handley-flavored — warm, customer/patient-first, accessible — with an undertone of clinical credibility that tempers the warmth. Sentences are short and declarative; the brand sounds like a senior clinician who chose not to talk over the room. Voice sample:

Patients are our first priority. We innovate together. A purpose-driven scientific organization committed to delivering treatments that make a real difference in people's lives — heard from the people we serve, not from the boardroom.

Says:

"Patients are our first priority"
"We innovate together"
"A culture where people come first"
"Dedication to scientific collaboration"
"The next generation of agents"

Avoids:

"premier oncology company" (the brief's framing, not the brand's voice — the deck explicitly avoids self-superlatives)
"transformative" / "transforming" (too marketing — the brand prefers "advancing" and "delivering")
"ecosystem" (when "the people we work with" is what's meant)
"best-in-class" (clinical credibility is shown, not claimed)
"unleash" / "empower" (SaaS register; this is a pharma)

Sample sentences:

The team behind the vision. Twelve clinicians, scientists, and operators who have spent careers translating science into therapies for people living with cancer. They report to one another before they report to the market.

Our development pipeline spans three phases and four indications, with new agents entering Phase 1 in 2026. We publish trial data on schedule, even when it is inconvenient.

3. Color Palette & Roles

Mode: light (with saturated clay frames as accent moments — light content, warm punctuation)

Dominant: #FAF9F7 (--clay-ocean-paper) — page body bg between bands; the resting surface Frame color: #8A532C (--clay-ocean-clay) — saturated header band, footer, section intro frames; white type sits on this Accent: #0E7F77 (--clay-ocean-ocean) — CTAs (rounded pills), section eyebrow headlines, the vertical hairline rule on intro paragraphs, link color

Surfaces:

#DDF1EE (--clay-ocean-sky) — pale teal "card-section" background; alternates with paper between content sections
#E8D6C8 (--clay-ocean-pebble) — warm cream secondary surface; sub-cards inside Sky sections, soft callouts
#3E2818 (--clay-ocean-earth) — body text on light surfaces, dark borders, deep accent

Energy & Focus (sparingly):

#F4C82E (--clay-ocean-energy) — moments of energy only (a single highlighted figure, a small chip, an arrow); never a section background
#D8302F (--clay-ocean-focus) — moments of focus only (an alert, a clinical-trial-status flag, an urgent CTA); never a section background

Notes: No gradients. Color is set in flat blocks, like a printed annual report. The rhythm is clay frame → paper → sky card section → paper → clay frame. Energy and Focus are accents, never primary surfaces — when in doubt, leave them off the page entirely.

4. Typography Rules

Headline font: Lora — https://fonts.google.com/specimen/Lora — weights 400, 500, 600 Body font: IBM Plex Sans — https://fonts.google.com/specimen/IBM+Plex+Sans — weights 400, 500, 600 Pairing principle: High-contrast — serif display (Lora's soft curves and open forms) against humanist geometric sans (Plex's clean structure). The deck rationale: Lora carries clinical credibility plus human warmth; Plex carries neutrality and scanability. Weight extremes: Lora 500 for display headlines; Plex 400 for body; Plex 500 for eyebrow labels and small caps. No 600/700 except on the rare button label. Size scale: H1 3rem (display), H2 2rem (section title), H3 1.25rem (card title), body 1rem (16px), caption 0.875rem (14px), eyebrow 0.75rem uppercase tracked Max font sizes per page: 3 Banned (do not use): Inter, Roboto, Open Sans, Lato, system stacks, Space Grotesk, Montserrat, Poppins. Also: do not substitute Lora with another serif (Merriweather, Playfair, EB Garamond) — the deck commits specifically to Lora's soft-curve approachability.

5. Layout & Density

Grid: Full-bleed header/footer/intro bands wrap a contained 12-column content area. Within content sections: two-up photo cards (the dominant card pattern), three-up sub-cards inside Sky sections, single-column long-form for mission/about pages. Container max-width: 1280px (content area between full-bleed bands) Section rhythm: Alternating — saturated clay band → cream paper with intro paragraph (Ocean vertical rule on left) → Sky card section (two-up or three-up cards) → cream paper → clay footer band. Density is medium throughout; the bands provide the visual rhythm rather than density shifts. Min container padding: 24px (mobile), 64px (desktop) Asymmetry / overlap commitments:

Navbar: pill-shaped white tab nav floating on the clay band, slightly inset from the band edge
Intro paragraphs: vertical Ocean-teal hairline rule on the left, pulling the eye into the body copy (visible on mock pages 4, 6 and 7)
Card photo captions: stacked at the bottom of the photo with a faint clay-tint gradient overlay so type stays readable
Hero: photography sits behind the headline, not beside it — full-bleed image with type-overlay in white Lora

6. Atmosphere & Media

Hero treatment: Saturated --clay band with full-bleed photography behind, Lora serif headline overlay in white. The photography is desaturated/warmed slightly so it harmonizes with Clay rather than fighting it. Atmospheric layers: Subtle warmth from the Paper/Pebble surfaces — no noise, grain, or halftone. The "atmosphere" comes from the saturated bands themselves and the photography, not from texture overlays. Card corners are rounded (~12–16px radius). Photo cards have a faint clay-tinted gradient at the bottom edge for caption legibility. Shadow style: Subtle. Cards may have a very light drop shadow (0 2px 8px rgba(62,40,24,0.08)) but most depth comes from background-color contrast (Sky card on Paper) rather than elevation. Media stance: editorial-photography Stance reasoning: The brand's core thesis is "Heartfelt Connection" — the deck explicitly says "use new, authentic photography of our people and labs to guide users toward meaningful action." Photography isn't decoration here; it's the load-bearing emotional content. Stock or staged imagery breaks the brand. Pages with no photography (like pipeline tables) lean entirely on the typographic rhythm + the band frames; they don't reach for icons or illustrated abstracts as a substitute.

7. Do's and Don'ts

Do:

Use saturated --clay bands for headers, footers, and major section intros — white Lora on clay is the brand's signature move
Pair Lora display headlines with IBM Plex Sans body, three font sizes max per page
Lead every section with candid photography of real people (patients, families, scientists, lab work) — natural light, unstaged, real faces
Use --ocean for all CTAs as rounded pill buttons with white text and a forward chevron
Treat --sky as the bright card-section background and --pebble as the warm sub-card surface inside it
Place a vertical --ocean hairline rule on the left of intro paragraphs (it's the brand's most repeated micro-detail — visible on mock pages 4, 6, and 7)
When the page is photo-light (a pipeline table, a leadership grid), let the band rhythm and Lora headlines carry the brand — don't reach for icons

Don't:

Use Inter, Roboto, Open Sans, Lato, system stacks, Space Grotesk, Montserrat, or Poppins
Substitute Lora with another serif — the deck commits specifically to Lora's curve and warmth
Use purple gradients, soft fades, glass-morphism, or any gradient hero — color is set in flat blocks
Use the three-up icon-card feature grid (the slop default) — Taiho's cards are photo cards or type cards, never icon cards
Use stock photography or staged corporate imagery — the brand reads as fake immediately; use real people/labs only
Use --energy (yellow) or --focus (red) as section backgrounds — they are accent-only and appear on the page as moments, not surfaces
Write CTAs like "Learn more" / "Get started" / "Sign up" — phrase in voice ("Explore our pipeline →", "Read the trial data →", "Meet the team →")
Use hamburger nav on mobile — scale the pill tab nav down or use a labeled drawer; the hamburger breaks the deliberate visual signature of the desktop nav
Mix Energy and Focus on the same page — pick at most one accent moment per view

8. Agent Prompt Guide

For any agent reading this file:

Read this DESIGN.md in full before writing any code, copy, or styling for 27-clay-ocean-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.
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.
Source-fidelity note: This brand was extracted from a real codified deck + comp. When in doubt, the source PDFs (in research/toi-may-2026/) are the tiebreaker over inferred specs — but only on visual decisions; copy and content are this style's own (the deck's lorem-ipsum body copy is not the voice).

9. Notes & References

Created: 2026-05-08 Last updated: 2026-05-08 Source URL: n/a — extracted from internal brand-refresh PDFs External references:

Source brand deck: research/toi-may-2026/Taiho-TOI-branding-may-2026-compressed.pdf (8 pages — palette on p.5, type rationale on p.6 and p.7)
Source website mock: research/toi-may-2026/Taiho-TOI-website-mock-may-2026-compressed.pdf (8 pages — homepage, scientific-organization, patients, leadership, collaboration, pipeline, culture)
Lora specimen: https://fonts.google.com/specimen/Lora
IBM Plex Sans specimen: https://fonts.google.com/specimen/IBM+Plex+Sans

Additions log:

2026-05-08: Initial DESIGN.md captured from Taiho-TOI April 2026 brand refresh deck + website mock by columbus-design-md-builder. Mock-faithful warm-pharma read picked from a three-option menu (vs. cinematic patient-led and clinical journal data-dense).

Landing

Open detail →

desktop 1440×900

27-clay-ocean-taiho-toi/landing

mobile 390×706

9:41

27-clay-ocean-taiho-toi

Open →