---
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 (cream/white vs ink).

**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 cream and white. 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 ink. |


### 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 (`#e8400d`) is for **section labels**, **links**, and **selective headline emphasis**. Not primary CTA buttons (those stay ink `#161412` on white text).

### Text on light backgrounds

Headlines in ink; body and UI chrome in secondary.

| Name | Hex | CSS variable | Role |
| --- | --- | --- | --- |
| Ink | `#161412` | `--ink` | Headlines, primary buttons, logo wordmark (--ink) |
| Secondary | `#161412B8` | `--text-secondary` | Body copy, captions (~72% ink) |

### Text on dark backgrounds

Used on ink panels and dark section blocks.

| Name | Hex | CSS variable | Role |
| --- | --- | --- | --- |
| Cream | `#f3f1ee` | `--cream` | Headlines and primary text on ink |
| Dim cream | `#F3F1EEB8` | `--text-light-dim` | Secondary text on ink (~72% cream) |

### Backgrounds

Cream page surface; paper for panels; white cards; ink for contrast.

| Name | Hex | CSS variable | Role |
| --- | --- | --- | --- |
| Cream | `#f3f1ee` | `--cream` | Default page surface (--cream #f3f1ee) |
| Paper | `#f6f4f0` | `--paper` | Panels and raised fills (--paper) |
| Card | `#ffffff` | `--card` | White cards and elevated surfaces |
| Ink | `#161412` | `--ink` | Featured cards, dark bands (--ink) |
| Ink raised | `#2a2825` | `--bg-dark-raised` | Panels on ink surfaces |

### Accent & UI

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

| Name | Hex | CSS variable | Role |
| --- | --- | --- | --- |
| Link / accent | `#e8400d` | `--link` | Links, labels, large emphasis (--link #e8400d) |
| Link dark | `#b52f04` | `--link-dark` | Hover and pressed link states |
| Border | `#1614121F` | `--border` | Dividers and outlines (~12% ink) |

### Supporting

Functional colors. Not for general text or backgrounds.

| Name | Hex | CSS variable | Role |
| --- | --- | --- | --- |
| Green | `#2d8a5e` | `--green` | Success states, checkmarks |
| Star | `#e8a317` | `--star` | Star ratings only |


### Quick reference (all hex values)

```
accent:        #e8400d
accentBright:  #b52f04
text:          #161412
textSecondary: rgba(22, 20, 18, 0.72)
textLight:     #f3f1ee
textLightDim:  rgba(243, 241, 238, 0.72)
bg:            #f3f1ee
bgCream:       #f6f4f0
bgWarm:        #ffffff
bgDark:        #161412
bgDarkRaised:  #2a2825
border:        rgba(22, 20, 18, 0.12)
green:         #2d8a5e
yellow:        #e8a317  # star ratings ONLY
```

---

## Emphasis patterns

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

### Hero headline (plain italic)

- **Where:** Homepage H1 only
- **Example:** Reviews that actually help people buy.
- **Rule:** Newsreader 300 · ink italic on one phrase. No accent color on the hero.

### Section headline italic

- **Where:** Homepage and marketing H2s when emphasizing one word
- **Example:** Unlimited orders.
- **Rule:** Newsreader italic at the same weight as the surrounding headline (300–400). Prefer ink; orange only for rare large accents.

### Eyebrow / section label

- **Where:** Pricing, compare, migrate, and homepage eyebrows
- **Example:** Pricing
- **Rule:** Poppins 12px · 400 · uppercase · letter-spacing 0.16em · 50% ink. Not an orange pill.

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

---

## Typography

**Typeface:** [Newsreader](https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..600;1,6..72,300..600&family=Poppins:wght@400;500;600&display=swap) for headlines; Poppins for UI and body.

Headlines stay light (weight 300–400). Prefer text-wrap: balance on headlines; text-wrap: pretty on body paragraphs.

| Role | Specs |
| --- | --- |
| Display / H1 | Newsreader 300 · clamp(28px, 4.8vw, 48px) · letter-spacing -0.015em |
| Section heading / H2 | Newsreader 300–400 · clamp(24px, 3.2vw, 40px) · letter-spacing -0.015em |
| Body | Poppins 400 · 14–16px · line-height 1.6 · ~72% ink |
| Section label | Poppins 12px · 400 · uppercase · letter-spacing 0.16em · 50% ink |

**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` | Poppins uppercase eyebrow, muted ink — not an orange pill |
| Dark section | ink panel | Cream text on `--ink` |
| Primary CTA | `.cmp-btn-dark` / ink pill | Ink fill, cream text, pill (999px radius) |
| Secondary CTA | ghost outline | Transparent, ink outline, pill |
| Headline emphasis | italic Newsreader | Same light weight as surrounding headline; ink first |

---

## Do

- Use Newsreader for headlines and Poppins for UI/body.
- Keep display headlines at weight 300 (homepage feel). Section H2s 300–400 — never 500+.
- Use ink pill buttons for primary CTAs; ghost outline for secondary.
- Use cream (#f3f1ee) as the default page surface and ink (#161412) for type and dark bands.
- Keep secondary body text at ~72% ink. Not full ink, not accent.
- Use text-wrap: balance on headlines; pretty on body paragraphs.

## Don't

- Do not set body-size text in orange — fails WCAG AA. Links may use --link; body stays ink.
- Do not use yellow/star for CTAs or links. Stars only.
- Do not bold display headlines to 500+ — that is the old Bricolage weight, not the live system.
- Do not use pure #000000. Ink is #161412.
- Do not invent new logo colors or typefaces (no Bricolage on live marketing chrome).
- Do not use orange pill labels for section eyebrows — uppercase muted Poppins only.
- 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:

- Legacy report pages and some OG templates still load Bricolage; live marketing chrome (MarketingShell / founder) is Newsreader + Poppins.
- global.css still declares Bricolage as :root defaults; MarketingShell remaps tokens under .cmp-scope. Prefer shell/founder tokens for new work.