№ bbcearth-com--shows

Bbcearth

Deep indigo expanse, clean sans-serif, vast cinematic depth.

Photographicminimalism editorial dark mode mediadark

The page uses a large, immersive photograph to immediately establish the subject matter. Minimal text overlays provide context, prioritizing visual impact and a sense of documentary storytelling. The overall feel is authoritative and informative. · nature documentary, bbc earth, polar bears, wildlife photography, environmental media, nature film, animal portrait, arctic wildlife

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: muted · earthy

SwatchHexOKLCHSuggested roleCopy

Hex#3f6abf
OKLCHoklch(53.7% 0.142 262)
RoleDominant
find sites →
Hex#0c1424
OKLCHoklch(19.3% 0.035 263)
RoleSurface
find sites →
Hex#9bb1dd
OKLCHoklch(75.9% 0.068 264)
RoleInk
find sites →
Hex#747a87
OKLCHoklch(57.9% 0.021 266)
RoleAccent
find sites →
Hex#bfc6af
OKLCHoklch(81.5% 0.032 121)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	BBC Reith Sans	60px	700	1.13	-2px	Aa Bb Cc
h2	BBC Reith Sans	32px	700	1.13	0	Aa Bb Cc
h3	BBC Reith Sans	20px	900	1.2	3px	Aa Bb Cc
body	BBC Reith Sans	16px	400	1.4	0	Aa Bb Cc
button	BBC Reith Sans	16px	700	1.25	0	Aa Bb Cc

Spacing scale

8px

24px

25px

30px

32px

33px

64px

80px

135px

160px

Radius scale

0px

50px

60px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #3f6abf;
  --color-surface: #0c1424;
  --color-ink: #9bb1dd;
  --color-accent: #747a87;
  --color-detail: #bfc6af;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Bbcearth.
Reference design system (extracted from the live site):
- Palette: #3f6abf, #0c1424, #9bb1dd, #747a87, #bfc6af
- Typefaces: BBC Reith Sans
- Macrostructure: Photographic
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/bbcearth-com--shows

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

BBC Reith Sans

60px

700

1.13

-2px

Aa Bb Cc

BBC Reith Sans

32px

700

1.13

Aa Bb Cc

BBC Reith Sans

20px

900

1.2

3px

Aa Bb Cc

body

BBC Reith Sans

16px

400

1.4

Aa Bb Cc

button

BBC Reith Sans

16px

700

1.25

Aa Bb Cc

Build a landing page in the visual style of Bbcearth. Reference design system (extracted from the live site): - Palette: #3f6abf, #0c1424, #9bb1dd, #747a87, #bfc6af - Typefaces: BBC Reith Sans - Macrostructure: Photographic Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/bbcearth-com--shows