Brand assets
Logos, colors, type, and voice for blogs, ads, decks, social, and anything we publish.
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.
Our logo
Ink on light backgrounds, cream on charcoal. Download approved files. Do not recreate.
Symbol
Use the mark only when the BetterReviews name is already visible nearby.
Raster exports
For platforms that require PNG.
Clearspace
Keep the logo mark free of other elements. Do not edit, distort, or recolor it.
- 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.
Minimum padding on all sides ≈ height of the “B” in the wordmark.
Colors
Accent orange is for labels and selective emphasis. Not large text fields or CTAs (buttons stay ink).
Text on light backgrounds
Headlines in ink; body and UI chrome in secondary.
Aa
Aa
Text on dark backgrounds
Used on ink panels and dark section blocks.
Aa
Aa
Backgrounds
Cream page surface; paper for panels; white cards; ink for contrast.
Accent & UI
Orange for links and selective emphasis. Ink for CTA buttons, not accent.
Supporting
Functional colors. Not for general text or backgrounds.
Emphasis
Orange accent is not used everywhere for emphasis. Three distinct patterns ship today:
Hero headline (plain italic)
Homepage H1 only
Turn customer reviews into your best marketing content.
Newsreader 300 · ink italic on one phrase. No accent color on the hero.
Section headline italic
Homepage and marketing H2s when emphasizing one word
Unlimited orders.
Newsreader italic at the same weight as the surrounding headline (300–400). Prefer ink; orange only for rare large accents.
Eyebrow / section label
Pricing, compare, migrate, and homepage eyebrows
Pricing
Poppins 12px · 400 · uppercase · letter-spacing 0.16em · 50% ink. Not an orange pill.
Typography
Newsreader for headlines,
Poppins for UI and body. Google Fonts on web; bundled TTFs in src/fonts/ for OG images. Headlines stay light (weight 300–400). Prefer text-wrap: balance on headlines; text-wrap: pretty on body paragraphs.
Display / H1 Newsreader 300 · clamp(28px, 4.8vw, 48px) · letter-spacing -0.015em
Reviews worth reading.
Section heading / H2 Newsreader 300–400 · clamp(24px, 3.2vw, 40px) · letter-spacing -0.015em
How the conversation works
Body Poppins 400 · 14–16px · line-height 1.6 · ~72% ink
BetterReviews guides customers through an AI conversation that produces detailed, photo-rich reviews.
Section label Poppins 12px · 400 · uppercase · letter-spacing 0.16em · 50% ink
How it works
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.
Brand guidelines
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.
Source of truth
Brand tokens live in the repo. When colors, logos, type rules, or attributes change, update the code first, then regenerate the skill file so AI agents stay aligned.
For engineering
Canonical tokens and CSS variables that power betterreviews.app.
marketing/src/lib/brand.tstokens, logos, rulesmarketing/src/styles/global.cssruntime CSS variables
After editing tokens, run npm run branding:md in marketing/ to refresh the skill file.
For AI agents
Markdown skill file for Claude, Cursor, and other agents creating BetterReviews copy, ads, decks, or UI mockups. Point them at this URL instead of scraping the HTML page.
https://betterreviews.app/branding.md