This page is not indexed by search engines. Share the URL directly with press, partners, or directories.

Brand Guidelines

The Reachly Brand Bible

Logo, color, typography, spacing, components, and voice — everything needed to represent Reachly correctly.

02 — Color

Full color palette

Every color used across the product and marketing site, with its intended purpose.

Brand Blue
#2563eb
RGB(37, 99, 235)
Primary CTAs, links, active states, logo — triangle gradient end colour
Sky Blue
#38bdf8
RGB(56, 189, 248)
Triangle gradient start, logo highlight
Dark Navy
#020817
RGB(2, 8, 23)
Page background
Dark Alt
#030b1a
RGB(3, 11, 26)
Alternating section background
Slate 900
#0f172a
RGB(15, 23, 42)
Browser frame, deep cards
Slate 800
#1e293b
RGB(30, 41, 59)
Secondary surfaces
White
#ffffff
RGB(255, 255, 255)
Screen mockups, brand page, frames
Heading
#f1f5f9
RGB(241, 245, 249)
All headings on dark backgrounds
Body
#94a3b8
RGB(148, 163, 184)
Body copy on dark
Muted
#64748b
RGB(100, 116, 139)
Captions, labels, inactive nav
Success
#22c55e
RGB(34, 197, 94)
Positive states, won deals
Warning
#f59e0b
RGB(245, 158, 11)
Coming soon badges
Danger
#ef4444
RGB(239, 68, 68)
Overdue states
Hot
#dc2626
RGB(220, 38, 38)
Hot lead score
Warm
#d97706
RGB(217, 119, 6)
Warm lead score
Cold blue
#3b82f6
RGB(59, 130, 246)
Cold lead score
WhatsApp
#25D366
RGB(37, 211, 102)
WhatsApp send button ONLY, no other use
03 — Typography

Typography

Font stack: Inter, system-ui, -apple-system, sans-serif. Headings use 1.15 line-height, body text uses 1.7.

Reachly scores your leadsDisplay — 44px / 800
Reachly scores your leadsH1 — 38px / 800
Reachly scores your leadsH2 — 34px / 800
Reachly scores your leadsH3 — 22px / 700
Reachly scores your leadsH4 — 18px / 700
Reachly scores your leadsBody Large — 17px / 400
Reachly scores your leadsBody — 15px / 400
Reachly scores your leadsSmall — 13px / 400
Reachly scores your leadsCaption — 11px / 500
Reachly scores your leadsLabel — 10px / 600
04 — Spacing

Spacing system

Base unit: 8px. All spacing on the site is a multiple of this.

8px
16px
24px
32px
48px
64px
80px
100px
05 — Border Radius

Border radius

6px

Tags, pills, badges

8px

Inputs, buttons, cards

12px

Large cards, feature rows

14px

Browser frames

40px

Phone frames

Full

Fully round

06 — Components

UI components

Start Free Trial
Primary button
Book a Demo
Secondary button
AI lead scoring
Feature tag / pill
HOT 94WARM 62COLD 21
Score badges
Section Label
Section eyebrow label
COMING SOON
Coming soon badge
07 — Voice

Tone of voice

1

Direct, not fluffy

Say what it does, not what it "empowers." Skip the marketing verbs.

2

Confident, not arrogant

State facts, skip superlatives. Let the product speak for itself.

3

Specific, not vague

"$19/month" beats "affordable." Numbers over adjectives, always.

4

Sales-professional audience

They know what a pipeline is. Don’t explain basics they already know.

5

Bilingual aware

English and Arabic equally. Never translate literally — write natively in each.

08 — Logo Usage

Do and don't

Do
✓

Maintain clear space around the logo equal to the height of the icon mark.

✓

Use the dark-colored logo on light backgrounds, and the light-colored logo on dark backgrounds.

✓

Scale the logo proportionally — lock width and height together.

✓

Use the icon alone only when space is too small for the full lockup.

✓

Always pull the logo from this page or the official brand kit.

✓

Give the logo room to breathe — don’t crowd it with other elements.

Don't
✕

Stretch or distort the logo in any direction.

✕

Recolor the logo outside the approved light/dark variants.

✕

Place the logo on busy or low-contrast backgrounds.

✕

Add effects — shadows, outlines, gradients, glows — to the logo.

✕

Recreate the logo from memory or approximate it.

✕

Use old or outdated versions of the logo.

09 — Press Contact

Questions about the brand?

Reach out for press inquiries, partnership assets, or anything not covered on this page.

[email protected]