Potion
Marquee Hero
Loading
Beard Meats Food
High-contrast brutalist roar, chunky white type on charcoal with neon lime sparks
Click any value to copy. Roles are suggestions, not gospel.
- #bad306oklch(81.9% 0.190 118)Dominant
- #ecfb7eoklch(95.2% 0.150 115)Surface
- #667210oklch(52.4% 0.115 117)Ink
- #747474oklch(55.9% 0.000 90)Accent
- #c4c4c4oklch(82.0% 0.000 90)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h2 | Thunder | 80px | 700 | 0.9 | 0 | Aa Bb Cc |
| body | Roboto | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Roboto | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #bad306;
--color-surface: #ecfb7e;
--color-ink: #667210;
--color-accent: #747474;
--color-detail: #c4c4c4;
}
/* CSS variables exposed by source */
:root {
--text-color--text-primary: #f8f8f8;
--background-color--background-alternate: #f8f8f8;
--border-color--border-primary: #f8f8f8;
--border-color--border-alternate: #1a1a1a;
--text-color--text-success: #027a48;
--background-color--background-secondary: #eee;
--text-color--text-secondary: #f8f8f8;
--text-color--text-error: #b42318;
--text-color--text-alternate: #1a1a1a;
--background-color--background-success: #ecfdf3;
--background-color--background-error: #fef3f2;
--border-color--border-secondary: #aaa;
--background-color--background-primary: #1a1a1a;
--background-color--background-tertiary: #aaa;
--base-color-neutral--neutral-light: #aaa;
--base-color-system--error-red-light: #fef3f2;
--base-color-neutral--black: #1a1a1a;
--black-archive<deleted|variable-dccb7db6>: black;
--base-color-neutral--neutral-lighter: #ccc;
--base-color-neutral--neutral-dark: #444;
--base-color-brand--white: #f8f8f8;
--base-color-brand--black: #1a1a1a;
--base-color-system--error-red: #b42318;
--link-color--link-primary: #f8f8f8;
--base-color-system--success-green-light: #ecfdf3;
--base-color-neutral--white: #f8f8f8;
--base-color-neutral--neutral-darker: #222;
--link-color--link-alternate: #1a1a1a;
--base-color-neutral--neutral-lightest: #eee;
--base-color-neutral--neutral: #666;
--link-color--link-secondary: #aaa;
--base-color-neutral--neutral-darkest: #111;
--base-color-brand--neon: #e0ff00;
--base-color-system--success-green: #027a48;
}Drop-in prompt
Build a landing page in the visual style of Beard Meats Food.
Reference design system (extracted from the live site):
- Palette: #bad306, #ecfb7e, #667210, #747474, #c4c4c4
- Typefaces: Thunder, Roboto
- 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/beardmeatsfood-co-uk
