---
name: betterreviews-brand
description: BetterReviews brand guidelines for logos, colors, typography, emphasis patterns, and usage rules. Use when creating or reviewing anything customer-facing for BetterReviews.
---

# BetterReviews brand guidelines

Canonical human page: [https://betterreviews.app/branding](https://betterreviews.app/branding)

Machine-readable source tokens: `marketing/src/lib/brand.ts` and `marketing/src/styles/global.css` in the BetterReviews monorepo.

## When to use this skill

Load this file before writing or designing:

- Blog posts, comparison pages, and landing copy on betterreviews.app
- Paid ads, email campaigns, and social creative
- Sales decks, one-pagers, and conference collateral
- UI mockups that should match the marketing site

## Getting started

**Who is this for?** Blog authors, ad creative, decks, social, and anyone publishing BetterReviews-branded material.

**What are you making?** Pick wordmark vs symbol, light vs dark logo, then match surface colors (white/cream vs charcoal).

**Where will it live?** Marketing site patterns apply to betterreviews.app. App Store and email may need PNG rasters.

---

## Brand attributes

These characteristics guide how BetterReviews should sound and look in blogs, ad creative, decks, social, and any published material. Not just the marketing site. When something feels on-brand, you are usually expressing several at once, with one or two leading for the format you are in.

### Merchant-minded

We speak as operators who understand Shopify growth, not as a faceless SaaS vendor. Lead with what merchants gain from richer reviews.

- **Copy:** Frame around outcomes: content for ads, email, and product pages. Not feature laundry lists. Avoid opening with generic “AI-powered” language. Ground claims in workflow and results merchants recognize.
- **Design:** When illustrating, use plausible shop contexts and UI that could be real. Example quotes should feel like something you could pull from an actual review.
- **In the wild:** Decks and one-pagers should answer what changes after install. CTAs stay concrete: try the app, book a demo. Not vague “learn more” loops.

### Story-first

We treat reviews as reusable marketing stories, not star-count vanity metrics. Depth beats volume in every format.

- **Copy:** Use substantive quotes with specific detail: use case, comparison, outcome. Say “reviews worth reading,” not “collect more reviews.” In blogs, ads, and social, show the line you would actually run as a hook.
- **Design:** Quote-forward layouts in carousels, paid social, and slide decks. Pair copy with photo when UGC is part of the narrative.
- **In the wild:** Case studies and threads should model depth. A thin one-liner is the anti-pattern to call out, not the template to copy.

### Direct

Plain language, no enterprise fog. State what we do, who it is for, and why it is different without hedging.

- **Copy:** Short sentences. Contrarian is fine when it clarifies the category gap. Skip buzzword stacks and passive voice. Headlines and slide titles name the topic plainly.
- **Design:** One idea per block. Strong type hierarchy and whitespace. Ink and structure carry authority, not decorative noise.
- **In the wild:** Blog intros and ad hooks land the point in the first line. Comparison content is factual and specific, not combative theater.

### Proof-led

Show the mechanism and the artifact. Confidence comes from visible inputs and outputs, not vague transformation claims.

- **Copy:** Use numbers only when sourced. Describe flow in verbs: collect, moderate, publish, repurpose. In decks, one clear screenshot or output example beats three adjectives.
- **Design:** Step flows, before/after frames, labeled outputs. Accent orange sparingly. Ink and layout do the heavy lifting.
- **In the wild:** Demos, Loom clips, and carousel frames should be scannable: you can see the review, the step, and the marketing asset without a narrator explaining each layer.

### Human

Customer voice is the asset. We feature how shoppers actually talk, not a polished paraphrase in brand voice.

- **Copy:** Attribute quotes in examples. Keep first-person tone. AI guides collection; it does not replace natural speech. In ads and email, the customer’s words outperform rewritten marketing copy. Skip AI tells: em dashes, “delve into,” stacked adjectives, and “it’s not X, it’s Y” constructions. Write like a sharp editor.
- **Design:** Conversational patterns where chat or email is shown. Warm cream neutrals over cold tech-blue palettes. Trust cues (verified, authentic) when featuring real people.
- **In the wild:** When showing UGC in any channel, respect permission and consent where relevant. Shopper-facing examples never sound like sterile corporate boilerplate.

---

## Logos

Ink wordmark and mark on light surfaces; cream on charcoal. **Download approved files. Do not recreate or recolor.**

### Wordmark

Full logo with name. Default on white and cream.

| Asset | URL | Surface | Usage |
| --- | --- | --- | --- |
| Full logo (ink) | [`/img/br_logo_full.svg`](https://betterreviews.app/img/br_logo_full.svg) | White/cream | Default on white and cream. Nav, decks, light-background collateral. |
| Full logo (light) | [`/img/br_logo_full_light.svg`](https://betterreviews.app/img/br_logo_full_light.svg) | Charcoal | Footer, dark sections, and any surface using --bg-dark. |


### Symbol

Mark only. Use when the BetterReviews name is already visible nearby.

| Asset | URL | Surface | Usage |
| --- | --- | --- | --- |
| Mark (ink) | [`/img/br_logo.svg`](https://betterreviews.app/img/br_logo.svg) | White/cream | Mobile nav, favicon-adjacent contexts, avatars. Use only when the wordmark is visible elsewhere. |
| Favicon (light UI) | [`/favicon.svg`](https://betterreviews.app/favicon.svg) | White/cream | Browser tab when system chrome is light. |
| Favicon (dark UI) | [`/favicon-dark.svg`](https://betterreviews.app/favicon-dark.svg) | Charcoal | Browser tab when system chrome is dark. |


### Raster

PNG for raster-only platforms (App Store, some email clients).

| Asset | URL | Surface | Usage |
| --- | --- | --- | --- |
| PNG | [`/img/logo.png`](https://betterreviews.app/img/logo.png) | White/cream | Shopify App Store, email clients, and other raster-only surfaces. |
| PNG (1200px) | [`/img/logo-1200.png`](https://betterreviews.app/img/logo-1200.png) | White/cream | Presentations and print. |


### Clearspace

- Minimum padding on all sides ≈ height of the "B" in the wordmark.
- Do not stretch, rotate, recolor, or add effects to the logo.
- Do not place the ink logo on busy photography without a solid backing.
- Do not use the symbol alone when BetterReviews is not already named in context.
- The mark is ink on light surfaces and cream on charcoal. No other fills.

---

## Colors

Accent orange (`#fc4d16`) is for **section labels**, **links**, and **selective headline emphasis**. Not primary CTA buttons (those stay ink `#060606` on white text).

### Text on light backgrounds

Headlines in ink; body and UI chrome in secondary.

| Name | Hex | CSS variable | Role |
| --- | --- | --- | --- |
| Ink | `#060606` | `--text` | Headlines, primary buttons, logo wordmark |
| Secondary | `#6b6859` | `--text-secondary` | Body copy, nav links, captions (--text-secondary) |

### Text on dark backgrounds

Used in footer, final CTA, and .dark-section blocks.

| Name | Hex | CSS variable | Role |
| --- | --- | --- | --- |
| Cream | `#f4f2e6` | `--text-light` | Headlines and primary text on charcoal |
| Dim cream | `#a8a594` | `--text-light-dim` | Secondary text and card copy on dark |

### Backgrounds

Alternate white and cream on light pages; charcoal for contrast sections.

| Name | Hex | CSS variable | Role |
| --- | --- | --- | --- |
| White | `#ffffff` | `--bg` | Default page and card surface |
| Cream | `#f9f8ec` | `--bg-cream` | Alternate sections, warm panels |
| Warm | `#f0eede` | `--bg-warm` | Subtle section fills |
| Charcoal | `#202020` | `--bg-dark` | Footer, dark sections, final CTA |
| Charcoal raised | `#2a2a2a` | `--bg-dark-raised` | Cards and panels on dark surfaces |

### Accent & UI

Orange for labels and selective emphasis. Ink for CTA buttons, not accent.

| Name | Hex | CSS variable | Role |
| --- | --- | --- | --- |
| Accent | `#fc4d16` | `--accent` | Section labels, link underlines, large .highlight emphasis |
| Accent bright | `#ff6a3a` | `--accent-bright` | Hover and glow contexts |
| Border | `#e5e2cf` | `--border` | Dividers, outlines, secondary buttons |

### Supporting

Functional colors. Not for general text or backgrounds.

| Name | Hex | CSS variable | Role |
| --- | --- | --- | --- |
| Green | `#2d8a5e` | `--green` | Success states, positive metrics |
| Yellow | `#ffe800` | `--yellow` | Star ratings only |


### Quick reference (all hex values)

```
accent:        #fc4d16
accentBright:  #ff6a3a
text:          #060606
textSecondary: #6b6859
textLight:     #f4f2e6
textLightDim:  #a8a594
bg:            #ffffff
bgCream:       #f9f8ec
bgWarm:        #f0eede
bgDark:        #202020
bgDarkRaised:  #2a2a2a
border:        #e5e2cf
green:         #2d8a5e
yellow:        #ffe800  # star ratings ONLY
```

---

## Emphasis patterns

Orange accent is **not** used everywhere for emphasis. Match the pattern to the surface:

### Section headline (.highlight)

- **Where:** Homepage section H2s: Pipeline (“Display.”), Agent (“dashboard.”), Deploy (“working harder.”)
- **Example:** Collect. Understand. Display.
- **Rule:** Orange (#fc4d16) + italic on one word inside an H2

### Hero headline (plain italic)

- **Where:** Homepage H1 only
- **Example:** Turn customer reviews into your best marketing content.
- **Rule:** Ink (#060606) + italic. No accent color on the hero phrase.

### Accent as UI chrome

- **Where:** Section labels, legal/docs links, comparison “us” column, star fills in demos
- **Example:** How it works
- **Rule:** Orange for labels and functional highlights. Not body copy.

**CSS:** `.highlight` = `color: var(--accent); font-style: italic;`

---

## Typography

**Typeface:** [Bricolage Grotesque](https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap). The only font on betterreviews.app.

Prefer text-wrap: balance on headlines and short display lines; text-wrap: pretty on body paragraphs.

| Role | Specs |
| --- | --- |
| Display / H1 | 500 · clamp(40px, 5vw, 64px) · letter-spacing -0.04em |
| Section heading / H2 | 500 · clamp(32px, 4.5vw, 48px) · letter-spacing -0.02em |
| Body | 400–500 · 14–16px · line-height 1.6 · --text-secondary |
| Section label | 11px · 700 · uppercase · accent pill |

**Samples**

- **Display / H1:** Reviews worth reading.
- **Section heading / H2:** How the conversation works
- **Body:** BetterReviews guides customers through an AI conversation that produces detailed, photo-rich reviews.
- **Section label:** How it works

---

## UI patterns

Reuse marketing-site classes when building web UI:

| Pattern | Class | Notes |
| --- | --- | --- |
| Section label | `.section-label` | Orange pill, uppercase, 11px. On dark: add `.section-label-light` |
| Dark section | `.dark-section` | Charcoal bg, cream text |
| Primary CTA | `.btn-accent` | Ink fill, white text, pill (999px radius) |
| Secondary CTA | `.btn-secondary` | Transparent, ink outline, pill |
| Headline emphasis | `.highlight` | Orange italic on section H2s only, not hero H1 |

---

## Do

- Use ink or light monochrome logos from this page.
- Use accent orange for section labels and selective headline emphasis (.highlight).
- Use ink pill buttons for primary CTAs; outline secondary for alternates.
- Use cream (#f9f8ec) and charcoal (#202020) to alternate section rhythm.
- Keep secondary body text in --text-secondary. Not ink, not accent.
- Use text-wrap: balance on headlines and short display copy; pretty on body paragraphs.

## Don't

- Do not set body-size text or links in orange — #fc4d16 on white is 3.4:1 and fails WCAG AA (4.5:1). Link text stays ink with an orange underline; orange is for labels and large .highlight headline words (>=24px).
- Do not use yellow (#ffe800) for CTAs or links. Stars only.
- Do not use orange for hero H1 emphasis (homepage uses ink italic).
- Do not use pure #000000. Ink is #060606.
- Do not invent new logo colors or typefaces.
- Do not use em dashes, throat-clearing openers, or other common AI-copy tells in published material.


---

## Known inconsistencies (audit)

Do not copy these into new work. Fix over time:

- Section/type pill labels use cream or white text on the orange accent (~3:1). This only clears WCAG AA as large/bold uppercase chrome (>=14px bold). Do not scale these labels down or un-bold them.