# Graza — Marketing site Design Spec

> Source: graza.co (live DOM, computed styles), 2026-07-25. 0 stylesheets
> blocked. Shopify storefront with 128 :root vars, mostly layout/theme scaffolding;
> §2 is read from computed fills/text. The `#146ff8` blue is browser/UA chrome
> (a native control), not brand — excluded.
> Reality check: **the hint is half right and misses the actual character.** The
> queue said "bold green squeeze-bottle playfulness". Green is present, but as an
> acid-LIME #d1e030 accent — the canvas is a **peach-cream #f6e6d9** and the ink
> a deep **olive #3c422e**, so the page is warm, not green. The real signature is
> a type pairing the hint doesn't mention: a **condensed Garamond serif** display
> (72/72, -2.16px) over **GT Alpina Typewriter** running every piece of UI — and
> a hover that **slides an offset `::before` block** rather than changing colour.

## 1. Visual Theme & Atmosphere

A warm, wry pantry brand. The canvas is peach-cream and the ink a deep olive, so
even the "bright" moments sit on a warm base rather than a white one. The
personality comes from an unusual type pairing: an elegant condensed Garamond
serif for headlines against a **typewriter** face for every button, nav item and
label — bookish and slightly deadpan, matching copy that jokes with the reader.
Colour arrives as flat blocks of acid lime, mint and yellow pulled straight from
the bottle labels. There are **no shadows and no gradients anywhere**: depth is a
1px olive outline plus a hard offset block that slides on hover. Feels: warm,
wry, bookish, hand-made.

## 2. Color Palette & Roles

| Token | Hex / value | Role / usage |
|---|---|---|
| peach-cream | #f6e6d9 | THE page canvas (warm, not white) |
| cream | #fff4ec | lighter surface, text on dark, chip fill |
| olive | #3c422e | primary ink + THE border colour (883 uses) |
| black | #000000 | rare true-black text |
| white | #ffffff | rare, utility surfaces |
| lime | #d1e030 | primary CTA fill, full-bleed bands |
| mint | #9eef80 | secondary block fill |
| yellow | #fbd535 | third block fill (the bottle cap) |
| scrim-60 | rgba(0,0,0,.6) | video scrim |
| scrim-40 | rgba(0,0,0,.4) | lighter scrim |

Rules: the base is **warm** — never substitute white for the peach-cream canvas.
Lime, mint and yellow are used as **flat full-bleed blocks** taken from packaging,
never as gradients or tints. Olive #3c422e does double duty as ink *and* as the
single border colour.

## 3. Typography Rules

Two faces, sharply divided. **ITC Garamond Condensed** is display-only — 72px on
72px leading (line-height equal to font size) with a tight -2.16px tracking, at
weight 400. **GT Alpina Typewriter** does everything else: nav, buttons, body,
labels, at 16/24 in weights 400–600. A little **Apercu** appears for UPPERCASE
section labels. The typewriter face at UI scale is what gives the site its
deadpan, hand-typed voice.

> Specimen substitution: previews load **EB Garamond** for ITC Garamond Condensed
> and **JetBrains Mono** for GT Alpina Typewriter (one bundled Google Fonts link).
> The site ships the licensed originals; note EB Garamond is *not* condensed, so
> the specimen runs slightly wider than the real face.

| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Display (h1) | ITC Garamond Condensed | 72/72 | 400 | -2.16px |
| Section label (h2) | Apercu | 16/24 | 400 | normal, UPPERCASE |
| Sub-head (h3) | GT Alpina Typewriter | 16/24 | 500 | normal |
| Body | GT Alpina Typewriter | 16/24 | 500 | normal |
| Nav | GT Alpina Typewriter | 16/24 | 400 | normal |
| Button | GT Alpina Typewriter | 16/24 | 500–600 | normal |

## 4. Component Stylings

The primary CTA is a wide **lime #d1e030 block** with olive text and a 1px olive
border; the cart chip is a **32px pill** in cream with the same 1px olive border.
The dominant radius is a generous **20px** (42 uses) with 16px on cards and
9999px/100% on pills and round icons. Split radii (`10px 0 0 10px` and its mirror)
appear on segmented controls. **Zero shadows** — every boundary is the 1px
#3c422e outline.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Button (std) | lime/cream fill, 1px #3c422e | `::before` block **translates (4px, 4px)** | `outline: #3c422e solid 2px; outline-offset: 3px` | — | not observed |
| Button (large) | as above | `::before` translates **(6px, 6px)** | as above | — | — |
| Button (small) | as above | `::before` translates **(2px, 2px)** | as above | — | — |
| Chip / cart | #fff4ec, 32px, 1px #3c422e | 0.25s ease-in-out colour | as above | — | — |

Two details worth copying. The hover is a **hard offset block** — a `::before`
layer sliding diagonally, scaled to button size (2/4/6px) so small controls move
less — a printed-sticker effect rather than a colour change. And the focus ring
is real and on-brand: a **2px olive outline at 3px offset**, correctly scoped to
`:focus-visible` with `:focus:not(:focus-visible)` suppressed. Keep both.

## 5. Layout Principles

A transparent nav sits over a full-bleed autoplaying video hero: chunky retro
wordmark left, four typewriter links centre, search/account/cart chip right.
Headline and CTA are bottom-left over the video, under a `rgba(0,0,0,.4–.6)`
scrim. Below, content stacks in flat colour blocks (lime, mint, yellow) and
20px-radius cards. 5 container queries size the product components.

## 6. Depth & Elevation

Radius: **20px** dominant, 16px cards, 10px, 8px, 9999px / 100% pills and round
icons, plus split pairs `10px 0 0 10px` / `0 10px 10px 0` for segmented controls.
**Zero box-shadows on the entire page.** Borders do all the structural work and
there is effectively one: **1px #3c422e** (34 uses), with a 1px #fff4ec inverse
over dark. The only "elevation" is the hover offset block described in §4.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| background, border, color, fill, stroke | 0.25s | ease-in-out | all chrome (dominant, 58x) |
| opacity | 0.25s | ease-in-out | fades |
| opacity | 0.5s | ease | slower reveals |
| transform | 0.25s | ease-in-out | the hover offset block |
| transform, opacity | 0.4s | ease-in-out | larger reveals |

House transition: **0.25s ease-in-out**. The keyframe set is small and entirely
on-theme: **`drip-1` and `drip-2` (2s infinite)** — literal olive-oil drips —
plus `wobble`, `fall`, `flash`, `blink` (2s infinite), `spin` / `spin-reverse`
(3s infinite, 12 elements) and a `marquee` (20s infinite). Custom easings include
`cubic-bezier(0.55,0.055,0.675,0.19)` (ease-in-quart) and
`cubic-bezier(0.215,0.61,0.355,1)` (ease-out-cubic). 9 videos. No animation
library. **No `prefers-reduced-motion` block** (`reducedMotionBlocks:0`) — a real
gap given 9 autoplaying videos and several infinite loops.

## 8. Backgrounds, Effects & WebGL

**Zero gradients, zero backdrop filters, zero canvas/WebGL, no grain, no raster
background layers** — unusually clean for a playful brand. The page is carried
entirely by **9 `<video>` elements** and flat blocks of packaging colour, with
`rgba(0,0,0,.4)` / `.6` scrims for text legibility over video. All the visual
interest is in the photography, the type pairing and the offset-block hover.

## 9. Do's and Don'ts

### Do
- Keep the canvas peach-cream #f6e6d9 — warm, never white.
- Pair a condensed Garamond serif display with a TYPEWRITER face for all UI.
- Set the display at line-height equal to font size (72/72) with tight -2.16px tracking.
- Use lime, mint and yellow as flat full-bleed blocks lifted from packaging.
- Make olive #3c422e both the ink and the single 1px border colour.
- Hover by sliding a hard `::before` offset block (2/4/6px by button size), not by changing colour.
- Keep the 2px olive focus ring at 3px offset — it is correct and on-brand.

### Don't
- Don't add shadows or gradients; the page has none of either.
- Don't set body or nav in the serif — the serif is display-only.
- Don't tint the lime/mint/yellow or blend them; they are flat blocks.
- Don't swap the warm canvas for white.
- Don't ship without a reduced-motion block; the site omits one despite 9 videos.

## 10. Responsive Behavior

| Breakpoint | What changes |
|---|---|
| 375 / 480px | phone tiers |
| 640px | large phone |
| max 680 / 750 / 767px | pre-tablet stacking |
| 768px | tablet: nav + grid |
| 1024px | desktop layout |
| 1200px | wide content |
| 1440px | wide cap |

**5 container queries** size the product components independently of viewport. No
dark-scheme blocks (`darkSchemeBlocks:0`) — light/warm only. No reduced-motion
block.

## 11. Agent Prompt Guide

- Canvas `#f6e6d9` · Surface `#fff4ec` · Ink + border `#3c422e` (1px) · Accent blocks `#d1e030` / `#9eef80` / `#fbd535` · **No shadows, no gradients**
- Font: ITC Garamond Condensed display 72/72 -2.16px (EB Garamond stand-in) + GT Alpina Typewriter UI 16/24 (JetBrains Mono) · Radius: 20px / 16px cards / 9999px pills · Control height: 36–48px
- Focus: `outline: #3c422e solid 2px; outline-offset: 3px` · Hover: `::before` block translates (4px,4px) · Motion: 0.25s ease-in-out

<graza_design_language>
Warm, wry pantry brand — warm-based, not green-based. Canvas is peach-cream
#f6e6d9 with a lighter #fff4ec surface, and the ink is a deep olive #3c422e that
doubles as the single border colour (1px, 34 uses). Colour arrives as FLAT
full-bleed blocks lifted from the packaging — acid lime #d1e030 on the primary
CTA, mint #9eef80, yellow #fbd535 — never as gradients or tints. The signature is
a type pairing: ITC Garamond CONDENSED serif for display only, at 72px on 72px
leading with tight -2.16px tracking, against GT Alpina TYPEWRITER (stand-in
JetBrains Mono) running every button, nav item, label and body line at 16/24,
which is what gives the site its deadpan, hand-typed voice. Radii are generous —
20px dominant, 16px cards, 9999px pills, split 10px 0 0 10px on segmented
controls. There are ZERO box-shadows and ZERO gradients on the page: the only
elevation is a hard offset ::before block that TRANSLATES on hover, scaled to
button size (2px small / 4px standard / 6px large), like a printed sticker
shifting. Focus is a real 2px #3c422e outline at 3px offset, correctly scoped to
:focus-visible. Motion is 0.25s ease-in-out over a small on-theme keyframe set —
drip-1 and drip-2 olive-oil drips, wobble, blink, spin, a 20s marquee — with 9
autoplaying videos carrying the imagery. Feels: warm, wry, bookish, hand-made.
Avoid: shadows or gradients, a white canvas, serif body copy, tinting the flat
blocks, hovering by colour change instead of the offset slide.
</graza_design_language>