Hermanmiller
Bento Grid
Loading
Office Furniture That Works | Canada Office Furniture | Branch
Warm, textured neutrals and clean, humanist type create a serene, thoughtfully-curated space.
Click any value to copy. Roles are suggestions, not gospel.
- #872414oklch(41.7% 0.137 32)Dominant
- #d3bf8doklch(80.9% 0.070 89)Surface
- #4c220boklch(30.7% 0.072 47)Ink
- #8b8278oklch(61.2% 0.018 70)Accent
- #eeece5oklch(94.3% 0.010 94)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Frank Ruhl Libre | 52px | 400 | 1.15 | -1.35px | Aa Bb Cc |
| h2 | Frank Ruhl Libre | 40px | 400 | 1.15 | -1.2px | Aa Bb Cc |
| h3 | Frank Ruhl Libre | 32px | 400 | 1.15 | -0.96px | Aa Bb Cc |
| body | Quicksand | 14px | 400 | 1.4 | 0 | Aa Bb Cc |
| button | Quicksand | 12px | 400 | 1.4 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #872414;
--color-surface: #d3bf8d;
--color-ink: #4c220b;
--color-accent: #8b8278;
--color-detail: #eeece5;
}
/* CSS variables exposed by source */
:root {
--primary-light-gray: #f3f0ed;
--font-family-body: 'Quicksand', sans-serif;
--primary-green-50-hex: #98A19B;
--font-size-body-s: 12px;
--primary-blue: #8DC0D2;
--font-size-h5-desktop: 20px;
--font-weight-header: 700;
--font-size-h2-desktop: 40px;
--font-size-h6-desktop: 16px;
--font-size-h3-desktop: 32px;
--font-size-h1-desktop: 60px;
--font-size-body-m: 14px;
--primary-ultra-dark-gray: #222326;
--primary-cream: #F3EEEA;
--font-weight-body: 400;
--font-size-h6-mobile: 12px;
--font-size-h2-mobile: 28px;
--font-size-h2-tablet: 36px;
--font-size-h4-mobile: 20px;
--font-size-h6-tablet: 14px;
--font-size-h5-mobile: 16px;
--font-size-h1-mobile: 42px;
--font-size-h3-mobile: 24px;
--font-size-h4-desktop: 26px;
--font-size-body-xl: 20px;
--primary-green-20-hex: #D6D9D7;
--primary-green: #314438;
--primary-orange: #C66E4E;
--font-body-style: normal;
--primary-branch-green: #314438;
--font-size-h1-tablet: 54px;
--primary-black: #000000;
--primary-green-50: rgba(49, 68, 56, 0.50);
--primary-white: #ffffff;
--font-size-h3-tablet: 28px;
--font-size-h5-tablet: 18px;
--font-family-header-special: 'Koulen', sans;
--primary-green-20: rgba(49, 68, 56, 0.20);
--font-size-h4-tablet: 22px;
--font-family-header: 'Frank Ruhl Libre', serif;
--font-size-body-l: 16px;
--desktop-content-max-width-vw: 77.77vw;
--oke-border-width: 1px;
--oke-text-regular: 14px;
--gallery-image-width-small-desktop: calc(100vw - 540px);
--menu-mobile-letter-spacing-multiplier: .05;
--content-main-color: #314438;
--neutral-light-gray: #CCC;
--oke-filter-backgroundColor: #fff;
--oke-stars-foregroundColor: #314438;
--desktop-content-max-width: 77.77%;
--oke-button-borderColorActive: #314438;
--oke-filter-searchHighlightColor: #adb4af;
--oke-button-textColorHover: #314438;
--oke-text-small: 14px;
--tablet-and-above-content-top-bottom-padding: 80px;
--mobile-content-left-right-margin: 24px;
--oke-button-borderColor: #314438;
--swiper-theme-color: #007aff;
--oke-border-color: #d6dad7;
}Drop-in prompt
Build a landing page in the visual style of Office Furniture That Works | Canada Office Furniture | Branch.
Reference design system (extracted from the live site):
- Palette: #872414, #d3bf8d, #4c220b, #8b8278, #eeece5
- Typefaces: Frank Ruhl Libre, Quicksand
- 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/branchfurniture-ca
