---
name: Graza
description: "This site is a great example of building a strong, distinctive brand identity for a physical product through bold typography, a unique color palette, and high-quality photography."
version: alpha

colors:
  background: "#F6E6D9"
  primary: "#3C422E"
  tertiary: "#D1E030"
  neutral: "#4E5340"
  line: "rgba(60, 66, 46, 1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 72px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-2.16px"
  body:
    fontFamily: typewriter
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 10px
  md: 20px
  lg: 20px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

Premium olive oil reimagined with playful packaging and a distinct, earthy visual identity.

*A high-end artisanal food brand with a playful, tactile edge.*

## Colors

Earthy, warm base palette dominated by dark olive green and soft peach, punctuated by a vibrant chartreuse accent.

- **Background (`#F6E6D9`)** — uses `bg` token
- **Primary text (`#3C422E`)** — uses `ink` token
- **Accent (`#D1E030`)** — uses `accent` token
- **Muted (`#4E5340`)** — uses `muted` token
- **Borders (`rgba(60, 66, 46, 1)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** typewriter

## Layout

Full-width photographic hero sections followed by generous grid layouts for product cards.

*Rhythm:* Vertical spacing uses generous gaps, often 35px or 68px, to let large imagery and bold typography breathe.

## Elevation & Depth

- Borders: Borders are used primarily for outlines and separation, typically 1px solid dark green.

## Shapes

- `sm`: 10px
- `md`: 20px
- `lg`: 20px
- `pill`: 9999px

## Components

- **button:** Bold, pill-shaped buttons with strong accent colors and uppercase text.
- **card:** Product cards feature large imagery with subtle rounded corners and clear price/category labels.
- **chip:** N/A
- **input:** N/A
- **hero:** Full-bleed photographic backgrounds with large, left-aligned serif headlines overlaid.

## Do's and Don'ts

**Don't:**
- don't use a dark background — screenshot shows a light, warm peach background (#F6E6D9)
- don't use sans-serif for main headlines — screenshot shows a transitional-serif font for display text
- don't use subtle or muted accent colors — screenshot shows a vibrant chartreuse accent (#D1E030)
- don't use sharp, square corners everywhere — screenshot shows rounded corners (20px) and pill shapes
- don't use dense, small text for key messages — screenshot shows large, bold typography (72px)
- don't use cold, grey-toned neutrals — screenshot shows earthy, warm tones like dark olive green (#3C422E)

---

## System Prompt (paste into AI agent)

```
Graza is a premium, playful olive oil brand targeting consumers who value quality and design. The site uses a warm, earthy palette centered on soft peach (#F6E6D9) and dark olive green (#3C422E), with a vibrant chartreuse accent (#D1E030) for calls to action. Typography mixes elegant transitional-serif display fonts with typewriter-style body text. Critical donts: avoid dark mode, avoid sans-serif for headlines, avoid muted accents, avoid sharp corners, avoid dense text, avoid cold neutrals. The layout relies on large, full-bleed photography and generous whitespace to create an editorial, premium feel.
```