Content & blog UI design
Typography is the design. Reading is the product; color is a distraction.
- Typeface ·
- High-contrast serif display + humanist sans/serif body
- Hero ·
- 40–64px
- Body ·
- 18–21px, measure 60–75ch
- Numerals ·
- Oldstyle figures in serif prose
Sharp (0–4px) — editorial, print-like
Pick one and apply it to every card, button, input, and modal. Mixing sharp and round corners is the #1 tell of un-designed UI.
Near-monochrome; accent for links and one CTA only.
Low in the reading column (~60–75ch), denser in nav/index.
Strong type scale, 1.5–1.65 body line-height, real H/body/caption hierarchy.
Silk (smooth) — reveal-blur/reveal-rise on headlines, subtle. Nothing that interrupts reading.
Article hero, readable body column, table of contents, pull quotes, related rail.
Avoid in content, media & docs
- full-width body text
- decorative motion mid-article
- multiple accents
- autoplaying media
Build it with StyleSeed
StyleSeed bakes this judgment into 74 rules your AI reads automatically. For content, media & docs, start from the Notion / Vercel skin and the silk motion seed.