Organic Grocery Delivery - Meal solutions and grocery items from the Deli, Bakery, Pantry, and more.Bento Grid
Organic Grocery Delivery - Meal solutions and grocery items from the Deli, Bakery, Pantry, and more.
Bento Grid
Loading
Benvenusa Italian Wines
Quiet, charcoal topography—crisp sans-serif layers on expansive, subtly textured grayscale.
Click any value to copy. Roles are suggestions, not gospel.
- #ab04eboklch(56.7% 0.283 311)Dominant
- #cc64f4oklch(68.5% 0.220 316)Surface
- #4c046coklch(32.2% 0.157 311)Ink
- #7c757eoklch(57.2% 0.016 319)Accent
- #cacacaoklch(83.9% 0.000 90)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Syllabus | 77px | 400 | 1 | 0 | Aa Bb Cc |
| body | DieGrotesk | 16px | 400 | 1 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #ab04eb;
--color-surface: #cc64f4;
--color-ink: #4c046c;
--color-accent: #7c757e;
--color-detail: #cacaca;
}
/* CSS variables exposed by source */
:root {
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--scroll-gap: 0;
--tw-skew-x: 0;
--producer-top: 18vh;
--tw-shadow: 0 0 #0000;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--nav-height: min(7vh, 70px);
--tw-scroll-snap-strictness: proximity;
--tw-scale-x: 1;
--tw-border-spacing-x: 0;
--tw-shadow-colored: 0 0 #0000;
--footer-height: 190px;
--tw-border-spacing-y: 0;
--page-top: 16vh;
--tw-scale-y: 1;
--tw-skew-y: 0;
--tw-ring-color: rgb(59 130 246 / .5);
--section-spacing: 20px;
--tw-translate-y: 0;
--swiper-theme-color: #007aff;
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
}Drop-in prompt
Build a landing page in the visual style of Benvenusa Italian Wines.
Reference design system (extracted from the live site):
- Palette: #ab04eb, #cc64f4, #4c046c, #7c757e, #cacaca
- Typefaces: Syllabus, DieGrotesk
- 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/benvenusa-com
