Be Top Local

Logo

The Be Top Local logo features the bee icon (a hexagonal honeycomb body with wings, antennae, and a triangular stinger) alongside the stacked wordmark. "BE" and "LOCAL" appear in dark/black, while "TOP" is in the brand gold/yellow.

Primary Logo -- Light backgrounds

Reversed Logo -- Dark backgrounds

Icon Only (Color) -- Favicons, social avatars

Icon Only (Black) -- Monochrome uses, print, overlays

On Warm Surface -- #FDFBF6

Icon on Dark -- Dark background contexts

Logo Usage Rules

Use the provided logo files at their original proportions. Maintain clear space equal to the height of the bee icon on all sides. Use the reversed (white text) version on dark backgrounds. The bee icon can be used standalone for small formats like favicons and social profile pictures. The black monochrome bee icon is commonly used and appropriate for print, overlays, and anywhere a single-color mark is needed.

Don't

Don't stretch, rotate, or distort the logo. Don't change the logo colors (the gold "TOP" is part of the brand identity). Don't place the logo on busy backgrounds without sufficient contrast. Don't add effects like drop shadows, gradients, or outlines to the logo itself.

Available Logo Files

File	Format	Use
BeTopLocal.png / .jpg	Raster	Web, presentations, digital
BeTopLocal.eps	Vector	Print, large format, editing
BeTopLocal.pdf	Vector	Print, documents
BeTopLocalBee.png / .eps / .pdf / .psd	Mixed	Icon-only usage, color (favicons, avatars)
BeTopLocalBee-Black.png	Raster	Icon-only usage, black monochrome (print, overlays)
BeTopLocal (dark bg variant)	PNG	Dark background placements

Color Palette

The BTL palette centers on gold and near-black. Gold conveys authority and premium quality. The dark ink tones ground everything in seriousness. This isn't flashy startup energy. It's "we've been doing this for 20 years and we know what works."

Primary Gold

Gold

#C5A028

--gold

Gold Bright

#E2BC2E

--gold-bright

Gold Deep

#9A7B10

--gold-deep

Gold Subtle

#FAF6E8

--gold-subtle

Ink / Dark Tones

Ink

#111111

--ink

Ink Soft

#2A2A2A

--ink-soft

Ink Mid

#555555

--ink-mid

Ink Muted

#888888

--ink-muted

Ink Faint

#B8B8B8

--ink-faint

Surfaces

Surface

#FFFFFF

--surface

Surface Warm

#FDFBF6

--surface-warm

Surface Cool

#F7F7F5

--surface-cool

Borders

Border

#E5E5E3

--border

Border Light

#F0F0EE

--border-light

Semantic / Accent

Red

#BE3A2A

--red

Red BG

#FDECEB

--red-bg

Green

#1B7D42

--green

Green BG

#E8F5ED

--green-bg

Brand Gradients

Gold gradient: linear-gradient(90deg, var(--gold-deep), var(--gold-bright), var(--gold)) — Used for top accent bars and CTA hovers.

Dark gradient: linear-gradient(135deg, var(--ink), #2A2A2A) — Used for primary buttons at rest.

Gold CTA gradient: linear-gradient(135deg, var(--gold-deep), var(--gold-bright)) — Used for gold CTA buttons on dark backgrounds.

Typography

Two fonts. That's it. Playfair Display handles the heavy lifting on headlines, conveying authority and premium positioning. Outfit does everything else, from body copy to UI elements to buttons.

Display / Headline

Playfair Display

The Automatic Patient Machine

font-family: 'Playfair Display', serif
Weights used: 400 700 800 · Italic styles for 400 and 700
Use for: Headlines, hero text, large stat numbers, section titles, quotes, emphasized words

Body / UI

Outfit

You're paying for leads that don't convert, and the few that do call in get sent to voicemail. We fix both problems.

font-family: 'Outfit', sans-serif
Weights used: 300 400 500 600 700 800
Use for: Body copy, subheads, buttons, form inputs, labels, navigation, captions

Type Scale & Hierarchy

Element	Font	Size	Weight	Color
Hero headline	Playfair Display	`clamp(40px, 7.5vw, 68px)`	800	`--ink` with gold `<em>`
Section headline	Playfair Display	`clamp(30px, 5vw, 46px)`	700	`--ink`
Eyebrow / pre-head	Outfit	`10-13px`	700	`--gold`
Card title	Outfit	`16-18px`	700	`--ink`
Body copy	Outfit	`15-19px`	300	`--ink-mid`
Stat numbers	Playfair Display	`48px`	800	`--ink` (gold on hover)
Button text	Outfit	`14-15px`	700	White / `--ink`
Stat label	Outfit	`11px`	600	`--ink-muted`
Disclaimer / fine print	Outfit	`11px`	300	`--ink-faint`

Typographic Patterns

Use uppercase + wide letter-spacing (4-6px) for eyebrow labels and small category tags. Use italic Playfair in gold for emphasized words inside headlines. Use light weight (300) Outfit for body copy to keep things open and readable. Use bold (700) for strong/important inline text.

Don't

Don't use Playfair for body copy or long paragraphs. Don't use more than two font families. Don't use Outfit at weights below 300 or above 800. Don't set body text in all caps (reserve uppercase for eyebrows and buttons only).

UI Components

Consistent component styling across all BTL web properties. Cards, buttons, inputs, and dark panels all follow the same patterns.

Buttons

Primary (Rest)

Dark gradient bg, white text, 14px border-radius

Gold CTA

Gold gradient bg, dark text, used on dark sections

Button behavior: on hover, primary buttons shift to gold gradient with dark text. All buttons lift 3px with a shadow on hover. Text is always uppercase with 2.5px letter-spacing and weight 700.

Form Inputs

Background: --surface-cool / Border: 1.5px --border / Radius: 12px / Focus: gold border + gold glow ring

Cards

Standard Card

Card Title Here

Card body text uses light weight Outfit. Hover state adds gold border and subtle lift with gold-tinted shadow.

Stat Card

50%

Schedule Rate

Dark Panels

Your Marketing Is Broken.
Your Front Desk Makes It Worse.

Dark panels use --ink (#111111) background with subtle gold radial gradient overlays for depth. White headlines, gold italic emphasis, muted white body copy.

Design Tokens Summary

Property	Value
Card border-radius	`18px` (standard) / `22-28px` (large panels)
Button border-radius	`14px`
Input border-radius	`12px`
Border width	`1.5px`
Border color	`#E5E5E3`
Card padding	`28-32px`
Section padding	`48-72px` vertical
Container max-width	`800px` (landing pages) / `960px` (decks)
Hover lift	`translateY(-3px)`
Hover shadow (gold)	`0 6px 28px rgba(197,160,40,0.1)`
Focus ring	`0 0 0 4px rgba(212,175,55,0.2)`
Gold accent bar height	`3-5px`
Transition timing	`0.3-0.4s cubic-bezier(0.16,1,0.3,1)`

Brand Voice

BTL's voice is confident, direct, and honest. We speak to doctors who've been burned before. No hype, no fluff. Just proof and straight talk backed by 20+ years and 700+ practices.

🎯

Direct

Short sentences. Punchy copy. No corporate speak. We say what we mean and we mean what we say.

📊

Proof-Led

Every claim gets backed up. Real numbers, real results, real client outcomes. "Trust me" doesn't work. Data does.

🤝

Honest

We acknowledge skepticism head-on. Our prospects have been burned by agencies. We lead with empathy, then deliver proof.

Writing Rules

Do Write Like This

"You're paying your front desk to lose you $50,000 a month."

"35-50% of inbound calls ring out during busy hours. That's a $5,000 patient who just called your competitor."

"We'll prove it with a phone call. In 60 seconds."

Don't Write Like This

"Our innovative solutions leverage cutting-edge technology to optimize your patient acquisition pipeline."

"We're passionate about helping healthcare providers achieve their growth objectives."

"Schedule a complimentary consultation to learn more."

Copy Patterns

Pattern	Description	Example
Pain-first headlines	Lead with the problem, not the solution	"Your Marketing Is Broken."
Specific numbers	Always tie claims to concrete metrics	"50% schedule rate" not "improved results"
Challenge framing	Dare the reader to verify the claim	"50% schedule rate. Prove it." then answer it
Urgency without hype	Create urgency through logic, not pressure	"Still reading? The AI could have called you by now."
Italic gold emphasis	Use <em> in gold for the key emotional word	"to Lose You $50,000"

Quick Reference

Copy-paste ready CSS variables and Google Fonts import for any new BTL web project.

CSS Variables

:root {
  /* Primary Gold */
  --gold: #C5A028;
  --gold-bright: #E2BC2E;
  --gold-deep: #9A7B10;
  --gold-glow: rgba(212,175,55,0.2);
  --gold-subtle: #FAF6E8;

  /* Ink / Dark Tones */
  --ink: #111111;
  --ink-soft: #2A2A2A;
  --ink-mid: #555555;
  --ink-muted: #888888;
  --ink-faint: #B8B8B8;

  /* Surfaces */
  --surface: #FFFFFF;
  --surface-warm: #FDFBF6;
  --surface-cool: #F7F7F5;

  /* Borders */
  --border: #E5E5E3;
  --border-light: #F0F0EE;

  /* Semantic */
  --red: #BE3A2A;
  --green: #1B7D42;
  --green-bg: #E8F5ED;
  --red-bg: #FDECEB;
}

Google Fonts Import

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,800;1,400;1,700&family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet>

Logo Color Note

The actual logo bee and "TOP" text use a slightly warmer/brighter yellow (~#F2C029) than the web gold (#C5A028). This is intentional. The logo yellow is optimized for logo legibility. The web gold is a more muted, sophisticated tone for UI elements and accents. Both are part of the brand. Don't try to force one to match the other.