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 (white/cream vs charcoal).
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 in footer, final CTA, and .dark-section blocks.
Aa
Aa
Backgrounds
Alternate white and cream on light pages; charcoal for contrast sections.
Accent & UI
Orange for labels 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:
Section headline (.highlight)
Homepage section H2s: Pipeline (“Display.”), Agent (“dashboard.”), Deploy (“working harder.”)
Collect. Understand. Display.
Orange (#fc4d16) + italic on one word inside an H2
Hero headline (plain italic)
Homepage H1 only
Turn customer reviews into your best marketing content.
Ink (#060606) + italic. No accent color on the hero phrase.
Accent as UI chrome
Section labels, legal/docs links, comparison “us” column, star fills in demos
How it works
Orange for labels and functional highlights. Not body copy.
Typography
Bricolage Grotesque only. Google Fonts on web; bundled TTFs in src/fonts/ for OG images. Prefer text-wrap: balance on headlines and short display lines; text-wrap: pretty on body paragraphs.
Display / H1 500 · clamp(40px, 5vw, 64px) · letter-spacing -0.04em
Reviews worth reading.
Section heading / H2 500 · clamp(32px, 4.5vw, 48px) · letter-spacing -0.02em
How the conversation works
Body 400–500 · 14–16px · line-height 1.6 · --text-secondary
BetterReviews guides customers through an AI conversation that produces detailed, photo-rich reviews.
Section label 11px · 700 · uppercase · accent pill
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 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.
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