Buy Grass Fed Meat Online | Healthy, Pastured Meats Delivered – Grass Roots Farmers' CooperativeSplit Studio
Buy Grass Fed Meat Online | Healthy, Pastured Meats Delivered – Grass Roots Farmers' Cooperative
Split Studio
Loading
GRAZA | High Quality Olive Oil
Warm ochre and soft gray, clean sans-serif, open spaciousness, a quiet, natural elegance.
Click any value to copy. Roles are suggestions, not gospel.
- #843c28oklch(44.7% 0.104 36)Dominant
- #e0a899oklch(78.0% 0.070 36)Surface
- #5c2c14oklch(35.3% 0.079 45)Ink
- #937659oklch(58.6% 0.055 66)Accent
- #cecb9aoklch(83.2% 0.065 105)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | ITC Garamond Condensed | 72px | 400 | 1 | -2.16px | Aa Bb Cc |
| h2 | Apercu | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| h3 | GT Alpina Typewriter | 16px | 500 | 1.5 | 0 | Aa Bb Cc |
| body | GT Alpina Typewriter | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | GT Alpina Typewriter | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #843c28;
--color-surface: #e0a899;
--color-ink: #5c2c14;
--color-accent: #937659;
--color-detail: #cecb9a;
}
/* CSS variables exposed by source */
:root {
--color-highlight: #FFF4EC;
--font-body: "GT Alpina Typewriter","monospace";
--color-accent: #9EEF80;
--color-background: #F6E6D9;
--font-heading: "ITC Garamond Condensed","serif";
--font-tag: "Apercu","sans-serif";
--color-stroke: #9FCD7A;
--color-secondary: #FBD535;
--color-header: #FFF4EC;
--color-brand: #D1E030;
--color-text: #3C422E;
--oke-border-width: 1px;
--oke-text-regular: 16px;
--tw-ring-shadow: 0 0 #0000;
--inner-height: 11px;
--aa-font-weight-bold: 700;
--aa-font-size: calc(16*1px);
--checkout-input-background-color-mode: transparent;
--aa-base-z-index: 9999;
--oke-filter-backgroundColor: #f6e6d9;
--bar-color: currentColor;
--oke-stars-foregroundColor: #3c422e;
--aa-panel-border-color-alpha: 0.3;
--aa-font-weight-medium: 500;
--aa-description-highlight-background-color-alpha: 0.5;
--header-link-opacity: 1;
--aa-scrollbar-track-background-color-rgb: 234,234,234;
--oke-button-borderColorActive: #3c422e;
--tw-border-spacing-x: 0;
--aa-scrollbar-width: 13px;
--aa-input-icon-size: 20px;
--oke-filter-searchHighlightColor: #b2f9e9;
--oke-button-textColorHover: #3c422e;
--oke-text-small: 14px;
--aa-background-color-alpha: 1;
--tw-ring-color: rgb(59 130 246/0.5);
--outer-width: calc(16px + 0*2);
--aa-selected-color-rgb: 179,173,214;
--aa-overlay-color-alpha: 0.4;
--oke-button-borderColor: #3c422e;
--oke-border-color: #3c422e;
--swiper-theme-color: #007aff;
--oke-starRating-spaceBelow: 0;
--tw-rotate: 0;
--oke-attributeBar-borderColor: undefined;
--tw-ring-offset-color: #fff;
--column-count: 12;
--oke-button-textColorActive: #3c422e;
--inner-container: 80%;
--aa-icon-color-rgb: 119,119,163;
--oke-widget-spaceAbove: 20px;
--oke-widget-spaceBelow: 20px;
--aa-scrollbar-thumb-background-color-alpha: 1;
--oke-button-fontWeight: 500;
--oke-avatar-size: 48px;
--aa-spacing-half: calc(calc(16*1*1px)/2);
--tw-ring-offset-width: 0px;
--oke-avatar-placeholderTextColor: #f6e6d9;
--aa-text-color-rgb: 38,38,39;
--aa-description-highlight-background-color-rgb: 245,223,77;
}Drop-in prompt
Build a landing page in the visual style of GRAZA | High Quality Olive Oil.
Reference design system (extracted from the live site):
- Palette: #843c28, #e0a899, #5c2c14, #937659, #cecb9a
- Typefaces: ITC Garamond Condensed, Apercu, GT Alpina Typewriter
- 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/graza-co
