hero.editorial-dropcap · Editorial drop cap

A hero pattern from the hero library, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 1. Give the section root data-pattern="hero.editorial-dropcap". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule

A narrow measure (columns 2–10) carries eyebrow, a headline, byline and rule; the opening paragraph runs 2–10 and starts with a four-line drop cap; a marginal note sits in 11–12.

Slots

eyebrow, headline, meta, lead, cta, caption

Grid areas

measure 2-10 · text 2-10 · margin 11-12 (12-column grid, 1-based inclusive spans)

Notes

The opening paragraph's drop cap is four lines tall (dropCap: 4 = ::first-letter with initial-letter: 4, float fallback), three at phone width. Column 1 stays empty as the left margin.

Tokens

bg #FDF9F4 · text #241E16 · heading #150E06 · accent #7C1C1D · accent2 #B2635D · Libre Caslon Text / Libre Caslon Text · radius 0px · space unit 6px (full list in design/tokens.json)

Do

Keep everything on a 2–10 measure; column 1 is an empty margin and 11–12 hold marginalia.
Set the headline at step 6, regular weight; use italic only if the heading font ships one (never a synthesised slant).
Open the lead paragraph with a four-line drop cap (initial-letter or ::first-letter float).
Put one short marginal note in 11–12, muted (italic if the body font ships one), top-aligned with the lead.

Don't

Don't use a drop cap on more than one paragraph.
Don't add images or buttons with fills; the CTA is an underlined link.
Don't justify the lead without hyphenation (rivers); flush left is the default.

Phone width

Use the full width; drop cap shrinks to three lines; the marginal note moves under the lead.

Brand & product studio

We make complicated companies simple to choose

Booking projects from June 2026

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project

Corvid Robotics — identity