Grazr
Brand guidelines · v1 ← Back to site

Brand

The Grazr brand.

Logos, colors, and type for anything that carries the Grazr name — the site, the app, Heritage Grocer POS, print, and packaging. Green is the single structural accent; everything else sits on warm paper.

Logo

The green steer mark in a rough hand-drawn ring with the slab charcoal logotype. Keep clear space around it of at least the height of the steer's head, and never recolor, stretch, or add effects.

on whiteGrazr logo on white
on warm paperGrazr logo on warm paper
mark onlyGrazr steer mark
yieldiqYieldIQ logo
Grazr logo (PNG) Steer mark (PNG) YieldIQ logo (PNG)

Color

Brand green (#409040) is the steer green — the only structural accent. Warm stone neutrals carry the interface; the earthy accents add personality one at a time.

Brand green ramp

50
#EDF5EC
100
#D6E9D2
200
#AED4A7
300
#82BD79
400
#5AA651
500 ★
#409040
600
#357A38
700
#2A6230
800
#1F4A26
900
#16341B

Warm stone neutrals

50
#F8F7F4
100
#F1EFEA
150
#EBE8E1
200
#E5E1D9
300
#D6D1C7
400
#B4ADA1
500
#8C857A
600
#6B655B
800
#302D29
900
#1F1D1A

Earthy accents

Clay#C2542F
Oxblood#8C3A2E
Wheat#D39A32
Teal · YieldIQ#2C8C8C
Blue#3E7CA8
Sage#7E9B6E

Semantic

Success#357A38
Warning#B9791A
Danger#C0392B
Info#3E7CA8

Typography

Zilla Slab echoes the heavy slab logotype for headlines; Inter runs the UI and body; JetBrains Mono handles carcass tags, cut-sheet IDs, and numbers.

Zilla Slab

Display

Headlines & marketing moments · 500–700

Inter

UI / Body

Interface & body copy · 400–700

JetBrains Mono

Mono

Tags, IDs & numeric data · 400–600

Display 1Zilla Slab · 56px · 700
Built for the plant floor
Display 2Zilla Slab · 44px · 700
Built for the plant floor
H1Zilla Slab · 34px · 600
Built for the plant floor
H2Zilla Slab · 26px · 600
Built for the plant floor
H3Inter · 21px · 600
Built for the plant floor
Body lgInter · 17px · 400
Track every box from kill floor to customer, and keep the counter selling from live inventory.
BodyInter · 15px · 400
Track every box from kill floor to customer, and keep the counter selling from live inventory.
EyebrowInter · 12px · 600 · caps
Inventory intelligence
MonoJetBrains Mono · 13px · 500
BEEF-204 · HOG-118 · 1.24 lb @ $18.99/lb

Voice

How Grazr talks — on the site, in the app, and at the counter.

Voice

  • Direct & outcome-led. Lead with the result — time saved, errors gone, profit up.
  • Plain-spoken. Plant-floor language, never jargon or hype.
  • "Your". Speak to the processor: your plant, your customers.

Avoid

  • Cutesy meat puns or emoji in product UI.
  • Abstract tech-speak ("synergy", "AI-powered").
  • Red as decoration — it reads as an alert.

"Building better processing software."

Using the palette

Green is structural. Buttons, links, focus rings, and the active state use the green ramp — nothing else does.
One accent at a time. Wheat marks Heritage Grocer / coming-soon, teal marks YieldIQ. Don't mix accents in one component.
Warm paper canvas. Pages sit on stone-50 (#F8F7F4); cards are white with stone-200 hairlines.
Red means alert. Danger red only for errors and holds — never decoration.