Brand Kit — Smart Inbox Leads
Brand Identity

SMART INBOX
LEADS

This document defines the visual language and design standards for Smart Inbox Leads. Use these guidelines to maintain consistency across all touchpoints — product, marketing, and communications.

Version 1.0 March 2026 smartinboxleads.com
01 Logo & Icon
Purple Gradient
Primary Icon
64 × 64px · favicon
Neutral
Light Backgrounds
Gray palette
White
Transparent BG
Use on dark surfaces
Black
Transparent BG
Use on light surfaces
02 Color Palette
Background
#0c0c10 --bg
Surface
#111118 --bg2
Elevated Surface
#17171f --bg3
Accent Gradient
#a855f7 → #7c3aed Primary CTA
Accent
#a855f7 --accent
Accent Dark
#7c3aed --accent2
Safe / Success
#22c55e --safe
Risky / Warning
#f59e0b --risky
Invalid / Error
#ef4444 --invalid
03 Typography
Hero Headline Bebas Neue
72–96px / 0.9 lh
Letter-spacing: 2px
SMART INBOX
LEADS
Page heroes, product name, major section openers. Always uppercase. Gradient or solid white.
Section Title Bebas Neue
32–40px / 1.0 lh
Letter-spacing: 2px
BULK VERIFICATION
Section headers, panel titles, feature names. Solid white or accent.
Sub-heading Bebas Neue
20–28px / 1.1 lh
Letter-spacing: 1px
WHAT DO WE VERIFY?
FAQ titles, card headers, UI labels. Can use accent color.
Eyebrow / Label Inter 600
10–11px / 1.0 lh
Letter-spacing: 2–3px
Uppercase
● SMART INBOX LEADS
Category tags, badges, pill labels, breadcrumbs. Almost always accent purple.
Body Text Inter 400
13–15px / 1.7–1.8 lh
Letter-spacing: 0
Verify email deliverability at scale or one at a time — powered by real-time SMTP verification across 8 layers of deep scanning.
Paragraphs, descriptions, FAQ answers. Full --text color on dark, --bg on light.
UI / Caption Inter 400–500
10–12px / 1.5 lh
Letter-spacing: 0–0.5px
9,976 remaining today · Resets at 8:00 AM PHT
Helper text, timestamps, metadata, secondary info. Always --muted color.
Monospace Courier New / mono
11–12px / 1.6 lh
--accent: #a855f7
CSS variables, hex codes, API references, technical values.
04 Font Colors
Primary Text
#f0f0f5 — var(--text)
The quick brown fox
Main body text, headings on dark backgrounds. Default for all readable content.
Accent Purple
#a855f7 — var(--accent)
SMART INBOX LEADS
Highlights, labels, CTAs, active states, links, eyebrow tags.
Gradient Text
#d8b4fe → #a855f7 → #7c3aed
VERIFIER
Hero headline accents, logo sub-word. Use sparingly — one element per screen.
Muted
#7878a0 — var(--muted)
Secondary descriptions
Subtitles, helper text, timestamps, secondary descriptions. Never for primary content.
Muted Dark
#50506a — var(--muted2)
Tertiary / disabled
Placeholder text, disabled states, de-emphasized metadata. Lowest hierarchy.
Safe / Success
#22c55e — var(--safe)
✓ Safe · Deliverable
Verification status labels, success states, positive metrics only.
Risky / Warning
#f59e0b — var(--risky)
⚠ Risky · Catch-all
Warning states, risky email flags, caution indicators. Never for decorative use.
Invalid / Error
#ef4444 — var(--invalid)
✕ Invalid · Error
Error messages, invalid email status, destructive actions. Functional use only.
05 Do's & Don'ts
DO
✓
Use Bebas Neue for all headline and display text It defines the brand's authority and boldness. Pair with Inter for body copy.
✓
Keep the primary background dark (#0c0c10) The brand lives in dark mode first. Light mode is secondary.
✓
Use the purple gradient for primary CTAs and accent elements linear-gradient(135deg, #a855f7, #7c3aed) — buttons, highlights, active states.
✓
Use semantic colors strictly for status indicators Green = safe, Amber = risky, Red = invalid. Never swap these for decoration.
✓
Maintain generous whitespace between sections Density should feel controlled, not cramped. Min 48px between major sections.
✓
Use border-radius: 16px for cards, 10px for buttons Consistent rounding creates a cohesive, modern feel across all components.
✓
Write headline copy in ALL CAPS Bebas Neue is designed for uppercase. Mixed case breaks the visual rhythm.
DON'T
✕
Don't use system fonts or Arial/Roboto They undermine brand distinctiveness. Only Bebas Neue + Inter are approved.
✕
Don't place the icon on busy or clashing backgrounds Use the white icon on dark, black icon on light, purple icon on dark brand backgrounds.
✕
Don't stretch, skew, or rotate the lightning bolt icon The aspect ratio is fixed. Scale uniformly only.
✕
Don't use more than one gradient text element per screen Gradient text is a hero accent — overusing it dilutes impact.
✕
Don't use red, green, or amber for decorative purposes These are reserved strictly for Safe / Risky / Invalid status communication.
✕
Don't use low-contrast text on dark backgrounds Body text must be --text (#f0f0f5). --muted is for secondary info only, never body copy.
✕
Don't use emojis as icons in the UI All icons must be Lucide-style SVGs. Emojis break visual consistency and rendering.
SMART INBOX LEADS
© 2026 Smart Inbox Leads · Brand Kit v1.0 · brand.smartinboxleads.com