explainers.blog website design: fonts, colors and UI patterns

Design character

Explainers is a light, patient educational blog. Articles live in a centered white reading column with charcoal body text and indigo/violet accents (#5b5bfd, #31359d). Titles can jump to ~70px bold; body stays comfortable and open. It feels like a modern science explainer — clear, friendly, not startup-landing loud.

What should survive adaptation: - Light mode reading canvas - Indigo accent for links and emphasis - Very large article titles (~70px / ~0.94 lh) with solid mid-heads - Centered column with ~45px side padding and large outer margins

Foundations

Color

Measured: - #5b5bfd bright indigo accent - #31359d deeper indigo - #2d2d2d / #424242 text grays

Background reads white/off-white from screenshots.

Typography

Families unsupported. Observed on article crops: - Display title ~70px weight 700, line-height ~65.8 - Deck/mid ~28–30px (400–500) - Body-ish ~21/29.4 - Small labels ~15–20 with mixed weights 600–700

Spacing and layout

• Content padding 45px left/right
• Vertical section padding ~50px
• Large side margins (~273–633px) creating a focused column
• 12px bottom margins between stacked blocks

Radii not a major system feature.

Visual language

Minimal chrome, limited palette, media/publishing taxonomy. Illustrations or simple diagrams may support posts; UI stays out of the way.

Components and states

• Simple site identity
• Article title + byline/meta
• Long-form paragraphs and subheads
• Accent-colored inline links

Practical guidance

Preserve huge title + calm body + indigo links on white. Avoid dark mode defaults and dense card marketing. Adaptation for explainers, education, and editorial STEM blogs.

Scope note

Three captures of one article (/posts/why-is-the-sky-blue/). Site home and other posts not in set. Colors measured; families unsupported.