№ bbc-com--thai-topics-c83pkm15xzkt

Bbc

Crisp, cool grayscale—geometric sans-serif, expansive, contemplative clarity.

Ecosystem Indexminimalism editorial swiss medialight

The page prioritizes delivering a high volume of news content with a clean, structured layout. Visual hierarchy is established through image size and placement, creating a sense of urgency and importance. Typography is clear and functional, supporting readability. · news website, media design, editorial layout, clean design, bbc homepage, news portal, article grid, minimalist news, information architecture

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: monochrome · muted · cool

SwatchHexOKLCHSuggested roleCopy

Hex#ec9430
OKLCHoklch(74.2% 0.151 64)
RoleDominant
find sites →
Hex#b61725
OKLCHoklch(49.8% 0.190 24)
RoleSurface
find sites →
Hex#f04543
OKLCHoklch(63.9% 0.208 26)
RoleInk
find sites →
Hex#a46994
OKLCHoklch(59.8% 0.095 337)
RoleAccent
find sites →
Hex#cd9598
OKLCHoklch(72.4% 0.068 15)
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
h2	BBC Reith Serif	28px	500	1.14	-0.56px	Aa Bb Cc
h3	BBC Reith Serif	14px	500	1.29	-0.28px	Aa Bb Cc
body	Times	16px	400	1	0	Aa Bb Cc
button	Times	13px	400	1.4	0	Aa Bb Cc

Spacing scale

16px

21px

24px

29px

48px

120px

Radius scale

0px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #ec9430;
  --color-surface: #b61725;
  --color-ink: #f04543;
  --color-accent: #a46994;
  --color-detail: #cd9598;
}

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 Bbc.
Reference design system (extracted from the live site):
- Palette: #ec9430, #b61725, #f04543, #a46994, #cd9598
- Typefaces: BBC Reith Serif, Times
- Macrostructure: Ecosystem Index
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/bbc-com--thai-topics-c83pkm15xzkt

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

BBC Reith Serif

28px

500

1.14

-0.56px

Aa Bb Cc

BBC Reith Serif

14px

500

1.29

-0.28px

Aa Bb Cc

body

Times

16px

400

Aa Bb Cc

button

Times

13px

400

1.4

Aa Bb Cc

Build a landing page in the visual style of Bbc. Reference design system (extracted from the live site): - Palette: #ec9430, #b61725, #f04543, #a46994, #cd9598 - Typefaces: BBC Reith Serif, Times - Macrostructure: Ecosystem Index 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/bbc-com--thai-topics-c83pkm15xzkt