Brooklynmuseum
Marquee Hero
Loading
Interactive Money Museum in Dallas | MoMoney
Bright citrus bursts on a clean, open canvas, playful sans-serifs feel approachable.
Click any value to copy. Roles are suggestions, not gospel.
- #eeee42oklch(92.1% 0.181 109)Dominant
- #f2d9caoklch(90.2% 0.034 53)Surface
- #055131oklch(38.4% 0.087 158)Ink
- #a9584boklch(55.4% 0.109 30)Accent
- #c89a85oklch(72.4% 0.063 46)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Archivo Black | 60px | 400 | 0.95 | -1.5px | Aa Bb Cc |
| h2 | Archivo Black | 96px | 400 | 1 | 0 | Aa Bb Cc |
| h3 | Archivo Black | 24px | 400 | 1.25 | 0 | Aa Bb Cc |
| body | Manrope | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | Manrope | 15px | 600 | 1.43 | 0.75px | Aa Bb Cc |
| button | Manrope | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #eeee42;
--color-surface: #f2d9ca;
--color-ink: #055131;
--color-accent: #a9584b;
--color-detail: #c89a85;
}
/* CSS variables exposed by source */
:root {
--border: lab(90.952% 0 -.0000119209);
--text-2xl: 1.5rem;
--text-7xl: 4.5rem;
--font-archivo-black: "Archivo Black", "Archivo Black Fallback";
--text-lg: 1.125rem;
--text-8xl--line-height: 1;
--primary-foreground: lab(98.26% 0 0);
--text-5xl--line-height: 1;
--text-base--line-height: calc(1.5 / 1);
--accent-foreground: lab(7.78201% -.0000149012 0);
--text-lg--line-height: calc(1.75 / 1.125);
--color-white: #fff;
--font-jetbrains-mono: "JetBrains Mono", "JetBrains Mono Fallback";
--font-weight-bold: 700;
--radius: .625rem;
--text-6xl: 3.75rem;
--ink: #111;
--text-xs--line-height: calc(1 / .75);
--radius-md: calc(.625rem * .8);
--text-7xl--line-height: 1;
--text-xl: 1.25rem;
--accent: lab(96.52% -.0000298023 .0000119209);
--text-2xl--line-height: calc(2 / 1.5);
--secondary-foreground: lab(7.78201% -.0000149012 0);
--spacing: .25rem;
--background: lab(100% 0 0);
--text-8xl: 6rem;
--text-xl--line-height: calc(1.75 / 1.25);
--font-weight-semibold: 600;
--text-sm: .875rem;
--color-red-700: lab(40.4273% 67.2623 53.7441);
--font-permanent-marker: "Permanent Marker", "Permanent Marker Fallback";
--font-weight-extrabold: 800;
--text-4xl: 2.25rem;
--color-red-600: lab(48.4493% 77.4328 61.5452);
--color-red-50: lab(96.5005% 4.18508 1.52328);
--text-sm--line-height: calc(1.25 / .875);
--text-3xl--line-height: calc(2.25 / 1.875);
--text-5xl: 3rem;
--text-xs: .75rem;
--color-black: #000;
--font-weight-medium: 500;
--font-weight-normal: 400;
--text-3xl: 1.875rem;
--text-6xl--line-height: 1;
--paper: #fff5dd;
--primary: lab(7.78201% -.0000149012 0);
--text-4xl--line-height: calc(2.5 / 2.25);
--foreground: lab(2.75381% 0 0);
--text-base: 1rem;
--secondary: lab(96.52% -.0000298023 .0000119209);
--font-manrope: "Manrope", "Manrope Fallback";
--container-md: 28rem;
--tw-inset-shadow-alpha: 100%;
--tw-ring-shadow: 0 0 #0000;
--sidebar-primary-foreground: lab(98.26% 0 0);
--aspect-video: 16 / 9;
--card: lab(100% 0 0);
--star-gold: #ffb800;
--tw-drop-shadow-alpha: 100%;
}Drop-in prompt
Build a landing page in the visual style of Interactive Money Museum in Dallas | MoMoney.
Reference design system (extracted from the live site):
- Palette: #eeee42, #f2d9ca, #055131, #a9584b, #c89a85
- Typefaces: Archivo Black, Manrope
- 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/museumofmoney-com
