Barbican Org Uk
Specimen
Quiet, architectural clarity: muted greens and grays, precise sans-serifs, expansive horizontal fields.




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 |
|---|---|---|---|---|---|---|
| h1 | LACMA-Bold | 32px | 500 | 1.25 | 0 | Aa Bb Cc |
| h2 | LACMA-Bold | 20px | 500 | 1.13 | 0 | Aa Bb Cc |
| h3 | LACMA-Bold | 20px | 500 | 1.13 | 0 | Aa Bb Cc |
| body | BauOT | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | LACMA-Bold | 14px | 400 | 1.13 | 0 | Aa Bb Cc |
| button | LACMA-Bold | 30px | 400 | 1 | 0 | Aa Bb Cc |
Max content width 1688px
:root {
--color-dominant: #ec5464;
--color-surface: #1a5757;
--color-ink: #c6d4ec;
--color-accent: #8e8d50;
--color-detail: #a0bacd;
}
/* CSS variables exposed by source */
:root {
--color-neutral-100: oklch(96.7% 0 0);
--text-2xl: 1.5rem;
--spacing-gutter-y: calc(0.25rem * 16);
--font-lacma: "LACMA-Bold";
--text-lg: 1.125rem;
--font-lacma-underline: "LACMA-Underline";
--color-lacma-red: #E81A2E;
--text-5xl--line-height: 1;
--text-2xl--line-height: calc(2 / 1.5);
--text-base--line-height: calc(1.5 / 1);
--spacing: 0.25rem;
--color-neutral-200: oklch(92.2% 0 0);
--spacing-lh-1: 1.4em;
--spacing-site: 1792px;
--text-xl--line-height: calc(1.75 / 1.25);
--font-weight-semibold: 600;
--text-sm: 0.875rem;
--font-lacma-underline-icons: "LACMA-Underline-Icons";
--spacing-alert: 0px;
--spacing-gutter: calc(0.25rem * 8);
--text-lg--line-height: calc(1.75 / 1.125);
--font-lacma-icons: "LACMA-Bold-Icons";
--font-sans: "BauOT";
--text-4xl: 2.313rem;
--color-lacma-gray: oklch(96.7% 0 0);
--font-weight-bold: 700;
--text-sm--line-height: calc(1.25 / 0.875);
--text-2xs: max(11px,0.6rem);
--text-3xl--line-height: calc(2.25 / 1.875);
--text-5xl: 3.325rem;
--text-3xl: 1.875rem;
--text-xs: 0.785rem;
--spacing-lh-2: 2.8em;
--text-xs--line-height: calc(1 / 0.75);
--font-weight-medium: 500;
--font-weight-normal: 400;
--color-neutral-400: oklch(70.8% 0 0);
--radius-xs: 0.125rem;
--spacing-margin: calc(0.25rem * 10);
--text-2xs--line-height: 1.4;
--text-4xl--line-height: calc(2.5 / 2.25);
--text-xl: 1.25rem;
--spacing-lh-half: 0.7em;
--text-base: 1rem;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-inset-shadow-alpha: 100%;
--tw-ring-shadow: 0 0 #0000;
--tw-drop-shadow-alpha: 100%;
--default-transition-timing-function: cubic-bezier(0.4,0,0.2,1);
--lacma-input-padding-x: 0.75rem;
--lacma-checkbox-size: 0.75rem;
--tw-outline-style: solid;
--lacma-filter-padding: 0.775rem 0.75rem 0.475rem 0.75rem;
--ease-in: cubic-bezier(0.4,0,1,1);
--tw-inset-ring-shadow: 0 0 #0000;
--tw-translate-z: 0;
--tracking-wide: 0.025em;
--tw-translate-y: 0;
--ease-out: cubic-bezier(0,0,0.2,1);
--tw-inset-shadow: 0 0 #0000;
}Drop-in prompt
Build a landing page in the visual style of Lacma.
Reference design system (extracted from the live site):
- Palette: #ec5464, #1a5757, #c6d4ec, #8e8d50, #a0bacd
- Typefaces: LACMA-Bold, BauOT
- Macrostructure: Specimen
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/lacma-org--faq