Brand Guidelines

Everything you need to represent ShopHero consistently and confidently across every touchpoint.

Brand Values

These core values shape every interaction, design decision, and piece of communication we create.

Elegant

Clean, simple, and uncluttered. Our design embodies "less is more" — every element earns its place.

Bold

We push boundaries and lead with competitive innovation. Our brand should feel confident and forward-looking.

All-In

Deeply committed to our customers and their success. We go the extra mile because we genuinely care.

Straightforward

We make complex technical challenges simple and approachable. No jargon, no fluff — just clarity.

Tone & Voice

ShopHero speaks as a trusted colleague — with warmth, clarity, and genuine expertise. We use first-person perspective and address retailers directly.

Authentic & Approachable

We speak as a trusted colleague, not a faceless corporation. Our language is warm, personal, and grounded in real experience.

Upbeat & Optimistic

We believe in the future of independent retail and let that confidence come through — without being over-the-top or preachy.

Helpful & Respectful

We make complex technology feel simple. We empower, never talk down, and always lead with what matters to the retailer.

Do

  • "Your grocery store deserves modern tools that just work."
  • "We built this alongside real retailers."
  • "Let us handle the heavy digital lifting."

Don't

  • "Our disruptive, AI-powered omnichannel solution leverages synergies..."
  • "You need to upgrade or you'll fall behind."
  • "Hey guys!! Check out this AMAZING new feature!!!"

Logo & Marks

Our logo is the most recognizable element of the ShopHero brand. Use it consistently and give it room to breathe.

Primary Logo

Full logo — use as the default wherever possible.

SVG PNG

Letter Mark

For compact spaces, favicons, and promotional use.

SVG PNG

On Dark Backgrounds

Use the white version on dark or busy backgrounds.

SVG PNG

Clear Space & Minimum Size

Always maintain a minimum clear space around the logo equal to the height of the "S" in ShopHero. This ensures the logo remains legible and visually distinct.

The primary logo should never appear smaller than 120px wide in digital applications or 1 inch in print. The letter mark minimum is 24px / 0.25 inches.

Color Palette

Our palette is anchored by ShopHero Blue and Red. Click any swatch to copy its hex value.

Primary Colors

Click to copy

ShopHero Blue

#1179BB

Click to copy

ShopHero Red

#BB112D

Click to copy

ShopHero Black

#282727

Click to copy

ShopHero White

#FFFFFF

Secondary Colors

Click to copy

Light Blue

#1594E3

Click to copy

Dark Blue

#0D649B

Click to copy

Light Red

#E31537

Click to copy

Dark Red

#A7112A

Complementary Colors

Click to copy

Iceberg

#B6E3CC

Click to copy

Avocado

#C9F42D

Click to copy

Lemon

#FFF24B

Click to copy

Tangerine

#F28500

Click to copy

Grain

#DEBD88

Click to copy

Milk

#F6F6F6

Click to copy

Plum

#713D63

Click to copy

Lilac

#C2AFF0

Click to copy

Eggplant

#2A1F2D

Click to copy

Salmon

#FA8072

Copy All Color Values View Palette on Coolors

Typography

Satoshi is our primary typeface. Inter serves as a reliable fallback available through Google Fonts.

Primary Font

Satoshi

Light — The quick brown fox

Regular — The quick brown fox

Medium — The quick brown fox

Bold — The quick brown fox

Black — The quick brown fox

Download from Fontshare

Secondary Font

Inter

Light — The quick brown fox

Regular — The quick brown fox

Medium — The quick brown fox

Bold — The quick brown fox

Black — The quick brown fox

Download from Google Fonts

Type Scale

5xl

Page Heading

4xl

Section Heading

2xl

Card Heading

lg

Intro / Lead Text

base

Body text — used for paragraphs and general content across the platform.

Usage Guidelines

A few simple rules to keep the ShopHero brand looking sharp and consistent.

Do

  • Use the official logo files provided — never recreate or approximate them.
  • Maintain clear space around the logo at all times.
  • Use ShopHero Blue (#1179BB) as the dominant brand color in all materials.
  • Write "ShopHero" as one word with a capital S and H — never "Shop Hero" or "Shophero."
  • Use Satoshi as the primary typeface; fall back to Inter when Satoshi is unavailable.

Don't

  • Stretch, rotate, skew, or distort the logo in any way.
  • Place the logo on busy backgrounds where it loses legibility.
  • Change the logo colors or apply effects like gradients or drop shadows.
  • Use off-brand colors as primary colors in ShopHero-branded materials.
  • Use the logo smaller than the minimum size requirements.