Screenshot of Porter Road

Porter Road

porterroad.com

The reference for a full-bleed documentary-photo hero carrying a huge condensed all-caps quote in CentralAvenue-Bold white over a butcher-at-work image, with black CTAs on cream (#FEF9F2) below.

Consumer Brand flagship

Design tokens

background
surface
text
textMuted
accent
tone1
tone2
display
Bau-Pro
body
Bau-Bold
mono

Do / Don't

Reference it for

  • Full-viewport photographic hero with a giant all-caps display quote set in a condensed grotesk (CentralAvenue-Bold, 60-90px) laid directly over the image, no scrim card
  • Condensed-vs-neutral type pairing: CentralAvenue-Bold for punchy display, Bau-Pro / Bau-Bold for everything else
  • Trust-proof trio ('NO HORMONES', 'NO ANTIBIOTICS', 'PASTURE-RAISED') as centred caps separated by thin hairline rules, sitting mid-hero
  • Two-CTA stack under the hero: an outlined white-on-photo 'BUILD YOUR OWN BOX' box above a solid near-black (#252525) 'START SHOPPING' button
  • Warm cream page canvas (#FEF9F2) breaking the default white, with pure-black text (#000000) for maximum contrast
  • Accent used sparingly: a hot vermilion (#FF3600) reserved for the cart badge and small highlights, plus a yellow (#FBFB2F) promo block
  • Rotating top announcement bar in tiny tracked caps (letter-spacing 1.5px, ~10px) with an inline underlined 'TRY NOW' link
  • Centred wordmark nav with menu split left and right of a serif-styled logotype, thin sans links in caps

Do not copy

  • The 'Porter Road' serif wordmark and butcher-logo cap motif
  • The exact butcher-at-the-block photography and the real people in it
  • The hero copy '“IF IT'S NOT RAISED RIGHT IT CAN'T BE DELICIOUS.”'
  • Brand voice lines like 'IT'S OUR GATEWAY DRUG.' and 'DELIVERING MEAT THE WAY MEAT SHOULD BE'
  • The licensed Bau-Pro / Bau-Bold / CentralAvenue-Bold typefaces (buy your own)
  • The exact palette lock of cream #FEF9F2 + vermilion #FF3600 + yellow #FBFB2F
  • Shopify/Junip star-review and cart widget chrome