Columbia
Marquee Hero
Loading
Materra · Impact
Raw editorial warmth, bold cream type over deep forest and crimson shadows
Click any value to copy. Roles are suggestions, not gospel.
- #e98f0coklch(72.8% 0.160 66)Dominant
- #fcfcf4oklch(98.9% 0.011 107)Surface
- #78800boklch(57.4% 0.126 114)Ink
- #8fa74aoklch(69.0% 0.123 122)Accent
- #c9cd9eoklch(83.3% 0.063 112)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Bricolagegrotesque 36 Pt Condensed | 112px | 700 | 0.8 | -2.4px | Aa Bb Cc |
| h2 | Manrope | 50px | 700 | 1 | -1.5px | Aa Bb Cc |
| body | Manrope | 16px | 500 | 1.4 | 0 | Aa Bb Cc |
| button | Manrope | 14px | 600 | 1.4 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #e98f0c;
--color-surface: #fcfcf4;
--color-ink: #78800b;
--color-accent: #8fa74a;
--color-detail: #c9cd9e;
}
/* CSS variables exposed by source */
:root {
--size-h2: 3.8rem;
--size-h2-tablet: 2.4rem;
--size-quote: 2.1rem;
--secondary-font: Manrope,sans-serif;
--size-quote-mobile: 1rem;
--size-h1-mobile: 2.15rem;
--size-p1: 1.35rem;
--size-h1-tablet: 3.6rem;
--primary-font: "Bricolage Grotesque",sans-serif;
--size-h2-mobile: 1.6rem;
--size-p1-mobile: .8rem;
--size-quote-tablet: 1.65rem;
--rounded-corner-01: 1.25rem;
--size-h1: 5.7rem;
--size-p1-tablet: 1rem;
--padding-xsmall-tablet: 1.4rem;
--padding-xlarge: 12rem;
--letter-spacing--0-03: -.03em;
--purple-05: #c9b6f6;
--purple-02: #c5bbff;
--padding-small-mobile: 2rem;
--black: #000;
--horiz-scrioll-desktop: 280svh;
--padding-global-small: 4.438rem;
--padding-large: 7.513rem;
--black-2: black;
--padding-large-tablet: 6rem;
--white: #fffcf7;
--brown-01: #824628;
--padding-small-tablet: 3.075rem;
--fillet--2: 2rem;
--cream: #fcf6eb;
--_percentage---100: 100%;
--fillet--0-5-rem: .5rem;
--padding-xlarge-mobile: 5rem;
--container-large-maxwidth: 80rem;
--purple-03: #9b8edd;
--purple-01: #652c8e;
--fillet--1-5-rem: 1.5rem;
--purple-04: #bda7f4;
--padding-large-mobile: 4rem;
--padding-xsmall: 1.4rem;
--white-2: white;
--padding-xsmall-mobile: 1.15rem;
--padding-xxsmall-mobile: .8rem;
--padding-small: 3.075rem;
--accessible-components--dark-grey: #9b9b9b;
--padding-xlarge-tablet: 8rem;
--beige-01: #fffcf7;
--_guardian-variables---font-v2: Georgia,Times,"Times New Roman",serif;
--letter-spacing--0-02: -.02em;
--_percentage---50: 50%;
--fillet--1-rem: 1rem;
--padding-xxsmall-tablet: 1rem;
--padding-xxsmall: 1.1rem;
}Drop-in prompt
Build a landing page in the visual style of Materra · Impact.
Reference design system (extracted from the live site):
- Palette: #e98f0c, #fcfcf4, #78800b, #8fa74a, #c9cd9e
- Typefaces: Bricolagegrotesque 36 Pt Condensed, 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/materra-tech--impact
