№ effectivealtruism-org--resources

Part of Effectivealtruism - 5 pages captured →

Effectivealtruism

Deep teal and warm ochre, clean sans-serif, spacious and intellectually grounded.

Long Documentminimalism editorial swiss non profitlight

The page uses a full-bleed image with overlaid text, creating a strong visual hierarchy. The typography is clean and legible, prioritizing clarity and impact over ornamentation. The overall feel is serious and purposeful. · nonprofit impact, altruism website, impact measurement, charity design, social good, effective altruism, data visualization, presentation design

Effectivealtruism - mobile — Mobile · 375

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

SwatchHexOKLCHSuggested roleCopy

Hex#315e7b
OKLCHoklch(46.3% 0.069 239)
RoleDominant
find sites →
Hex#13384d
OKLCHoklch(32.5% 0.056 237)
RoleSurface
find sites →
Hex#fcf8f4
OKLCHoklch(98.1% 0.007 68)
RoleInk
find sites →
Hex#ac9466
OKLCHoklch(67.7% 0.069 83)
RoleAccent
find sites →
Hex#b1b2b9
OKLCHoklch(76.5% 0.010 280)
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	Inter	72px	600	1.04	-3px	Aa Bb Cc
h2	Inter	44px	600	1.2	-1.2px	Aa Bb Cc
h3	Inter	28px	600	1.2	-0.28px	Aa Bb Cc
body	Times	16px	400	1.4	0	Aa Bb Cc
button	Times	16px	400	1.4	0	Aa Bb Cc

Spacing scale

4px

6px

24px

60px

76px

80px

110px

Radius scale

0px

14px

50px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #315e7b;
  --color-surface: #13384d;
  --color-ink: #fcf8f4;
  --color-accent: #ac9466;
  --color-detail: #b1b2b9;
}

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 Effectivealtruism.
Reference design system (extracted from the live site):
- Palette: #315e7b, #13384d, #fcf8f4, #ac9466, #b1b2b9
- Typefaces: Inter, Times, Arial
- Macrostructure: Long Document
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/effectivealtruism-org--resources

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Inter

72px

600

1.04

-3px

Aa Bb Cc

Inter

44px

600

1.2

-1.2px

Aa Bb Cc

Inter

28px

600

1.2

-0.28px

Aa Bb Cc

body

Times

16px

400

1.4

Aa Bb Cc

button

Times

16px

400

1.4

Aa Bb Cc

Build a landing page in the visual style of Effectivealtruism. Reference design system (extracted from the live site): - Palette: #315e7b, #13384d, #fcf8f4, #ac9466, #b1b2b9 - Typefaces: Inter, Times, Arial - Macrostructure: Long Document 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/effectivealtruism-org--resources