A warm, wry pantry brand that is warm-based rather than green-based, despite the squeeze-bottle reputation: the 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. Colour arrives as FLAT full-bleed blocks lifted straight from the packaging — acid lime #d1e030 on the primary CTA, mint #9eef80, yellow #fbd535 — never as gradients or tints. Its personality comes from an unusual type pairing: ITC Garamond CONDENSED serif used for display only, at 72px on 72px leading with a tight -2.16px tracking, set against GT Alpina TYPEWRITER running every button, nav item, label and body line at 16/24, which gives the site its deadpan, hand-typed voice. Radii are generous (20px dominant, 16px cards, split 10px 0 0 10px on segmented controls), and there are ZERO box-shadows and ZERO gradients on the entire page: the only elevation is a hard offset ::before block that TRANSLATES on hover, scaled to button size at 2px, 4px or 6px, like a printed sticker shifting. Focus is a genuine 2px olive outline at 3px offset, correctly scoped to :focus-visible. Motion runs at 0.25s ease-in-out over a small on-theme keyframe set including drip-1 and drip-2 olive-oil drips, with 9 autoplaying videos carrying the imagery.
Browse Graza in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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#146ff8blue 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::beforeblock rather than changing colour.
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.
| 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.
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 |
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.