GRAZA | High Quality Olive Oil
Split Studio
Loading
Buy Grass Fed Meat Online | Healthy, Pastured Meats Delivered – Grass Roots Farmers' Cooperative
Soft, earthy tones and generous spacing evoke a tranquil, spacious, and thoughtfully curated feeling.
Click any value to copy. Roles are suggestions, not gospel.
- #878139oklch(59.3% 0.094 105)Dominant
- #d7d3a1oklch(85.8% 0.066 104)Surface
- #4e5823oklch(43.9% 0.077 119)Ink
- #8a8f61oklch(63.4% 0.065 113)Accent
- #bcc4b7oklch(81.0% 0.020 133)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Lora | 25px | 300 | 1 | 2px | Aa Bb Cc |
| h2 | Lora | 34px | 300 | 1 | 2px | Aa Bb Cc |
| h3 | Lora | 19px | 300 | 1 | 2px | Aa Bb Cc |
| body | Source Sans Pro | 17px | 400 | 1.4 | 0 | Aa Bb Cc |
| caption | Work Sans | 14px | 600 | 1.42 | 1.6px | Aa Bb Cc |
| button | Source Sans Pro | 17px | 400 | 1.4 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #878139;
--color-surface: #d7d3a1;
--color-ink: #4e5823;
--color-accent: #8a8f61;
--color-detail: #bcc4b7;
}
/* CSS variables exposed by source */
:root {
--colorRteLink: #AA4F37;
--colorInputBgDim: #f2f2f2;
--colorDrawerText: #607556;
--typeBaseWeight: 400;
--colorSaleTagText: #ffffff;
--colorTextBody: #393e46;
--colorInputText: #393e46;
--colorBtnSecondaryText: #ffffff;
--typeBasePrimary: "Source Sans Pro";
--colorDrawerTextDarken: #3c4936;
--colorNav: #ffffff;
--typeBaseSpacing: 0.0em;
--colorDrawerButton: #607556;
--typeBaseFallback: sans-serif;
--colorLargeImageBg: #ffffff;
--color_drawer_button_hover: #8f9e88;
--typeHeaderSpacing: 0.1em;
--colorBody: #ffffff;
--colorBorder: #d4d4d4;
--colorCartDot: #aa4f37;
--colorAnnouncementText: #f8f4f0;
--colorBodyDim: #f2f2f2;
--colorFooterText: #607556;
--typeBaseLineHeight: 1.4;
--colorDrawersDim: #f2f2f2;
--typeBaseSize: 17px;
--colorBtnPrimaryDim: #54664b;
--colorFooter: #f8f4f0;
--colorLink: #393e46;
--typeHeaderPrimary: "Work Sans";
--colorHeroText: #ffffff;
--colorBtnPrimaryText: #ffffff;
--colorDrawerBorder: #f8f4f0;
--colorDrawerButtonText: #ffffff;
--typeHeaderSize: 34px;
--typeHeaderWeight: 600;
--colorSaleTag: #393e46;
--colorBtnSecondaryDim: #2e7c56;
--colorBtnSecondary: #1b4c35;
--colorInputBg: #ffffff;
--colorSmallImageBg: #ffffff;
--colorModalBg: #393e46;
--typeHeaderFallback: sans-serif;
--colorDrawers: #ffffff;
--colorSalePrice: #393e46;
--typeHeaderLineHeight: 1.2;
--colorDrawerTextHover: #AA4F37;
--colorBtnPrimary: #607556;
--colorNavText: #4a4a4a;
--colorInputBgDark: #e6e6e6;
--colorAnnouncement: #607556;
--rb-smart-search-quick-view-product-title-color: #232323;
--rb-smart-search-results-reviews-background-color: #E5E5E5;
--rb-smart-search-results-product-title-color: #232323;
--rb-widget-input-border-focus-color: transparent;
--rc-active-bg: #efefef;
--iconWeight: 3px;
--rb-smart-search-results-pagination-button-text-color: #607556;
--rb-widget-option-background: transparent;
--rc-active-color: #000000;
}Drop-in prompt
Build a landing page in the visual style of Buy Grass Fed Meat Online | Healthy, Pastured Meats Delivered – Grass Roots Farmers' Cooperative.
Reference design system (extracted from the live site):
- Palette: #878139, #d7d3a1, #4e5823, #8a8f61, #bcc4b7
- Typefaces: Lora, Source Sans Pro
- Macrostructure: Split Studio
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/grassrootscoop-com
