Bellroy
Feature Stack
Loading
Peakdesign
Cool, spacious, technical—crisp sans-serif geometry on a muted, earthy, stone-toned field.
Click any value to copy. Roles are suggestions, not gospel.
- #a16b3doklch(57.5% 0.093 60)Dominant
- #573a17oklch(37.4% 0.064 69)Surface
- #daba9eoklch(80.9% 0.053 63)Ink
- #a08464oklch(63.1% 0.057 70)Accent
- #e0dddboklch(89.9% 0.004 56)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Geist | 26px | 700 | 1.4 | 0 | Aa Bb Cc |
| h2 | Bryant | 24px | 700 | 1 | 0 | Aa Bb Cc |
| body | Geist | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Geist | 16px | 400 | 1.2 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #a16b3d;
--color-surface: #573a17;
--color-ink: #daba9e;
--color-accent: #a08464;
--color-detail: #e0dddb;
}
/* CSS variables exposed by source */
:root {
--color-dark: #000;
--color-light: #fff;
--z-index-overlay: 10;
--z-index-highest: 100;
--z-index-dialog: 20;
--aside-width: 500px;
--cart-aside-summary-height-with-discount: 300px;
--z-index-dropdown: 30;
--z-index-aside: 31;
--cart-aside-summary-height: 250px;
--z-index-header: 20;
--announcement-bar-height: 40px;
--header-bottom: 121px;
--swiper-theme-color: #007aff;
--grid-item-width: 355px;
--z-index-popover: 30;
--sa-uid: '0-6fc02185-88bd-524d-60b4-9cc843565ffd';
}Drop-in prompt
Build a landing page in the visual style of Peakdesign.
Reference design system (extracted from the live site):
- Palette: #a16b3d, #573a17, #daba9e, #a08464, #e0dddb
- Typefaces: Geist, Bryant
- Macrostructure: Feature Stack
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/peakdesign-com
