№ smithsonianmag-com

Smithsonianmag

Warm ochre and muted sage, clean sans-serif geometry, spacious and thoughtfully organized.

Portfolio Grideditorial minimalism swiss media culturelight

The page presents a curated selection of articles with a clean, structured layout. Visual hierarchy is established through image and text weight, creating a sense of thoughtful organization rather than a purely visual display. · magazine grid, editorial layout, news website, minimalist design, article showcase, publication design, clean typography, visual hierarchy

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 · earthy

SwatchHexOKLCHSuggested roleCopy

Hex#9b411c
OKLCHoklch(49.0% 0.130 41)
RoleDominant
find sites →
Hex#1f7165
OKLCHoklch(49.7% 0.079 181)
RoleSurface
find sites →
Hex#f0d779
OKLCHoklch(88.0% 0.118 95)
RoleInk
find sites →
Hex#a98968
OKLCHoklch(65.2% 0.060 67)
RoleAccent
find sites →
Hex#bebbbb
OKLCHoklch(79.4% 0.003 17)
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	Sample
h1	minion-pro-condensed	44px	500	1.3	Aa Bb Cc
h2	proxima-nova	28px	700	0.7	Aa Bb Cc
h3	minion-pro-condensed	22px	400	1.3	Aa Bb Cc
body	Times	16px	400	1.4	Aa Bb Cc
caption	minion-pro-condensed	44px	400	1.3	Aa Bb Cc
button	proxima-nova	15px	700	1.3	Aa Bb Cc

Spacing scale

6px

10px

20px

22px

35px

48px

50px

120px

Radius scale

0px

50px

Export

:root {
  --color-dominant: #9b411c;
  --color-surface: #1f7165;
  --color-ink: #f0d779;
  --color-accent: #a98968;
  --color-detail: #bebbbb;
}

/* CSS variables exposed by source */
:root {
  --text-color: $black;
  --background-color: $white;
  --fa-font-sharp-duotone-thin: normal 100 1em/1 "Font Awesome 7 Sharp Duotone";
  --fa-font-vellum-solid: normal 900 1em/1 "Font Awesome 7 Vellum";
  --fa-style-family-notdog-duo: "Font Awesome 7 Notdog Duo";
  --fa-style-family-classic: "Font Awesome 7 Pro";
  --fa-style-family-utility-duo: "Font Awesome 7 Utility Duo";
  --fa-font-duotone-thin: normal 100 1em/1 "Font Awesome 7 Duotone";
  --fa-font-slab-press-regular: normal 400 1em/1 "Font Awesome 7 Slab Press";
  --fa-font-etch-solid: normal 900 1em/1 "Font Awesome 7 Etch";
  --fa-family-brands: "Font Awesome 7 Brands";
  --fa-font-whiteboard-semibold: normal 600 1em/1 "Font Awesome 7 Whiteboard";
  --fa-font-thumbprint-light: normal 300 1em/1 "Font Awesome 7 Thumbprint";
  --fa-family-jelly-duo: "Font Awesome 7 Jelly Duo";
  --fa-font-regular: normal 400 1em/1 "Font Awesome 7 Pro";
  --fa-style-family-pixel: "Font Awesome 7 Pixel";
  --fa-style-family-slab-press: "Font Awesome 7 Slab Press";
  --fa-font-jelly-fill-regular: normal 400 1em/1 "Font Awesome 7 Jelly Fill";
  --fa-style-family-mosaic: "Font Awesome 7 Mosaic";
  --fa-font-sharp-light: normal 300 1em/1 "Font Awesome 7 Sharp";
  --fa-style-family-notdog: "Font Awesome 7 Notdog";
  --fa-family-sharp-duotone: "Font Awesome 7 Sharp Duotone";
  --fa-family-utility-duo: "Font Awesome 7 Utility Duo";
  --fa-style-family-whiteboard: "Font Awesome 7 Whiteboard";
  --fa-font-slab-press-duo-regular: normal 400 1em/1 "Font Awesome 7 Slab Press Duo";
  --fa-font-brands: normal 400 1em/1 "Font Awesome 7 Brands";
  --fa-style-family-sharp-duotone: "Font Awesome 7 Sharp Duotone";
  --fa-font-sharp-duotone-regular: normal 400 1em/1 "Font Awesome 7 Sharp Duotone";
  --fa-family-jelly: "Font Awesome 7 Jelly";
  --fa-family-utility: "Font Awesome 7 Utility";
  --fa-style-family-etch: "Font Awesome 7 Etch";
  --fa-font-sharp-duotone-light: normal 300 1em/1 "Font Awesome 7 Sharp Duotone";
  --fa-family-pixel: "Font Awesome 7 Pixel";
  --fa-style-family-vellum: "Font Awesome 7 Vellum";
  --fa-family-graphite: "Font Awesome 7 Graphite";
  --fa-family-jelly-fill: "Font Awesome 7 Jelly Fill";
  --fa-font-utility-duo-semibold: normal 600 1em/1 "Font Awesome 7 Utility Duo";
  --fa-family-chisel: "Font Awesome 7 Chisel";
  --fa-family-slab-duo: "Font Awesome 7 Slab Duo";
  --fa-font-slab-regular: normal 400 1em/1 "Font Awesome 7 Slab";
  --fa-font-graphite-thin: normal 100 1em/1 "Font Awesome 7 Graphite";
  --fa-style-family-sharp: "Font Awesome 7 Sharp";
  --fa-font-chisel-regular: normal 400 1em/1 "Font Awesome 7 Chisel";
  --fa-font-slab-duo-regular: normal 400 1em/1 "Font Awesome 7 Slab Duo";
  --fa-family-vellum: "Font Awesome 7 Vellum";
  --fa-style-family-slab-press-duo: "Font Awesome 7 Slab Press Duo";
  --fa-family-slab-press: "Font Awesome 7 Slab Press";
  --fa-style-family-duotone: "Font Awesome 7 Duotone";
  --fa-style-family-graphite: "Font Awesome 7 Graphite";
  --fa-style-family-thumbprint: "Font Awesome 7 Thumbprint";
  --fa-font-duotone-light: normal 300 1em/1 "Font Awesome 7 Duotone";
  --fa-font-pixel-regular: normal 400 1em/1 "Font Awesome 7 Pixel";
  --fa-font-light: normal 300 1em/1 "Font Awesome 7 Pro";
  --fa-font-mosaic-solid: normal 900 1em/1 "Font Awesome 7 Mosaic";
  --fa-font-utility-fill-semibold: normal 600 1em/1 "Font Awesome 7 Utility Fill";
  --fa-style-family-jelly: "Font Awesome 7 Jelly";
  --fa-style-family-jelly-duo: "Font Awesome 7 Jelly Duo";
  --fa-family-thumbprint: "Font Awesome 7 Thumbprint";
  --fa-font-duotone: normal 900 1em/1 "Font Awesome 7 Duotone";
  --fa-family-notdog-duo: "Font Awesome 7 Notdog Duo";
}

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 Smithsonianmag.
Reference design system (extracted from the live site):
- Palette: #9b411c, #1f7165, #f0d779, #a98968, #bebbbb
- Typefaces: minion-pro-condensed, proxima-nova, Times
- Macrostructure: Portfolio Grid
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/smithsonianmag-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

minion-pro-condensed

44px

500

1.3

Aa Bb Cc

proxima-nova

28px

700

0.7

Aa Bb Cc

minion-pro-condensed

22px

400

1.3

Aa Bb Cc

body

Times

16px

400

1.4

Aa Bb Cc

caption

minion-pro-condensed

44px

400

1.3

Aa Bb Cc

button

proxima-nova

15px

700

1.3

Aa Bb Cc

:root { --color-dominant: #9b411c; --color-surface: #1f7165; --color-ink: #f0d779; --color-accent: #a98968; --color-detail: #bebbbb; } /* CSS variables exposed by source */ :root { --text-color: $black; --background-color: $white; --fa-font-sharp-duotone-thin: normal 100 1em/1 "Font Awesome 7 Sharp Duotone"; --fa-font-vellum-solid: normal 900 1em/1 "Font Awesome 7 Vellum"; --fa-style-family-notdog-duo: "Font Awesome 7 Notdog Duo"; --fa-style-family-classic: "Font Awesome 7 Pro"; --fa-style-family-utility-duo: "Font Awesome 7 Utility Duo"; --fa-font-duotone-thin: normal 100 1em/1 "Font Awesome 7 Duotone"; --fa-font-slab-press-regular: normal 400 1em/1 "Font Awesome 7 Slab Press"; --fa-font-etch-solid: normal 900 1em/1 "Font Awesome 7 Etch"; --fa-family-brands: "Font Awesome 7 Brands"; --fa-font-whiteboard-semibold: normal 600 1em/1 "Font Awesome 7 Whiteboard"; --fa-font-thumbprint-light: normal 300 1em/1 "Font Awesome 7 Thumbprint"; --fa-family-jelly-duo: "Font Awesome 7 Jelly Duo"; --fa-font-regular: normal 400 1em/1 "Font Awesome 7 Pro"; --fa-style-family-pixel: "Font Awesome 7 Pixel"; --fa-style-family-slab-press: "Font Awesome 7 Slab Press"; --fa-font-jelly-fill-regular: normal 400 1em/1 "Font Awesome 7 Jelly Fill"; --fa-style-family-mosaic: "Font Awesome 7 Mosaic"; --fa-font-sharp-light: normal 300 1em/1 "Font Awesome 7 Sharp"; --fa-style-family-notdog: "Font Awesome 7 Notdog"; --fa-family-sharp-duotone: "Font Awesome 7 Sharp Duotone"; --fa-family-utility-duo: "Font Awesome 7 Utility Duo"; --fa-style-family-whiteboard: "Font Awesome 7 Whiteboard"; --fa-font-slab-press-duo-regular: normal 400 1em/1 "Font Awesome 7 Slab Press Duo"; --fa-font-brands: normal 400 1em/1 "Font Awesome 7 Brands"; --fa-style-family-sharp-duotone: "Font Awesome 7 Sharp Duotone"; --fa-font-sharp-duotone-regular: normal 400 1em/1 "Font Awesome 7 Sharp Duotone"; --fa-family-jelly: "Font Awesome 7 Jelly"; --fa-family-utility: "Font Awesome 7 Utility"; --fa-style-family-etch: "Font Awesome 7 Etch"; --fa-font-sharp-duotone-light: normal 300 1em/1 "Font Awesome 7 Sharp Duotone"; --fa-family-pixel: "Font Awesome 7 Pixel"; --fa-style-family-vellum: "Font Awesome 7 Vellum"; --fa-family-graphite: "Font Awesome 7 Graphite"; --fa-family-jelly-fill: "Font Awesome 7 Jelly Fill"; --fa-font-utility-duo-semibold: normal 600 1em/1 "Font Awesome 7 Utility Duo"; --fa-family-chisel: "Font Awesome 7 Chisel"; --fa-family-slab-duo: "Font Awesome 7 Slab Duo"; --fa-font-slab-regular: normal 400 1em/1 "Font Awesome 7 Slab"; --fa-font-graphite-thin: normal 100 1em/1 "Font Awesome 7 Graphite"; --fa-style-family-sharp: "Font Awesome 7 Sharp"; --fa-font-chisel-regular: normal 400 1em/1 "Font Awesome 7 Chisel"; --fa-font-slab-duo-regular: normal 400 1em/1 "Font Awesome 7 Slab Duo"; --fa-family-vellum: "Font Awesome 7 Vellum"; --fa-style-family-slab-press-duo: "Font Awesome 7 Slab Press Duo"; --fa-family-slab-press: "Font Awesome 7 Slab Press"; --fa-style-family-duotone: "Font Awesome 7 Duotone"; --fa-style-family-graphite: "Font Awesome 7 Graphite"; --fa-style-family-thumbprint: "Font Awesome 7 Thumbprint"; --fa-font-duotone-light: normal 300 1em/1 "Font Awesome 7 Duotone"; --fa-font-pixel-regular: normal 400 1em/1 "Font Awesome 7 Pixel"; --fa-font-light: normal 300 1em/1 "Font Awesome 7 Pro"; --fa-font-mosaic-solid: normal 900 1em/1 "Font Awesome 7 Mosaic"; --fa-font-utility-fill-semibold: normal 600 1em/1 "Font Awesome 7 Utility Fill"; --fa-style-family-jelly: "Font Awesome 7 Jelly"; --fa-style-family-jelly-duo: "Font Awesome 7 Jelly Duo"; --fa-family-thumbprint: "Font Awesome 7 Thumbprint"; --fa-font-duotone: normal 900 1em/1 "Font Awesome 7 Duotone"; --fa-family-notdog-duo: "Font Awesome 7 Notdog Duo"; }

Build a landing page in the visual style of Smithsonianmag. Reference design system (extracted from the live site): - Palette: #9b411c, #1f7165, #f0d779, #a98968, #bebbbb - Typefaces: minion-pro-condensed, proxima-nova, Times - Macrostructure: Portfolio Grid 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/smithsonianmag-com