# How explainers.blog is designed

[Open the live Fudge conversation](https://design.withfudge.com/share/explainers.blog-design)

Last updated: 2026-07-28

## 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.

## Captured pages

[![Why is the sky blue?](https://pin.fontofweb.com/6335?format=jpg)](https://design.withfudge.com/share/pin-6335)

[Why is the sky blue?](https://design.withfudge.com/share/pin-6335)

[![Why is the sky blue?](https://pin.fontofweb.com/6337?format=jpg)](https://design.withfudge.com/share/pin-6337)

[Why is the sky blue?](https://design.withfudge.com/share/pin-6337)

[![Why is the sky blue?](https://pin.fontofweb.com/6336?format=jpg)](https://design.withfudge.com/share/pin-6336)

[Why is the sky blue?](https://design.withfudge.com/share/pin-6336)

## Colors

- `#5b5bfd`
- `#2d2d2d`
- `#424242`
- `#31359d`