Unfold No
Feature Stack
Loading
Click any value to copy. Roles are suggestions, not gospel.
- #9bac0coklch(70.7% 0.160 117)Dominant
- #eaf683oklch(94.0% 0.140 114)Surface
- #154c63oklch(39.2% 0.068 230)Ink
- #a45c5boklch(55.7% 0.095 21)Accent
- #bbbcbcoklch(79.4% 0.001 197)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Commercial Gräphik Web | 75px | 400 | 1.05 | -5.2696px | Aa Bb Cc |
| h3 | Commercial Gräphik Web | 16px | 400 | 1 | 0 | Aa Bb Cc |
| body | Commercial Gräphik Web | 16px | 400 | 1 | 0 | Aa Bb Cc |
| button | Commercial Gräphik Web | 16px | 400 | 1 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #9bac0c;
--color-surface: #eaf683;
--color-ink: #154c63;
--color-accent: #a45c5b;
--color-detail: #bbbcbc;
}
/* CSS variables exposed by source */
:root {
--grid-padding: calc(clamp(8px, 4.412px + 100vw * 0.0092, 20px) - 0.5 * clamp(4px, -0.758px + 100vw * 0.0122, 20px));
--navbar-width: calc(10 * (calc(100vw - 0px) - 2 * calc(clamp(8px, 4.412px + 100vw * 0.0092, 20px) - 0.5 * clamp(4px, -0.758px + 100vw * 0.0122, 20px))) / 24 - clamp(4px, -0.758px + 100vw * 0.0122, 20px));
--page-border-radius: 13px;
--navbar-border-radius: 20px;
--case-study-navbar-height: clamp(46px, 43.036px + 100vw * 0.0076, 56px);
--navbar-bottom: clamp(24px, 21.621px + 100vw * 0.0061, 32px);
--grid-half-gap: calc(0.5 * clamp(4px, -0.758px + 100vw * 0.0122, 20px));
--grid-width: calc(calc(100vw - 0px) - 2 * clamp(8px, 4.412px + 100vw * 0.0092, 20px));
--grid-gap: clamp(4px, -0.758px + 100vw * 0.0122, 20px);
--navbar-width-cols: 10;
--grid-margin: clamp(8px, 4.412px + 100vw * 0.0092, 20px);
--navbar-height: 46px;
--100vw: calc(100vw - 0px);
--grid-columns: 24;
}Drop-in prompt
Build a landing page in the visual style of We are Büro.
Reference design system (extracted from the live site):
- Palette: #9bac0c, #eaf683, #154c63, #a45c5b, #bbbcbc
- Typefaces: Commercial Gräphik Web
- 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/burocratik-com
