Heatherwick
Portfolio Grid
Loading
Snohetta
Deep charcoal stillness, precise sans-serif geometry, expansive gallery of understated impact.
Click any value to copy. Roles are suggestions, not gospel.
- #a45c1eoklch(54.8% 0.119 56)Dominant
- #643411oklch(38.0% 0.083 53)Surface
- #bea078oklch(72.3% 0.065 74)Ink
- #6494acoklch(64.1% 0.063 231)Accent
- #9cb6ccoklch(76.4% 0.043 244)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Dovre | 60px | 300 | 1.03 | 0 | Aa Bb Cc |
| h2 | Dovre | 22px | 300 | 1.45 | 0 | Aa Bb Cc |
| h3 | Dovre | 16px | 300 | 1.4 | 0 | Aa Bb Cc |
| body | Dovre | 22px | 300 | 1.45 | 0 | Aa Bb Cc |
| button | Dovre | 22px | 300 | 1.45 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #a45c1e;
--color-surface: #643411;
--color-ink: #bea078;
--color-accent: #6494ac;
--color-detail: #9cb6cc;
}
/* CSS variables exposed by source */
:root {
--color-accent: #42ff00;
--color-grey-1: #757575;
--color-background: #fff;
--color-stroke: #dfdfdf;
--color-grey-2: #949494;
--color-area-bg: #f3f3f3;
--color-foreground: #000;
--tw-ring-offset-shadow: 0 0 #0000;
--vh: 9px;
--tw-ring-shadow: 0 0 #0000;
--tw-skew-x: 0;
--tw-shadow: 0 0 #0000;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--tw-scroll-snap-strictness: proximity;
--tw-border-spacing-x: 0;
--tw-scale-x: 1;
--tw-shadow-colored: 0 0 #0000;
--tw-border-spacing-y: 0;
--tw-scale-y: 1;
--tw-skew-y: 0;
--tw-ring-color: rgba(59,130,246,.5);
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
}Drop-in prompt
Build a landing page in the visual style of Snohetta.
Reference design system (extracted from the live site):
- Palette: #a45c1e, #643411, #bea078, #6494ac, #9cb6cc
- Typefaces: Dovre
- Macrostructure: Portfolio Grid
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/snohetta-com
