Hermanmiller
Bento Grid
Soft, muted ivory expanse; clean, elegant sans-serif; spacious, airy, quietly sophisticated.




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 | brown | 28px | 400 | 1.2 | -0.28px | Aa Bb Cc |
| h2 | brown | 10px | 400 | 1.4 | 0.5px | Aa Bb Cc |
| h3 | brown | 10px | 400 | 1.4 | 0.5px | Aa Bb Cc |
| body | brown | 12px | 400 | 1.4 | 0 | Aa Bb Cc |
| button | brown | 10px | 400 | 1.4 | 0.5px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #ae7e50;
--color-surface: #fcfbf4;
--color-ink: #573f28;
--color-accent: #93826f;
--color-detail: #9caccc;
}
/* CSS variables exposed by source */
:root {
--color-gray: rgba(0, 0, 0, .08);
--color-white: rgb(253, 252, 247);
--color-red-rgb: 226, 13, 0;
--color-black-rgb: 0, 0, 0;
--font-brown: "brown", "brown Fallback";
--color-border-rgb: 0, 0, 0;
--color-error: rgb(204, 102, 119);
--color-border: rgba(0, 0, 0, .1);
--color-light-gray-rgb: 0, 0, 0;
--color-focused: rgb(0, 128, 255);
--color-placeholder-dark: #797876;
--color-red: rgb(226, 13, 0);
--color-black-05-rgb: 240, 239, 235;
--color-black: rgb(0, 0, 0);
--font-family-brown: "brown", "brown Fallback", Futura, "Trebuchet MS", Arial, sans-serif;
--color-warning: rgb(255, 165, 0);
--color-error-rgb: 204, 102, 119;
--color-light-gray: rgba(0, 0, 0, .03);
--color-success-rgb: 51, 172, 107;
--color-dark-brown: rgb(43, 29, 23);
--color-brown-rgb: 71, 49, 39;
--color-focused-rgb: 0, 128, 255;
--color-placeholder: #999;
--color-success: rgb(51, 172, 107);
--color-gray-rgb: 0, 0, 0;
--color-brown: rgb(71, 49, 39);
--color-dark-brown-rgb: 43, 29, 23;
--color-black-05: rgb(240, 239, 235);
--color-warning-rgb: 255, 165, 0;
--color-black-hover: rgba(0, 0, 0, .5);
--color-white-rgb: 253, 252, 247;
--easeOutQuart: cubic-bezier(.165, .84, .44, 1);
--grid-column-gap: 1.6rem;
--backdrop-z-index: 99;
--header-height: calc(4.2rem + 2.8rem);
--site-padding: 1.6rem;
--module-gap: 8.8rem;
--dialog-z-index: 100;
--usp-height: 2.8rem;
--drawer-max-width-large: calc(100vw / 3);
--dialog-height: calc(100dvh - calc(4.2rem + 2.8rem));
--opacity: .35;
--control-padding-x: .5rem;
--modal-width: calc(100vw / 3);
--viewport-bottom-inset: 0px;
--sw: 1;
--control-padding-y: .3rem;
--grid-column-width-12: calc(100vw / 12);
--ratio-product: 1.25;
--grid-column-width: calc(100vw / 12);
--grid-column-width-16: calc(100vw / 16);
--page-max-width: 52ch;
--drawer-max-width: calc((100vw / 12) * 3);
--header-z-index: 50;
--button-height: 3.2rem;
--grid-column-width-8: calc(100vw / 8);
}Drop-in prompt
Build a landing page in the visual style of Måttbeställda Gardiner – Perfekt Passform & Stil | Gardinex.
Reference design system (extracted from the live site):
- Palette: #ae7e50, #fcfbf4, #573f28, #93826f, #9caccc
- Typefaces: brown
- Macrostructure: Bento 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/gardinex-com