DESIGN.md — Codon Capital

Per-style brand authority for src/styles/warm-editorial-bio/. 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 (Anthropic / Resend / Substack lineage — humanist serif, generous prose, paper-toned surfaces) Secondary remix: Data-Dense Pro (ClickHouse / PostHog / Stripe lineage — numerals, charts, and tables as first-class content) Reference brands: Anthropic (humanist warmth, serif body, intellectual posture) × Resend (clean editorial layouts, restrained color) × ClickHouse (charts and tabular data treated as content, not decoration) Visual atmosphere: Reads like a serious quarterly letter from a fund that does its own diligence — paper-toned, type-led, footnoted. Charts are not garnish; they carry argument. Negative space is generous, but the page is never sparse — there is always a pull-quote, a table, or a marginal annotation anchoring the eye. The overall impression is closer to a scientific publication than a startup landing page.

2. Brand Voice

Adjectives: rigorous, humanist, plainspoken, patient, scientifically literate Says: "the molecule has to work", "we underwrite a decade", "we read the papers", "IND-stage conviction", "preclinical, not pre-revenue" Avoids: "transformative", "category-defining", "the future of medicine", "disrupting healthcare", "moving fast", "synergies", "AI-powered drug discovery" (used as a flex), "Empower your team", "Get started", "Learn more", "Sign up" Sample sentences:

We invest in seed-stage biotech where the science is real and the team has lived inside it. Ten years to FDA approval is a feature, not a bug — we underwrite that timeline before we sign.

3. Color Palette & Roles

Mode: light primary; selected data sections invert to a deep-ink ground for chart legibility Dominant: #F4EFE6 (--warm-editorial-bio-paper) — page background; the surface everything reads on Accent: #0B5757 (--warm-editorial-bio-clinical) — links, KPI numerals, chart strokes, pull-quote rules; sharp, used sparingly Surfaces:

#1F1A14 (--warm-editorial-bio-ink) — body type, hairline rules, and the inverted data-section ground
#E8E0D2 (--warm-editorial-bio-rule) — section borders and table dividers on paper
#0F0B07 (--warm-editorial-bio-data-ground) — full-bleed data sections, chart canvases when inverted

Notes: No gradients on hero. Color is set in flat blocks like a printed page. Clinical teal is the only accent — never paired with a second accent for "balance". Inverted data sections are an intentional rhythm break, not a theme variant.

4. Typography Rules

Headline font: Newsreader — https://fonts.google.com/specimen/Newsreader — weights 400, 500, 700, 800 (optical-size variable axis enabled; use display optical sizes for hero) Body font: Newsreader — same family, weights 400, 500 (text optical sizes for paragraph copy and pull-quotes) Numerals / data / captions / marginalia: IBM Plex Mono — https://fonts.google.com/specimen/IBM+Plex+Mono — weights 400, 600 Pairing principle: One serif family across hero and body via the optical-size axis (display vs. text), with monospace as the dedicated voice for data, footnotes, and editorial annotations. The visual contrast is serif vs. mono, not serif vs. sans. Weight extremes: Newsreader 800 (display only) vs. 400 (body). No 600 in body. IBM Plex Mono 400 for tabular numerals, 600 for KPI labels and section eyebrows. Size scale: H1 4.5rem, H2 2.25rem, H3 1.375rem, body 1.0625rem (17px), caption/mono 0.8125rem (13px) Max font sizes per page: 3 Banned (do not use): Inter, Roboto, Open Sans, Lato, Space Grotesk, Geist Sans, system stacks, any second serif family alongside Newsreader, any sans-serif body font

5. Layout & Density

Grid: 12-col editorial with a dedicated marginalia gutter — main column takes 8 cols, marginalia/footnotes hang in the remaining 3–4. Hero photography and full-bleed data sections break the grid intentionally. Container max-width: 1200px (text columns); hero photography and inverted data sections may go edge-to-edge Section rhythm: varied, dense-then-airy. Hero (full-bleed editorial photo with type overlay) → masthead/thesis (dense type with marginal footnotes) → portfolio table (data-dense, full-width) → pull-quote (airy, single line of Newsreader at display weight) → founder portraits gallery (full-bleed mixed-aspect) → footnoted prose with cited papers → masthead footer. The rhythm imitates a quarterly letter, not a marketing page. Min container padding: 24px (mobile), 64px (desktop) Asymmetry / overlap commitments: pull-quotes and citations hang into the right marginalia gutter; data tables can break to full-bleed; footnote numbers are mono superscript inline with serif body, footnote text lives in the gutter aligned to its reference.

6. Atmosphere & Media

Hero treatment: Full-bleed editorial photograph (founder portrait or scientific archival imagery) with restrained Newsreader-display typography overlaid in --warm-editorial-bio-paper cream. Alternate hero variant: paper-cream solid with a single display-weight serif sentence as the masthead — committed flat color, no gradient. No purple gradients, no abstract DNA renders, no lab-glass-with-blue-light stock. Atmospheric layers: Subtle paper grain at 6% opacity over cream surfaces; 1px hairline rules in --warm-editorial-bio-rule between sections; mono superscript footnote numbers inline with body prose; thin clinical-teal underlines on links (no decorative SVGs, no halftone, no gridlines). Shadow style: Minimal — only on photographic media, a single soft drop shadow (16px blur, 12% opacity) to lift photos off the paper surface. No shadows on cards, buttons, or data tables. Depth comes from typography weight, color, and rule lines. Media stance: mixed-media (editorial-photography + data-as-figure) Stance reasoning: The Warm Editorial half wants founder portraits and real-lab environments to anchor the humanist register; the Data-Dense half wants charts and tables treated as editorial figures with captions and footnotes. Both halves are content, not decoration — neither can be silently dropped. Photography must be real (not stock, not AI-generated): environmental founder portraits, archival science imagery (microscopy plates from journals, hand-drawn structures, patent diagrams), real lab and clinical settings. Data figures must carry argument: KPI tiles with mono numerals, sparklines inline in prose, deal-flow tables with cited footnotes, IND-stage timelines.

7. Do's and Don'ts

Do:

Treat charts, tables, and KPI tiles as first-class editorial figures with captions, footnotes, and citations — never as decoration
Use full-bleed editorial photography for hero and section breaks: real environmental founder portraits, real lab/clinical settings, archival scientific imagery (journal plates, hand-drawn molecular structures, patent diagrams)
Hang footnotes, citations, and marginal annotations in the right gutter, mono superscript numerals inline in body prose
Use the optical-size axis of Newsreader to differentiate display from text — display optical sizes for hero, text optical sizes for body
Use IBM Plex Mono for every numeral that appears outside running prose (KPI tiles, table cells, dates, fund sizes, percentages)
Write copy in the voice of a quarterly letter — patient, footnoted, scientifically literate; first-person plural; concrete about timelines and biology

Don't:

Use Inter, Roboto, Open Sans, Lato, Space Grotesk, Geist, or any system sans-serif anywhere
Use stock biotech imagery: DNA helixes, gloved hands holding pipettes, blue-glow lab shots, AI-generated abstract science visuals, microscope-on-slide stock, cell-culture-render stock
Use gradients of any kind on hero, cards, buttons, or backgrounds — color is set in flat blocks
Use the three-up icon-card feature grid (the AI-default "what we do" treatment) — replace with footnoted prose or a portfolio table
Use hamburger nav on mobile — use a serif "Index" or "Contents" link revealing a typographic table of contents
Write CTAs like "Get started", "Learn more", "Sign up", or "Schedule a demo" — use first-person editorial CTAs in the voice ("Read the Q3 letter", "See the portfolio", "Email us a thesis")
Write copy that uses "transformative", "category-defining", "the future of medicine", "disrupting healthcare", "moving fast", "synergies", "AI-powered drug discovery", or any other phrase that signals startup-marketing register
Pair clinical teal with a second accent color for "balance" — the single-accent commitment is the brand

8. Agent Prompt Guide

For any agent reading this file:

Read this DESIGN.md in full before writing any code, copy, or styling for warm-editorial-bio.
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 most common silent violations: reaching for stock biotech imagery when no real photography is available (use type-led layout instead, never stock); reaching for a sans-serif body font for "readability" (Newsreader text optical size is the body); reaching for a second accent color when the page feels mono-toned (the mono-tone is the brand).
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-04-29 Last updated: 2026-04-29 Source URL: n/a (greenfield brand) External references:

Newsreader specimen: https://fonts.google.com/specimen/Newsreader
IBM Plex Mono specimen: https://fonts.google.com/specimen/IBM+Plex+Mono
Anthropic (warm-editorial reference): https://www.anthropic.com
Resend (clean editorial layouts reference): https://resend.com
ClickHouse (data-as-content reference): https://clickhouse.com

Additions log:

2026-04-29: Initial DESIGN.md captured by columbus-design-md-builder.

Landing

Open detail →

desktop 1440×900

05-warm-editorial-bio/landing

mobile 390×706

9:41

05-warm-editorial-bio

Open →