Museum Wales
Marquee Hero
Deep indigo depths, elegant sans-serifs, expansive negative space breathes thoughtful calm.




Click any value to copy. Roles are suggestions, not gospel.
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h2 | BkmFacade | 48px | 400 | 0.9 | 0 | Aa Bb Cc |
| h3 | ui-sans-serif | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| body | ui-sans-serif | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | ui-sans-serif | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #046cfc;
--color-surface: #58202b;
--color-ink: #fc9c5c;
--color-accent: #a05966;
--color-detail: #b2bcc5;
}
/* CSS variables exposed by source */
:root {
--fontSize-title: 3rem;
--color-brand-primary: #faf800;
--spacing-lg-max: 3.75;
--fontSize-title-max: 5.13;
--color-primary-tint: #786e64;
--color-overlay-bg: rgba(0,0,0,.1);
--spacing-text-nudge-lg: 0.3125rem;
--fontSize-lead-max: 5.13;
--color-secondary-tint: #f0e6dc;
--spacing-lg: calc((3.75 / 100) * 80rem);
--spacing-md-max: 1.87;
--spacing-md: calc((1.87 / 100) * 80rem);
--spacing-xxl-max: 11.25;
--borderRadius-sm: 1.5rem;
--fontSize-deck: 2rem;
--color-warn: #ffad1c;
--spacing-xl-max: 7.5;
--spacing-xl: calc((7.5 / 100) * 80rem);
--color-secondary: #fff;
--spacing-sm: calc((0.92 / 100) * 80rem);
--color-success: #15e212;
--fontSize-jumbo-max: 10;
--borderRadius-lg: calc((2.81 / 100) * 80rem);
--spacing-xs-max: 0.46;
--spacing-dot-lg-max: 3.75;
--borderRadius-lg-max: 2.81;
--spacing-xxl: calc((11.25 / 100) * 80rem);
--color-accent: #f0e6dc;
--spacing-dot-md: calc((2.22 / 100) * 80rem);
--color-brand-secondary: #8813ff;
--color-error: #ff2900;
--spacing-xs: calc((0.46 / 100) * 80rem);
--spacing-pill-nudge-sm: 0.35rem;
--color-primary: #000;
--fontSize-label: 1.125rem;
--borderRadius-md-max: 1.88;
--fontSize-body: 1rem;
--spacing-dot-lg: calc((3.75 / 100) * 80rem);
--fontSize-label-max: 1.67;
--spacing-dot-md-max: 2.22;
--fontSize-body-max: 1.67;
--borderRadius-md: calc((1.88 / 100) * 80rem);
--fontSize-lead: 3rem;
--fontSize-jumbo: 5rem;
--color-warn-tint: #f7e7ba;
--spacing-sm-max: 0.92;
--spacing-pill-nudge-lg: 0rem;
--fontSize-deck-max: 3.33;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--leading-label: 1.3;
--leading-deck: 1;
--tw-border-spacing-x: 0;
--tw-scale-y: 1;
--tw-ring-color: rgba(59,130,246,.5);
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
--leading-jumbo: 0.8;
--leading-lead: 0.9;
}Drop-in prompt
Build a landing page in the visual style of Brooklynmuseum.
Reference design system (extracted from the live site):
- Palette: #046cfc, #58202b, #fc9c5c, #a05966, #b2bcc5
- Typefaces: BkmFacade, ui-sans-serif
- 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/brooklynmuseum-org