A Swedish cultural-history museum whose site behaves like a rotating editorial identity rather than a fixed brand: it commits to ONE saturated colour scheme at a time, currently a deep aubergine #4b0a23 ground on which everything — logo, nav, borders and body — is drawn in a single orange-red #ff4629 (990 uses), with cream #faf5eb for text on orange and full-block section accents (sage #98cdb2, electric blue #1414ff, pink #ffb9ff, brown #88530f) that swap per exhibition. Its signature device is the museum’s ornamental SEAL used as a live clip-mask, framing the hero photo and video inside a scalloped rosette silhouette rather than a rectangle. Type is graphic and enormous: Mabry Pro (Space Grotesk stand-in) runs the display at 128–168px, mostly UPPERCASE, weight 500 with tight negative tracking (~-3%), while small labels flip to +0.85px uppercase and nav/buttons jump to weight 700, all paired with a Domaine Text serif (Newsreader stand-in) for reading copy. Buttons are 2px-bordered (outline transparent + orange text, or filled orange + cream text, h48–77, ~8px radius) and INVERT on hover — the fill drops to transparent and the text becomes the fill colour — while the arrow icon slides translateX(120%). The whole system is deliberately flat: 2px borders and bold colour blocks do all the structural work, with ZERO shadows, gradients or backdrop blur, so the only atmosphere is the seal-masked hero video. Motion is slow and editorial on a custom cubic-bezier(0.34,0.34,0.02,0.97) easing (transform 0.35–1.2s), link underlines reveal over 0.4s, and one infinite arrowAnimate drives the scroll cue; Splide powers the carousels. Two anti-patterns recorded: input focus suppresses the outline (a cream fill-swap instead of a ring) and there is no prefers-reduced-motion block. Mabry Pro and Domaine Text are licensed, so the preview stands in with Space Grotesk and Newsreader.
⚠ site only
Browse Nordiska Museet in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: nordiskamuseet.se/en (live DOM, computed styles), 2026-08-04 (desktop 1512px). WordPress build. Coverage: English homepage. Site only (no login product). All stylesheets read (0 blocked) — full token/state/keyframe coverage. Palette captured is the CURRENT per-exhibition scheme (aubergine + orange-red); the site rotates schemes, so treat the specific hues as one instance of the system. Reality check: matches the hint strongly. The museum's ornamental SEAL/emblem is used as a dynamic clip-mask framing the hero media (confirmed on screen); the current per-exhibition colour scheme is a deep aubergine#4b0a23ground with orange-red#ff4629chrome; type is a huge uppercase Mabry Pro display paired with a Domaine Text serif. Distinct from MoMA.
Bold, confident cultural-institution design that behaves like a rotating editorial identity rather than a fixed brand. The whole page commits to a single saturated colour scheme at a time — currently a deep aubergine #4b0a23 ground with everything (logo, nav, borders, body) drawn in one orange-red #ff4629 — so the site reads as a monochromatic poster you can walk into. Its signature device is the museum's ornamental seal: the scalloped emblem silhouette is used as a live clip-mask, framing the hero photo/video inside a decorative rosette. Type is enormous and graphic — Mabry Pro set uppercase at 128–168px with tight negative tracking — balanced by a Domaine Text serif for reading. There are no shadows, gradients or blurs; depth is pure flat colour-blocking. Feels: bold, editorial, cultural, poster-like.
*(Current per-exhibition scheme — the system swaps these hues per exhibition/section.)*
| Token | Hex | Role / usage |
|---|---|---|
| aubergine | #4b0a23 | Page canvas / ground (dominant) |
| aubergine-deep | #3a071b | Darker band / inset |
| orange-red | #ff4629 | Primary chrome: logo, nav, body text, borders, CTAs (990 uses) |
| cream | #faf5eb | Text on orange, light section fill |
| white | #ffffff | Text/media on dark |
| black | #000000 | Text on light/cream |
| Token | Hex | Role / usage |
|---|---|---|
| sage | #98cdb2 | Exhibition accent band / label |
| blue | #1414ff | Electric-blue accent section |
| pink | #ffb9ff | Light-pink accent |
| brown | #88530f | Earth-brown accent |
Rule: commit to ONE scheme at a time — a ground colour plus a single high-contrast ink used for everything (here aubergine + orange-red). Accents appear as full section blocks, never mixed within one band.
"Mabry Pro" (display + UI, 1020 uses), "Domaine Text" (serif body, 194 uses).| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Display (h1) | Mabry Pro | 128 / 132 | 500 | -3.85px (-3%) |
| Section (h2) | Mabry Pro | 168 / 173 | 500 | -5.03px, UPPERCASE |
| Sub (h3) | Mabry Pro | 66 / 74 | 500 | normal, UPPERCASE |
| Label / meta | Mabry Pro | 17 / 21 | 500 | +0.85px, UPPERCASE |
| Nav / button | Mabry Pro | 20 / 24 | 700 | normal |
| Body | Domaine Text (serif) | ~18 / 1.4 | 400 | normal |
Patterns: display is HUGE (128–168px) and mostly UPPERCASE at weight 500 with tight negative tracking (~-3%); small labels flip to +tracking uppercase. Nav/buttons jump to weight 700. Serif carries reading copy.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.