# Nordiska Museet — Marketing Site Design Spec

> 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 `#4b0a23` ground with orange-red `#ff4629` chrome; type is a huge uppercase Mabry Pro display paired with a Domaine Text serif. Distinct from MoMA.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

*(Current per-exhibition scheme — the system swaps these hues per exhibition/section.)*

### Ground & text
| 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 |

### Section accents (per-exhibition palette)
| 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.

## 3. Typography Rules

- Families: `"Mabry Pro"` (display + UI, 1020 uses), `"Domaine Text"` (serif body, 194 uses).
- Preview specimens use **Space Grotesk** (for Mabry Pro) and **Newsreader** (for Domaine Text) as the closest open stand-ins; the site ships the licensed originals.
- Body (serif): Domaine Text; UI/labels: Mabry Pro 500.

| 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.

## 4. Component Stylings

### Buttons (invert on hover)
- **Outline (Tickets)**: transparent bg, 2px `#ff4629` border, orange-red text, radius `8px`, h `48px`, Mabry Pro 20/700.
- **Primary (Buy ticket)**: bg `#ff4629`, text `#faf5eb` (cream), 2px `#ff4629` border, radius ~`7.5px`, h `77px` (large), Mabry Pro ~22px.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Button (`.c-button`) | filled `#ff4629`, cream text | inverts: bg transparent, text = fill colour `#ff4629`; arrow icon `translateX(120%)` | (inherits hover; site sets no isolated ring) | — | not captured |
| Email input | transparent, orange-red border | box-shadow `inset 0 0 0 2px #000` | bg `#faf5eb`, border cream, `outline:0`, text black | — | — |
| Text link | orange-red | `text-decoration-color 0.4s` underline reveal | as link | — | — |

Anti-pattern: `input:focus{outline:0}` — the focus cue is a background/border swap, not a ring. Add a visible ring for keyboard users, e.g. `outline: 2px solid #ff4629; outline-offset: 2px`.

### Cards / panels
- Flat colour blocks; radii small (`6–8px`, occasional `14px`, `100px` pill, and one-sided `17px` pill-halves). No shadows.

### Nav
- h ~146px (`--header-height:146px`); left cluster (Tickets outline button + "Open today" with animated arrow), centered seal + "NORDISKA MUSEET" logotype, right (language, search, menu) — all in orange-red.

## 5. Layout Principles

- Full-bleed single-scheme ground; hero media clipped into the ornamental seal silhouette, centered.
- Big vertical rhythm; sections are full-width colour blocks.
- Header 146px tall; centered logotype with a scalloped seal mark.
- Splide carousels for exhibition rows.

## 6. Depth & Elevation

- Radius scale: `6px`, `8px` (dominant controls), `14px`, `100px` pills, plus one-sided `17px`/`5.6px` for pill halves; media uses the seal clip-mask, not a rectangle radius.
- Shadows: effectively none (census empty aside from a 1px offset seam).
- Borders: 2px `#ff4629` dominant (13 uses), 2px `#4b0a23`, 1px variants. Structure is borders + colour blocks, never shadow.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| text-decoration-color | 0.4s | ease | link underline reveals (47 uses) |
| transform | 0.7s | cubic-bezier(0.34,0.34,0.02,0.97) | element reveals (32 uses — house move) |
| border | 0.7s | cubic-bezier(0.34,0.34,0.02,0.97) | bordered elements |
| transform | 1.2s | cubic-bezier(0.34,0.34,0.02,0.97) | large slow reveals |
| background-color, border-color, color | 0.6s | cubic-bezier(0.34,0.34,0.02,0.97) | button/scheme transitions |

- House easing: a slow custom `cubic-bezier(0.34,0.34,0.02,0.97)` on transform (0.35–1.2s) — deliberate, editorial pacing.
- Keyframes: `arrowAnimate` (2.35s infinite — the nav/scroll arrow), `splide-loading` (carousel). Button hover slides its arrow icon `translateX(120%)`.
- No third-party animation library detected (Splide carousel present).
- Anti-pattern: `reducedMotionBlocks: 0` — no `prefers-reduced-motion` block. Add one.

## 8. Backgrounds, Effects & WebGL

- No CSS gradients, no canvas/WebGL, no backdrop-blur, no grain, no raster background layers — surfaces are flat solid colour.
- Atmosphere is the single autoplaying hero **video** clipped into the ornamental seal shape (the signature effect), plus full-bleed photography inside the same mask.
- Depth and interest come entirely from bold colour-blocking + the decorative clip-mask.

## 9. Do's and Don'ts

### Do
- Commit to ONE saturated scheme at a time: a ground colour + a single high-contrast ink used for everything (e.g. aubergine `#4b0a23` + orange-red `#ff4629`).
- Use the ornamental seal as a clip-mask to frame hero photo/video.
- Set display type HUGE (128–168px), mostly UPPERCASE, Mabry Pro weight 500 with tight negative tracking (~-3%).
- Pair the grotesque display with a Domaine-style serif for reading copy.
- Invert buttons on hover (fill → transparent, text = fill colour) and slide the arrow icon out.
- Keep everything flat — 2px borders and colour blocks, zero shadows.

### Don't
- Don't mix multiple accent hues within one section — accents are full blocks.
- Don't add shadows, gradients or blur — the system is flat.
- Don't set display type in a light weight or lowercase at large sizes — it is uppercase 500.
- Don't rectangle-crop the hero — use the seal mask.
- Don't suppress the focus cue (site's `outline:0` is a bug) or ship without a reduced-motion block.

## 10. Responsive Behavior

| Breakpoint | What changes |
|---|---|
| max 549px | Mobile: single column, stacked blocks, hamburger nav |
| min 768px | Tablet layout |
| min 1024px | Desktop layout |
| min 1440 / 1920px | Wide-screen scaling |

- Breakpoints: 375/450/550/768/900/1024/1200/1440/1600/1920 — a full bespoke ladder.
- `darkSchemeBlocks: 0` — no OS dark theme (the dark aubergine ground is the design, not a dark mode). No container queries.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#4b0a23` · Ink `#ff4629` · On-orange `#faf5eb` · Border `#ff4629` (2px) · Accents `#98cdb2` / `#1414ff` / `#ffb9ff`
- Fonts: Mabry Pro (display/UI) + Domaine Text serif (body) · Display: 128–168px UPPERCASE 500 · Radius: 8px control · Button height: 48–77px · No shadows
- Focus: add `outline: 2px solid #ff4629; outline-offset: 2px` (site suppresses it) · Hover: button inverts (bg transparent, text = fill) + arrow translateX(120%)

<nordiska-museet_design_language>
Use the Nordiska Museet design language: a rotating single-scheme cultural-institution identity that commits to ONE saturated colour scheme at a time — currently a deep aubergine #4b0a23 ground with everything (logo, nav, borders, body) drawn in one orange-red #ff4629, plus cream #faf5eb for text on orange and full-block section accents (sage #98cdb2, electric blue #1414ff, pink #ffb9ff, brown #88530f). The signature device is the museum's ornamental SEAL used as a live clip-mask framing hero photo/video in a scalloped rosette. Type is graphic and huge: Mabry Pro (open stand-in Space Grotesk) at 128–168px, mostly UPPERCASE, weight 500 with tight negative tracking (~-3%), small labels flipping to +0.85px uppercase and nav/buttons to weight 700, paired with a Domaine Text serif (stand-in Newsreader) for reading copy. Buttons are 2px-bordered (outline transparent + orange text, or filled orange + cream text, h48–77, ~8px radius) and INVERT on hover (fill → transparent, text becomes the fill colour) while the arrow icon slides translateX(120%). Everything is flat — 2px borders and bold colour blocks, ZERO shadows/gradients/blur; the only atmosphere is the seal-masked hero video. Motion is slow and editorial: custom cubic-bezier(0.34,0.34,0.02,0.97) on transform (0.35–1.2s), link underlines reveal over 0.4s, one infinite arrowAnimate. Feels: bold, editorial, cultural, poster-like. Avoid: mixing accents within a section, any shadow/gradient/blur, light or lowercase large display type, rectangle-cropping the hero instead of the seal mask, and a suppressed focus ring (add outline:2px solid #ff4629) plus the missing reduced-motion block.
</nordiska-museet_design_language>