the editorial family

Editorial

Magazine-grade longform — serif on stone, leading earned.

Editorial is the magazine-longform family. Its design language is that of a working editorial publication at the most literate end of contemporary digital publishing — a digital echo of The Atlantic, The New Yorker, Harper's, Granta, n+1, The Paris Review, and the best Substacks at their most magazine-like. The voice is urbane, typographically precise, and confidently restrained. It respects the reader's time with generous leading, real hierarchy, and the discipline to let the serif carry the tone.

Editorial is not "a family that uses serif type for headings." Many families do that. Editorial is specifically roman Instrument Serif displays, Inter body at reading weight on warm stone paper, JetBrains Mono meta at small caps, and accent used as a precious typographic ornament — drop caps, pull-quote rules, section markers, and nothing else. Hard corners, obsessive vertical rhythm, and the reading experience treated as the product.

Reach for Editorial when the deliverable is the reading itself: cultural criticism, longform journalism, literary publishing, essay platforms, and Substacks that commission rather than aggregate.

Default palette · Zinc · 6 recommended palettes below

Best for

Digital magazines and cultural criticism
Longform journalism platforms
Literary press and chapbook publishing
Author and columnist personal sites
Substack publications

Character

urbane
literate
leaded
restrained
magazine-grade

TypeInstrument Serif · Inter · JetBrains Mono

How it differs

Atelier shares the warm paper but goes italic-Fraunces and craft-saturated. Authority is institutional severity; Editorial is contemporary-magazine warmth.

Try a paletteLight mode →

Stone Gray Neutral Slate Indigo Zinc

01 - Typography

The voice of editorial.

Hero title - Playfair Display

Made with intention.

Hero subtitle - Playfair Display

A supporting lead carries the second voice without competing.

Section title - Playfair Display

Section heading at the second tier

Section subtitle - Playfair Display

Supporting copy holds context next to the title without competing for attention.

Card title - Playfair Display

Card title at the third tier

Body - Playfair Display

The body face carries paragraphs, captions, and inline labels - anywhere prose reads at length. It is tuned for legibility at small sizes and reads naturally next to the display face above.

Caption

Smaller supporting copy, used for metadata and inline notes.

Meta - JetBrains Mono

01 - 02 - 03 - v1.0 - 99.9% - $29 - 240ms

02 - Palette

Resolved palette.

The same family-aware mapping the product runtime applies. Each token has been resolved against the active palette and theme.

Backgroundcolor-mix(in srgb, rgb(161 161 170) 16%, #020617)

Surfacecolor-mix(in srgb, rgb(161 161 170) 8%, rgb(18 13 28))

Bordercolor-mix(in srgb, rgb(124 58 237) 18%, #0f172a)

Ink#fafafa

Brandrgb(113 113 122)

Brand · strongrgb(161 161 170)

Accentrgb(109 40 217)

On brandrgb(255 255 255)

03 · Primitives

The building blocks.

Each control below is the real component the runtime renders. The same buttons, badges, inputs, and chips appear in every generated site that picks this family.

Buttons

Badges

DefaultAccentOutlineInk

How content sits.

Five archetypes - feature, pricing, profile, stat, and testimonial. They use server-rendered family type and palette tokens so this section keeps first-paint SSR parity.

Feature

Generated families, real engineering

Every family ships as manifest data. The server render resolves the same typography, composition, and palette tokens the product uses.

ManifestTokens

Pricing

Recommended

Studio

$29/ month

Unlimited generations
Custom domains
Priority models

Profile

Mara ChenProduct design lead

Twelve years leading design at high-growth SaaS. Available for fractional engagements this quarter.

AvailableFractional

Stat

99.9%

Uptime across all rendered sites this quarterLast 90 days

Testimonial

"The shared semantic tokens made the new family feel consistent from the first pass."

Jules ParkStaff designer, Patagonia Digital

05 - Motion

How it moves.

Hover or focus either surface. The transition uses CSS variables and respects reduced motion without requiring a hydrated showcase.

Card - hover

Lift on hover, hairline tightens

Move your pointer over this card. The surface rises a few pixels and the border tightens to the brand color.

Button - focus

Tab into the button below. The focus ring uses the family's brand color and transitions at this family's curve.

06 · Recommended palettes

Try a different chord.

Each palette below pairs with this family. The cards link straight to a fresh render of this page in that palette — share the URL, it's crawlable.

06 · Compositions

A few of the section topologies.

Compositions are family-agnostic — every family can render every topology. Combined with card layouts and collection layouts, the engine produces dozens of section presentations per section type. Diagrams show the shape; the family supplies the skin.

banner

Banner

Content stacks above a wide image rail.

sidebar

Sidebar

Text column paired with a media column.

bands

Bands

Alternating horizontal bands of copy and media.

feature

Feature

Lead module anchors a supporting grid.

See all compositions →

07 · See it live

See a full page.

A complete site rendered in Editorial. Open the example to walk through every section in the family's voice.

Open example →Open demo