Cooking Nytimes
Bento Grid
Loading
Siteinspire
Cool, stark grey geometry and crisp sans-serif, a supremely rational, uncluttered space.
Click any value to copy. Roles are suggestions, not gospel.
- #ec4545oklch(63.3% 0.204 25)Dominant
- #34a47coklch(64.5% 0.117 165)Surface
- #f46c6coklch(69.7% 0.168 22)Ink
- #8c745coklch(57.5% 0.046 67)Accent
- #bbbbbcoklch(79.2% 0.001 286)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | fontSctoGroteskA | 24px | 400 | 1.33 | -0.4px | Aa Bb Cc |
| body | fontSctoGroteskA | 14px | 400 | 1.43 | -0.4px | Aa Bb Cc |
| caption | fontSctoGroteskA | 14px | 400 | 1.43 | -0.4px | Aa Bb Cc |
| button | fontSctoGroteskA | 14px | 400 | 1.43 | -0.4px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #ec4545;
--color-surface: #34a47c;
--color-ink: #f46c6c;
--color-accent: #8c745c;
--color-detail: #bbbbbc;
}
/* CSS variables exposed by source */
:root {
--radius: .5rem;
--tw-ring-offset-shadow: 0 0 #0000;
--sidebar-background: 0 0% 98%;
--tw-ring-shadow: 0 0 #0000;
--sidebar-border: 220 13% 91%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-foreground: 240 5.3% 26.1%;
--tw-skew-x: 0;
--sidebar-accent: 240 4.8% 95.9%;
--tw-shadow: 0 0 #0000;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--tw-scroll-snap-strictness: proximity;
--sidebar-accent-foreground: 240 5.9% 10%;
--tw-scale-x: 1;
--tw-border-spacing-x: 0;
--tw-shadow-colored: 0 0 #0000;
--tw-border-spacing-y: 0;
--tw-scale-y: 1;
--tw-skew-y: 0;
--tw-ring-color: #3b82f680;
--tw-translate-y: 0;
--sidebar-primary: 240 5.9% 10%;
--sidebar-ring: 217.2 91.2% 59.8%;
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
}Drop-in prompt
Build a landing page in the visual style of Siteinspire.
Reference design system (extracted from the live site):
- Palette: #ec4545, #34a47c, #f46c6c, #8c745c, #bbbbbc
- Typefaces: fontSctoGroteskA
- 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/siteinspire-com
