Brand and design kit
Everything needed to represent Blue Reacher correctly: the logo and its clear space, the colour tokens, the type scale, the components, and how we write. This page renders from the live site theme, so what you see here is what the site is actually using today.
Logo
The mark is a speech bubble folded into a B, and it doubles as the B in the wordmark. Two shapes, one gradient, never recoloured.
Minimum size 24px
Do
- Keep clear space on every side equal to the height of the mark.
- Use the black wordmark on light, the white one on dark.
- Write the name as one word, Blue Reacher, in running text.
Do not
- Recolour, rotate, stretch, or add effects to the mark.
- Put a second B next to the mark in a lockup.
- Rebuild the wordmark in another typeface.
Colour
One accent, #007AFF, and nothing else competes with it. Where variation is needed, it comes from tints of the same blue rather than a second colour.
Brand
#007AFF
Fills, large display text, icons, borders, charts
Brand text
--brand-text
Small text and links. The brand blue reads at 4.02:1 on white, under the 4.5 small text needs, so a slightly darker variant carries text and the identity colour keeps everything else.
Brand soft
--brand-soft
Tinted panels, hover fills, badge grounds
Neutrals
Background
--background
Page ground state
Surface
--surface
Cards, wells, footer
Raised
--surface-raised
Anything floating above surface
Border
--border
Hairlines and dividers
Muted
--muted
Secondary text
Foreground
--foreground
Body text
Semantic
Success
--success
Delivered, healthy, live
Warning
--warning
Queued, approaching a cap
Error
--error
Failed, blocked, destructive
Green is a status colour only. It never carries brand meaning, because a green bubble is the thing this product exists to replace.
Typography
Three typefaces, three fixed jobs. Newsreader carries every headline, Geist carries everything else, and Geist Mono carries labels, badges, and code. Tracking tightens as size grows, and every number is tabular so tables and counters do not jitter.
01
Newsreader
Send blue. Get replies.
Headlines. Every h1 through h6, and nothing else.
02
Geist
Send blue-bubble iMessages from your CRM across the whole funnel.
Everything else: body copy, UI, buttons, navigation.
03
Geist Mono
POST /v1/messages
Labels, badges, specs, and code.
Defaults
Headline family
Newsreader, Georgia, serif
Body family
Geist, system-ui, sans-serif
Mono family
Geist Mono, ui-monospace, monospace
Body tracking
-0.011em
Heading tracking
-0.015em, easing to -0.02em at display sizes
Numerals
tabular-nums everywhere a number appears
Scale
Display
48 / 600 / Newsreader
Send blue. Get replies.
H1
36 / 600 / Newsreader
The Blue Funnel
H2
24 / 600 / Newsreader
Built for B2B sales teams
H3
18 / 600 / Newsreader
How the funnel map works
Lead
18 / 400 / Geist
You already paid for the lead. The channel is why they never replied.
Body
16 / 400 / Geist
Default body copy. Every paragraph on the site sits here.
Small
14 / 400 / Geist
Helper text, table cells, captions.
Label
12 / 400 / Geist Mono
Reply rate 62.4% · Delivered 1,284
Shape and depth
A 4px spacing grid, five radii, and three shadow levels. A hairline border is the default way to separate things; a shadow is reserved for something that genuinely floats.
Buttons, inputs
Cards, alerts
Panels
Device frames
Badges, bubbles
Hairline
Resting cards
Soft
Hover and raised panels
Float
Modals, popovers, device frames
Components
One primary action per view, labelled with a verb. Everything else steps back.
Card
1px border, surface fill, 12px radius, 24px padding.
Stat
Label in small caps, number at 32px, change underneath.
Panel
Same as a card at 16px radius, used for whole sections.
The message thread
The signature component. Outbound bubbles carry the brand fill, inbound sit on a neutral ground, and the green bubble appears in one situation only: showing what the alternative looks like.
Hey Dana, saw Northwind opened a second location. Worth 15 minutes on how you handle inbound across both?
Ha, we are drowning honestly. What do you do?
Read, replied in 4 minutes
Hey Dana, got two slots left this week. Reply STOP to opt out.
Following up on my last message
No reply
Section devices
The larger instruments pages are built from, added in the v4 design pass. Each one renders its facts from the pricing module or the verified vendor registry, never from retyped numbers.
Stat cards
A number beside a drawn chart of the claim it makes. Widths vary; no uniform metric strips.
Fine-print quotes
Competitor pricing small print, verbatim, dated, and linked to its source. Our card sits in the same grid.
Vs cards
Both vendors on one rubric at the top of every compare page: published price, description, price note.
Ranked glance
A roundup's vendors in order of first mention, with registry facts beside each rank.
Workflow strip
Trigger, send, reply drawn as a route on the dotted canvas. Opens every use-case page.
Sticky plan bar
The size chosen in the pricing slider travels with the reader once the slider scrolls away.
Filtered matrix
Capabilities as rows with category chips. The full list is the server-rendered state; chips only narrow it.
Bento with drawn visuals
Product cards whose surfaces are built in code, in our tokens, on real product behaviour.
Not Delivered
The 404's device: our own send failing, in the channel's own vocabulary.
Voice
Direct, specific, no marketing fog. Lead with the answer and back it with a number. If a claim has no number behind it, cut it or go find the number.
Do
You already paid for the lead. The channel is why they never replied.
Do not
Unlock unparalleled engagement across your messaging stack.
Do
2-3x the reply rate of cold email, no A2P registration required.
Do not
Dramatically improve your outreach performance.
Do
Book your Blue Funnel Map
Do not
Submit
Do
Three messages did not deliver. Those numbers are not reachable on iMessage, so send them by SMS or drop them.
Do not
An error occurred. Please try again later.
No dashes standing in for a comma or a full stop. Contractions are fine. Buttons and headings in sentence case. Never open with flattery or an apology.
Files
Download what you need. The tokens file is the same set of variables this page renders from.
- Mark512 x 512 PNG, transparentDownload
- Wordmark for light backgrounds2400 x 400 PNGDownload
- Wordmark for dark backgrounds2400 x 400 PNGDownload
- Colour and shape tokensCSS custom propertiesDownload
Using the brand somewhere we have not thought of? Email support@bluereacher.com and we will get you the right file.