№ nordiskamuseet-se--en-exhibitions

Part of Nordiska Museet - 4 pages captured →

Nordiska Museet · Exhibitions

Deep burgundy velvet, stark white editorial type, centered cinematic circular portals

Marquee Herominimalism editorial culturelight

A clean, centered typographic layout using a warm cream background. High-contrast black sans-serif headings create a strong visual hierarchy against the soft backdrop. · museum landing page, minimalist editorial, cream background, centered typography, culture website, warm neutral palette

Nordiska Museet · Exhibitions - mobile — Mobile · 375

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Nordiska Museet · Exhibitions - full page scroll

Nordiska Museet · Exhibitions - mobile full page

Palette

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

Reads as: warm · muted

SwatchHexOKLCHSuggested roleCopy

Hex#fc6950
OKLCHoklch(70.0% 0.185 32)
RoleDominant
find sites →
Hex#fc8169
OKLCHoklch(73.8% 0.155 32)
RoleSurface
find sites →
Hex#821402
OKLCHoklch(39.2% 0.146 32)
RoleInk
find sites →
Hex#7f7d77
OKLCHoklch(59.0% 0.009 92)
RoleAccent
find sites →
Hex#c6c2ba
OKLCHoklch(81.5% 0.012 85)
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	Mabry Pro	123px	500	1.03	-3.68155px	Aa Bb Cc
h2	Mabry Pro	123px	500	1.03	-3.68155px	Aa Bb Cc
h3	Mabry Pro	66px	500	1.12	0	Aa Bb Cc
body	Domaine Text	16px	400	1.6	0	Aa Bb Cc
button	Domaine Text	16px	400	1.6	0	Aa Bb Cc

Spacing scale

10px

20px

25px

26px

30px

38px

40px

60px

100px

180px

Radius scale

0px

6px

17px

Container

Max content width 1425px

Export

:root {
  --color-dominant: #fc6950;
  --color-surface: #fc8169;
  --color-ink: #821402;
  --color-accent: #7f7d77;
  --color-detail: #c6c2ba;
}

/* CSS variables exposed by source */
:root {
  --accent-color: #ff4629;
  --text-color-contrast: #000;
  --text-color-rgb: 0,0,0;
  --text-color: #000;
  --background-color: #faf5eb;
  --tone-on-tone-color: #f0e9db;
  --wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);
  --tag-background-color: #f0e9db;
  --header-color: #ff4629;
  --header-height: 146px;
  --wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
  --wp--preset--font-size--large: 36px;
  --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);
  --wp--preset--color--vivid-purple: #9b51e0;
  --wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);
  --wp--preset--aspect-ratio--16-9: 16/9;
  --faq-background-color: #f0e9db;
  --wp--preset--color--pale-pink: #f78da7;
  --selection-text-color: #faf5eb;
  --video-play-button-color: #4b0a23;
  --wp--preset--color--cyan-bluish-gray: #abb8c3;
  --filter-button-text-color: #ff4629;
  --wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);
  --wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);
  --wp--preset--spacing--60: 2.25rem;
  --cookie-consent-background-color: #4b0a23;
  --menu-background-color: #4b0a23;
  --wp--preset--color--vivid-green-cyan: #00d084;
  --wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
  --button-text-color: #faf5eb;
  --menu-text-color: #ff4629;
  --button-dark-background-color: #ff4629;
  --wp--preset--spacing--40: 1rem;
  --filter-button-active-text-color: #ff4629;
  --wp--preset--aspect-ratio--3-2: 3/2;
  --wp--preset--color--luminous-vivid-orange: #ff6900;
  --wp--preset--font-size--x-large: 42px;
  --toolbar-height: 0px;
  --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);
  --wp--preset--aspect-ratio--2-3: 2/3;
  --video-play-button-background: #ff4629;
  --divider-color: #ff4629;
  --wp--preset--color--vivid-cyan-blue: #0693e3;
  --wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
  --wp--preset--spacing--30: 0.67rem;
  --wp--preset--aspect-ratio--4-3: 4/3;
  --wp--preset--spacing--50: 1.5rem;
  --wp--preset--color--pale-cyan-blue: #8ed1fc;
  --button-dark-text-color: #4b0a23;
  --footer-text-color: #ff4629;
  --wp--preset--font-size--small: 13px;
  --cookie-consent-text-color: #ff4629;
  --wp--preset--spacing--70: 3.38rem;
  --selection-background-color: #4b0a23;
  --list-color: #ff4629;
  --wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);
  --filter-button-active-background-color: #4b0a23;
  --wp--preset--color--luminous-vivid-amber: #fcb900;
  --tag-text-color: #000;
  --teaser-hover-text-text: #4b0a23;
}

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 Nordiska Museet · Exhibitions.
Reference design system (extracted from the live site):
- Palette: #fc6950, #fc8169, #821402, #7f7d77, #c6c2ba
- Typefaces: Mabry Pro, Domaine Text
- Macrostructure: Marquee Hero
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/nordiskamuseet-se--en-exhibitions

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Mabry Pro

123px

500

1.03

-3.68155px

Aa Bb Cc

Mabry Pro

123px

500

1.03

-3.68155px

Aa Bb Cc

Mabry Pro

66px

500

1.12

Aa Bb Cc

body

Domaine Text

16px

400

1.6

Aa Bb Cc

button

Domaine Text

16px

400

1.6

Aa Bb Cc

:root { --color-dominant: #fc6950; --color-surface: #fc8169; --color-ink: #821402; --color-accent: #7f7d77; --color-detail: #c6c2ba; } /* CSS variables exposed by source */ :root { --accent-color: #ff4629; --text-color-contrast: #000; --text-color-rgb: 0,0,0; --text-color: #000; --background-color: #faf5eb; --tone-on-tone-color: #f0e9db; --wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%); --tag-background-color: #f0e9db; --header-color: #ff4629; --header-height: 146px; --wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0); --wp--preset--font-size--large: 36px; --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%); --wp--preset--color--vivid-purple: #9b51e0; --wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%); --wp--preset--aspect-ratio--16-9: 16/9; --faq-background-color: #f0e9db; --wp--preset--color--pale-pink: #f78da7; --selection-text-color: #faf5eb; --video-play-button-color: #4b0a23; --wp--preset--color--cyan-bluish-gray: #abb8c3; --filter-button-text-color: #ff4629; --wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%); --wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%); --wp--preset--spacing--60: 2.25rem; --cookie-consent-background-color: #4b0a23; --menu-background-color: #4b0a23; --wp--preset--color--vivid-green-cyan: #00d084; --wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4); --button-text-color: #faf5eb; --menu-text-color: #ff4629; --button-dark-background-color: #ff4629; --wp--preset--spacing--40: 1rem; --filter-button-active-text-color: #ff4629; --wp--preset--aspect-ratio--3-2: 3/2; --wp--preset--color--luminous-vivid-orange: #ff6900; --wp--preset--font-size--x-large: 42px; --toolbar-height: 0px; --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%); --wp--preset--aspect-ratio--2-3: 2/3; --video-play-button-background: #ff4629; --divider-color: #ff4629; --wp--preset--color--vivid-cyan-blue: #0693e3; --wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2); --wp--preset--spacing--30: 0.67rem; --wp--preset--aspect-ratio--4-3: 4/3; --wp--preset--spacing--50: 1.5rem; --wp--preset--color--pale-cyan-blue: #8ed1fc; --button-dark-text-color: #4b0a23; --footer-text-color: #ff4629; --wp--preset--font-size--small: 13px; --cookie-consent-text-color: #ff4629; --wp--preset--spacing--70: 3.38rem; --selection-background-color: #4b0a23; --list-color: #ff4629; --wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%); --filter-button-active-background-color: #4b0a23; --wp--preset--color--luminous-vivid-amber: #fcb900; --tag-text-color: #000; --teaser-hover-text-text: #4b0a23; }

Build a landing page in the visual style of Nordiska Museet · Exhibitions. Reference design system (extracted from the live site): - Palette: #fc6950, #fc8169, #821402, #7f7d77, #c6c2ba - Typefaces: Mabry Pro, Domaine Text - Macrostructure: Marquee Hero 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/nordiskamuseet-se--en-exhibitions