Better customer experiences | Sierra
Bento Grid
Deep charcoal expanse—crisp, geometric sans serif, subtle gradient depth.




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 | Ginto Nord | 96px | 900 | 1 | 0 | Aa Bb Cc |
| h2 | Neue Montreal | 40px | 700 | 1.2 | 0 | Aa Bb Cc |
| h3 | Ginto Nord | 80px | 900 | 1.1 | 0 | Aa Bb Cc |
| body | Neue Montreal | 18px | 400 | 1.78 | 0 | Aa Bb Cc |
| button | Neue Montreal | 24px | 400 | 1.33 | 0 | Aa Bb Cc |
Max content width 1708px
:root {
--color-dominant: #5f6bdc;
--color-surface: #f1b28b;
--color-ink: #650e0c;
--color-accent: #9a7155;
--color-detail: #abd3b2;
}Drop-in prompt
Build a landing page in the visual style of Burb | Community Growth Tools for Creators.
Reference design system (extracted from the live site):
- Palette: #5f6bdc, #f1b28b, #650e0c, #9a7155, #abd3b2
- Typefaces: Ginto Nord, Neue Montreal
- 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/burb-co