Starlight_Lancher/.agents/skills/oiloil-ui-ux-guide/references/style-families/editorial.md

Style Family: editorial

Signature: Long-form respect, serif headers, generous measure, hierarchy through scale. Reference products: Medium, Substack, NYT, The Verge, Stratechery. Best for: blogs, content platforms, documentation that's read end-to-end, knowledge bases, news.

Token defaults

Color

• Primary: deep ink, restrained accent (often a deep red, navy, or forest green).
• Background: warm off-white or cream, not pure white. Common range #fafaf7 to #f5f1ea.
• Text: high-contrast near-black with slight warm cast.
• Avoid in this family: bright saturated brand colors competing with text; cool tech blue.

Typography

• Heading: serif — Source Serif, Lora, Tiempos, GT Sectra, Newsreader, Playfair (display only).
• Body: serif preferred for body too (the whole point) — Source Serif, Lora, Spectral, IBM Plex Serif. Sans-serif body is acceptable but loses the family's voice.
• Mono: only if code samples appear.
• Measure: 60–75 characters per line for body. This is a hard rule in this family.

Radius

• Minimal. 0 / 2 / 4 px. Curves dilute the editorial feel.

Spacing

• 4px base, but the visible spacing is generous: 24 / 32 / 48 / 64.
• Density: spacious. Compact does not belong here.

Shadow

• Flat. Borders if needed. No elevation.

Motion

• Minimal. Fade only. Scrolling does the work.

Anti-patterns within this family

• Sans-serif headings that scream "SaaS landing page".
• Cards everywhere. The body of an article is not a card.
• Saturated CTA buttons in the middle of body copy. Use inline text links; reserve buttons for end-of-article actions.
• Sidebars full of widgets. Editorial respects the reader's attention.
• Auto-playing video / hero animations.
• Narrow body measure (under 50 chars) or absurdly wide (over 90 chars).

Typical surfaces

This family does well on:

• Article pages
• Author archives
• Documentation
• About / values pages

This family does poorly on:

• Dashboards (no place for serif body in dense data)
• Forms (serifs at small input sizes look off)
• Mobile-first apps (the family relies on desktop measure)

Notes

Editorial done well almost feels like nothing — the design recedes and lets the writing carry. If you find yourself adding decoration, you've left the family.