---
title: "GRAZA design system"
variant: extended
source: https://www.graza.co/
captured_at: 2026-10-12
theme: light
industry: food-beverage
generator: Design DNA (https://four.wiralomi.com/style/graza-co)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# GRAZA · Design System

> Fresh olive oil, with a playful editorial edge

**Theme:** light · **Industry:** food-beverage · **Source:** https://www.graza.co/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

GRAZA pairs fresh olive oil products with a playful, editorial identity built from warm paper tones, vivid citrus accents, and expressive typography. The homepage shifts between cinematic food imagery, spacious product storytelling, hand-drawn illustrations, and direct shopping links.

## North star

Pair warm, open editorial space with expressive olive-ink type and selective lime shopping cues.

## Overview

The page is anchored by a warm peach canvas (#f6e6d9) and deep olive-ink typography (#3c422e), creating a tactile, food-forward foundation. Acid lime (#d1e030) marks prominent promotional bands and shopping actions, while the softer green and yellow accents appear in selected sections and details. Large condensed Garamond headlines contrast with the typewriter-like body face, giving product stories a distinctive, printed editorial character. The layout alternates broad, calm stretches of canvas with vivid bands, grouped product cards, and occasional full-bleed photography. Product imagery is clear and appetizing; illustrations add hand-drawn personality rather than competing with the products. The overall composition is spacious, yet not sterile: repeated labels, playful copy, thin rules, and oversized brand lettering keep the page lively. Keep the measured palette intact and treat darker screenshot colors as photographic content, not brand surfaces.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Olive Ink | `#3c422e` | `--color-olive-ink` | brand | Primary text, logo, product copy, navigation on pale surfaces, and fine outlines. |
| Peach Paper | `#f6e6d9` | `--color-peach-paper` | surface | Main page canvas and the continuous backdrop for editorial and product sections. |
| Citrus Lime | `#d1e030` | `--color-citrus-lime` | accent | High-visibility promotional section bands and primary shopping actions. |
| Stone Taupe | `#948a82` | `--color-stone-taupe` | neutral | Measured inverse section surface; use as a restrained contrast band, not a dominant canvas. |
| Cream Foam | `#fff4ec` | `--color-cream-foam` | surface | Light card and control fill, pale navigation text over imagery, and fine borders. |
| Herb Green | `#9eef80` | `--color-herb-green` | accent | Secondary green accent in selected sections, footer details, and small UI highlights. |
| Marigold Pop | `#fbd535` | `--color-marigold-pop` | accent | Secondary yellow section accent, echoing product-label color without replacing the lime CTA. |

### Semantic aliases

`--color-canvas` → `#f6e6d9` (Peach Paper) · `--color-surface` → `#948a82` (Stone Taupe) · `--color-surface-2` → `#fff4ec` (Cream Foam) · `--color-text` → `#3c422e` (Olive Ink) · `--color-text-muted` → `#fff4ec` (Cream Foam) · `--color-border` → `#fff4ec` (Cream Foam) · `--color-accent` → `#d1e030` (Citrus Lime) · `--color-accent-2` → `#9eef80` (Herb Green) · `--color-accent-3` → `#fbd535` (Marigold Pop)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#3c422e` | `#f6e6d9` | 8.57:1 | AAA |
| `#3c422e` | `#948a82` | 3.09:1 | AA-large |
| `#3c422e` | `#fff4ec` | 9.65:1 | AAA |
| `#fff4ec` | `#f6e6d9` | 1.13:1 | fail |
| `#fff4ec` | `#948a82` | 3.12:1 | AA-large |
| `#d1e030` | `#f6e6d9` | 1.2:1 | fail |
| `#d1e030` | `#948a82` | 2.32:1 | fail |
| `#d1e030` | `#fff4ec` | 1.35:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| GT Alpina Typewriter | `--font-body` | webfont | 400, 500 | Body copy, navigation, buttons, links, and small product text | Special Elite |
| ITC Garamond Condensed | `--font-display` | webfont | 400, 500 | Display headlines, section titles, and prominent product names | Cormorant Garamond |
| Apercu | `--font-apercu` | webfont | 400 | Small uppercase captions and compact labels | DM Sans |

- **GT Alpina Typewriter:** Monospace character; use regular body text, medium navigation and buttons, and uppercase link labels.
- **ITC Garamond Condensed:** Use expressive condensed serif forms, regular-to-medium weights, tight display tracking, and sentence case.
- **Apercu:** Restrained sans-serif utility face; keep captions uppercase and visually secondary.

### Type scale — Perfect Fifth (ratio ≈ 1.496, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 120px | 400 | 1 | -0.03em | — | ITC Garamond Condensed | Oversized brand wordmark-style statements and major display moments. |
| h1 | 102px | 500 | 0.9 | -0.021em | — | ITC Garamond Condensed | Hero headline and primary page-level statement. |
| h2 | 72px | 400 | 1 | -0.03em | — | ITC Garamond Condensed | Large section headlines and editorial statements. |
| h3 | 48px | 400 | 1 | 0 | — | ITC Garamond Condensed | Product names and prominent subsection headings. |
| h4 | 46px | 400 | 1 | -0.031em | — | ITC Garamond Condensed | Secondary product and editorial headings. |
| body | 16px | 400 | 1.5 | 0 | — | GT Alpina Typewriter | Product descriptions, explanatory copy, and supporting stories. |
| caption | 13px | 400 | 1 | 0 | uppercase | Apercu | Uppercase category, product, and metadata labels. |
| button | 16px | 500 | 1.5 | 0 | — | GT Alpina Typewriter | Shopping actions and prominent interactive controls. |
| nav | 16px | 500 | 1.5 | 0 | — | GT Alpina Typewriter | Header navigation and compact menu labels. |
| link | 16px | 500 | 1 | 0 | uppercase | GT Alpina Typewriter | Uppercase inline and section-level shopping links. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 4, 8, 10, 12, 16, 20, 24, 30, 32, 35, 36, 40, 48, 60, 68 px.
- Section rhythm 35px · element gap 68px · card padding — · max content width 1380px.

The measured page max width is 1380px, with a spacious density and a 4px base spacing unit. The homepage uses a long vertical sequence of mostly full-width sections, shifting from a cinematic full-bleed hero to centered product storytelling, multi-column product cards, and a broad content feed. Product groupings use three columns; the footer divides into three areas. Preserve broad open canvas stretches between denser bands, and use centered or left-aligned headings according to each section rather than imposing one alignment throughout.

## Shape & elevation

- Radius: button `10px` · input `8px` · card `20px` · media `20px` · xs `8px` · sm `10px` · md `20px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.25s ease-in-out` on interactive elements.

The system reads mostly flat, with color bands and imagery doing the work of separating sections. Use fine olive-ink outlines and occasional dashed card borders instead of pronounced shadows. Cards and media have measured rounded treatments, while the header can layer over photography. Preserve clear contrast between flat peach canvas, lime bands, and image-led regions.

## Imagery

Use appetizing, natural-light product and food photography, including close-up cooking scenes and clear bottle imagery. Hero and sourcing sections can use full-bleed video or photography with a darkened overlay and light text. Keep product images framed cleanly within light cards. Hand-drawn olive and character illustrations provide small, playful narrative moments; they are illustrative, not the source of the core palette.

## Components

### Overlay navigation

Place the GRAZA wordmark at the left and compact shopping links, utility icons, and a pale rounded cart control over hero photography.

### Lime shopping CTA

Use a high-contrast #d1e030 pill-shaped action with olive-ink text and a fine outline for primary shopping prompts.

### Editorial product card

Group bottle photography, uppercase category and price captions, condensed product name, and short typewriter description on the peach canvas.

### Outline product link

Use olive-ink text and a fine or dashed outline for secondary product actions; keep typography direct and compact.

### Illustrated fact panel

Pair a hand-drawn olive-themed illustration with a brief fact and small navigation controls in a spacious canvas section.

### Newsletter form

Use a bordered email input, typewriter-style text, and a small bright green submit cue in the footer.

### Social image feed

Show a horizontal row of varied food and lifestyle thumbnails beneath a small editorial heading and follow link.

### Measured component styles

- **Primary button** (“Cart [0]”): background #fff4ec · text #3c422e · border 1px solid #3c422e · radius 32px · padding 0px · 500 16px GT Alpina Typewriter
- **Link** (“Shop The Trio”): transparent background · text #3c422e · radius 0px · padding 0px · 400 16px GT Alpina Typewriter
- **Input**: transparent background · text #3c422e · border 1px solid #3c422e · radius 8px · padding 16px · 500 16px GT Alpina Typewriter
- **Card** (“Shop The Trio”): transparent background · text #3c422e · border 1px dashed #3c422e · radius 20px · padding 0px · 400 16px GT Alpina Typewriter
- **Navigation item** (“Shop Get Refills About Glog Cart [0]”): transparent background · text #fff4ec · radius 0px · padding 0px · 400 16px GT Alpina Typewriter

## Do

- Keep #f6e6d9 as the dominant canvas.
- Use #3c422e for core text and fine outlines.
- Reserve #d1e030 for high-priority promotional moments.
- Set large headlines in a condensed editorial serif.
- Pair product photography with concise typewriter-style copy.
- Let illustrations add personality without displacing product imagery.

## Don't

- Do not turn photographic shadow colors into interface palette colors.
- Do not use lime as a continuous page background.
- Do not crowd the open editorial sections with dense copy.
- Do not replace the distinct headline and body type contrast with one font.
- Do not add heavy shadows or glossy interface effects.
- Do not make product cards look like generic dashboard tiles.

## Agent prompt

Build a new GRAZA-style food and beverage page with Peach Paper (#f6e6d9) as the main canvas and Olive Ink (#3c422e) for text and outlines. Use Citrus Lime (#d1e030) selectively for primary shopping actions and promotional bands; keep Herb Green (#9eef80) and Marigold Pop (#fbd535) as smaller accents. Set display headlines in a condensed editorial serif and body, navigation, and buttons in a typewriter-like monospace; use a clean sans for small uppercase captions. Alternate spacious editorial sections with product photography, structured bottle cards, and occasional full-bleed food imagery. Add simple hand-drawn illustrations as supporting details. Favor flat color fields, thin borders, rounded controls, and open section rhythm. Make shopping links obvious without making the page feel like a conventional storefront template.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed cinematic cooking footage with logo and navigation overlaid. | Persistent shopping navigation, Hero shopping CTA | Darkened food imagery, Light logo and nav, Lime pill CTA |
| 2 | feature-grid | Multi-column editorial modules on the peach canvas, including a bright product feature. | Shop featured set, Browse editorial stories | Centered headings, Lime feature band, Product and lifestyle imagery |
| 3 | announcement | Slim, full-width text strip between larger sections. | Share harvest location, Show harvest season | Pale strip, Small typewriter text, Fine separators |
| 4 | product-grid | Three centered product columns on the peach canvas. | Compare oil types, Open product details | Bottle photography, Condensed names, Small category and price labels |
| 5 | other | Open editorial field with a large illustration and small fact-copy block. | Browse short facts, Use previous and next controls | Hand-drawn illustration, Fine outlined controls, Sparse text |
| 6 | feature-split | Bright lime split section with typographic cooking terms beside a recipe image. | Explore recipe ideas, Visit the blog | Repeated top label, Oversized mixed headings, Image-led recipe card |
| 7 | feature-split | Full-bleed orchard imagery with a text block and outlined origin panel. | Learn about the makers, Review origin details | Photographic background, Darkened overlay, Light outlined information card |
| 8 | gallery | Editorial heading above a horizontal multi-column thumbnail strip. | Follow social account, Browse lifestyle images | Small typewriter heading, Varied image thumbnails, Fine divider |
| 9 | footer | Three-part footer with newsletter area, link columns, and oversized closing wordmark. | Subscribe by email, Navigate product and company links | Bordered email field, Compact link lists, Large logo artwork |

## Source CSS custom properties (selected)

```css
--font-heading: "ITC Garamond Condensed","serif";
--font-body: "GT Alpina Typewriter","monospace";
--font-tag: "Apercu","sans-serif";
--bar-color: currentColor;
--bar-radius: 0;
--bar-gap: calc(11px/2 - 1px*3/2);
--swiper-theme-color: #007aff;
--oke-widget-spaceAbove: 20px;
--oke-widget-spaceBelow: 20px;
--oke-starRating-spaceAbove: 0;
--oke-starRating-spaceBelow: 0;
--oke-button-backgroundColor: #d1e030;
--oke-button-backgroundColorHover: #d1e030;
--oke-button-backgroundColorActive: #d1e030;
--oke-button-textColor: #3c422e;
--oke-button-textColorHover: #3c422e;
--oke-button-textColorActive: #3c422e;
--oke-button-borderColor: #3c422e;
--oke-button-borderColorHover: #3c422e;
--oke-button-borderColorActive: #3c422e;
--oke-button-borderRadius: 30px;
--oke-button-borderWidth: 1px;
--oke-button-fontWeight: 500;
--oke-button-fontSize: 16px;
--oke-button-fontFamily: inherit;
--oke-border-color: #3c422e;
--oke-border-width: 1px;
--oke-text-primaryColor: #3c422e;
--oke-text-secondaryColor: #3c422e;
--oke-text-small: 14px;
--oke-text-regular: 16px;
--oke-text-large: 20px;
--oke-text-fontFamily: inherit;
--oke-avatar-backgroundColor: #3c422e;
--oke-avatar-placeholderTextColor: #f6e6d9;
--oke-highlightColor: #3c422e;
--oke-shadingColor: #e8d6c8;
--oke-attributeBar-shadingColor: #9a9db1;
--oke-attributeBar-borderColor: undefined;
--oke-attributeBar-backgroundColor: #d3d4dd;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/graza-co