Brand Identity System
HONEYBUN
COLOR PALETTE
Version 2.0 · 2026
Local Marketing. Handled.
Veteran-Owned · gethoneybun.com

Black does the work.
Gold commands attention.
White delivers the message.
Strike
STRIKE GOLD
#FFB800
CTAs · Key words · Glow edges · Active states · "Look here"
PMS 7409 C · Madeira 1070 · Isacord 0704
Core
CORE GOLD
#B8952A
Logo · Brand accents · Icons · Secondary highlights
Burnt
BURNT GOLD
#5A450F
Gradients · Shadows · Depth · Subtle background elements
THE MANDATORY GRADIENT · #FFB800 → #B8952A → #5A450F
135deg for diagonal · 90deg for horizontal bars · Always Strike → Core → Burnt
TRUE BLACK
#080808
Page background. The void everything lives on.
PRIMARY SURFACE
#111111
Cards, tables, panels. First elevation.
SECONDARY SURFACE
#191919
Inputs, nested elements. Second elevation.
ELEVATED SURFACE
#202020
Dropdowns, tooltips, table headers. Third elevation.
Aa
Primary Text
#FFFFFF · Pure White
Headlines, body copy, all primary readable content. No softening.
Aa
Secondary Text
#B0B0B0
Labels, captions, supporting info. Readable but recedes.
Aa
Dim Text
#6A6A6A
Placeholders, disabled states, metadata. Background noise.
DEFAULT
Default Border
#252525
Resting state. Structural. Invisible unless you look.
HOVER
Hover Border
#3A3A3A
First interaction signal. Subtle lift without gold.
ACTIVE
Active Border
rgba(255,184,0,0.45)
Focus, selected, engaged. Gold bleeds in. UI comes alive.
SOFT GLOW
rgba(255,184,0,0.15)
Card hover states, ambient background elements, subtle UI depth.
MEDIUM GLOW
rgba(255,184,0,0.35)
Active borders, focused inputs, engaged buttons. Standard interaction.
HARD GLOW
rgba(255,184,0,0.65)
Hero moments only. Locked state reveal, primary CTA hover. Use sparingly.
OPEN
#4CAF7D
Available slots, success states, confirmed actions.
LOCKED
#C0392B
Taken markets, locked rows, conflict states, errors.
PENDING
#FFB800
In pipeline, awaiting confirmation, transitional states.
CHURNED
#3A3A3A / #6A6A6A
Inactive, cancelled, historical. Recedes to background.
BEBAS NEUE
Display Font · Bebas Neue
Regular 400 · Use: Headlines, stat values, section labels, page titles
DM Sans — body copy that reads clean at any size. Thin weight for large hero text, medium weight for UI labels.
DM Mono · data · labels · code · hex values
Body: DM Sans 300/400/500/600 · Mono: DM Mono 400/500
DM Sans: paragraphs, UI text · DM Mono: labels, data, hex values, badges
LOCKED OPEN PENDING CHURNED
01
Gold is NOT decoration
Gold = action, power, movement. If everything is gold, you lose authority. Use Strike Gold only where the eye must go. Everywhere else — black and white carry the load.
02
Contrast is your weapon
Black vs gold vs white. Not gray-on-gray-on-gray. Hard white #FFFFFF on true black #080808 creates the tension that makes the gold land.
03
Imperfection beats sterile
Keep the glow bleed, slight grain, and subtle irregularity. Noise texture at 3–4% opacity. Radial hotspot behind the logo. That's what makes it feel alive — not designed by committee.
04
Gradients are non-negotiable
#FFB800 → #B8952A → #5A450F is your identity gradient. Use it on buttons, highlights, hover states, logo glow, and section markers. This is what separates HoneyBun from every generic SaaS tool.
/* ── HONEYBUN BRAND COLOR SYSTEM v2.0 ── */
/* gethoneybun.com · Veteran-Owned        */

:root {
  /* Gold Stack */
  --gold-strike:   #FFB800;  /* ATTENTION — CTAs, glow, key moments */
  --gold-core:     #B8952A;  /* BRAND — logo, accents, icons        */
  --gold-burnt:    #5A450F;  /* DEPTH — gradients, shadows          */

  /* Mandatory Gradient */
  --gradient:      linear-gradient(135deg, #FFB800 0%, #B8952A 50%, #5A450F 100%);
  --gradient-h:    linear-gradient(90deg,  #FFB800 0%, #B8952A 50%, #5A450F 100%);

  /* Base Surfaces */
  --black:         #080808;  /* Page background                     */
  --surface:       #111111;  /* Cards, tables                       */
  --surface-2:     #191919;  /* Inputs, secondary                   */
  --surface-3:     #202020;  /* Elevated, headers                   */

  /* Borders */
  --border:        #252525;  /* Default                             */
  --border-lit:    #3A3A3A;  /* Hover                               */
  --border-active: rgba(255,184,0,0.45);  /* Active / focus      */

  /* Text */
  --text:          #FFFFFF;  /* Primary — pure white                */
  --text-mid:      #B0B0B0;  /* Secondary                           */
  --text-dim:      #6A6A6A;  /* Placeholders, disabled              */

  /* Glow System */
  --glow-soft:     rgba(255,184,0,0.15);  /* Ambient                */
  --glow-med:      rgba(255,184,0,0.35);  /* Interaction            */
  --glow-hard:     rgba(255,184,0,0.65);  /* Hero moments only      */

  /* Functional */
  --green:         #4CAF7D;  /* OPEN / success                      */
  --red:           #C0392B;  /* LOCKED / conflict / error           */
  --pending:       #FFB800;  /* PENDING — matches Strike Gold       */

  /* Typography */
  --font-display:  'Bebas Neue', sans-serif;
  --font-body:     'DM Sans', sans-serif;
  --font-mono:     'DM Mono', monospace;
}
PROBLEM STATE
? ? ? ? 1 CITY RANKED
Operator is dim, #C0392B stroke at 70% opacity. Question marks float at mixed sizes/opacity. City dots are #252525 (dead). One dot is red (the only ranking). Label in DM Mono 8px.
SOLUTION STATE
ALL CITIES RANKED
Operator is bold, #FFB800 stroke at 2.5px. Radiating lines connect to every city at decreasing opacity (.2→.35). City dots glow with rgba fills. Center dot is largest.
VALUE EXCHANGE PATTERN
OPERATOR VALUE FLOWS → ← DATA RETURNS HONEYBUN DELIVERS SERVICE PUBLISHES RESULTS
Two-way dashed arrows. Right-flowing arrow is #4CAF7D (value). Left-flowing arrow is #B8952A (data). Operator is stick figure. HoneyBun is brand box with glow fill. Always label both sides.
SVG CONSTRUCTION TOKENS
FIGURE STROKE
2.5px #FFB800
PROBLEM STROKE
2px #C0392B 70%
CONNECTION LINES
1px .2→.35 opacity
CITY DOT FILL
rgba(255,184,0,.12–.25)
DEAD DOT
#252525 / #3A3A3A
EXCHANGE ARROW
dash 4 3 · #4CAF7D
DATA ARROW
dash 4 3 · #B8952A
QUESTION MARKS
DM Mono · .2–.4 opacity
Every HoneyBun page follows this section order. Sections can be omitted for shorter pages, but the sequence never changes. This is the conversion skeleton — Kennedy/Halbert architecture adapted for dark-gold brand language.
01
Topbar
Sticky. Logo left, offer name center, secure signal right. Background rgba(8,8,8,.92) with backdrop-filter: blur(12px). Founding Partner badge if applicable.
02
Hero
Kicker (DM Mono, gold-core, 2px letter-spacing) → H1 (Bebas Neue, gradient text on key phrase) → Subhead (DM Sans 300) → Proof pill (glow-soft bg, border-act border, mono text).
03
Stick Figure Visualization
Before/after SVG panels showing the problem → solution transformation. Problem panel uses red border + dim operator. Solution panel uses gold-strike border + connected operator. Always side-by-side with arrow between.
04
Value Callout
Gradient-border card. Badge (gradient-h background, black text, mono 9px). Headline in Bebas Neue. Exchange SVG diagram if showing a two-party deal. Body in DM Sans 300.
05
Momentum Strip
Full-width bar on --surface background. 5 trust tokens with gold dot bullets. DM Mono 10px. Bold gold value + regular dim descriptor.
06
Tier Cards / Offer Stack
Price in Bebas Neue with gradient text. Featured card gets gold-core border + gradient badge + pulse-cta animation. Savings callout with green border. Ghost CTA for secondary, gradient CTA for primary.
07
How It Works
3-step grid. Each card has gradient top-bar (2px), ghost Bebas Neue number at .15 opacity, DM Sans title + body. Keep it to 3 steps maximum.
08
What You Get
2×2 card grid. Emoji icon → Bebas Neue title → DM Sans 300 body. Each card names a specific deliverable with a specific outcome.
09
Guarantee
Gold-bordered card. Shield emoji at 60px. Gradient badge with guarantee name. Bebas Neue headline. DM Sans body with bold proof anchor. Founder anchor pill at bottom (mono, gold-core, border-act).
10
Proof
2-column card grid. Each card: mono gold label → DM Sans body → stat row (Bebas Neue gradient numbers + DM Mono labels). Primary card = real case study. Secondary card = program/offer reinforcement.
11
Qualifier
2-column: "This IS for you" (green border, green Bebas Neue title, ✓ prefix) and "This is NOT for you" (red border, red Bebas Neue title, ✗ prefix). List items in DM Sans 300.
12
Final CTA
Pain headline (Bebas Neue, gradient on urgency phrase). DM Sans subhead. Two buttons: gradient primary + ghost secondary ("Talk to [Founder]"). Centered layout.
13
Footer + Sticky Bar
Footer: gradient logo, dim links, 10px disclosure. Sticky CTA bar: appears after hero scroll, rgba(8,8,8,.95) bg, backdrop-filter, tier buttons (ghost + gradient primary).
Kennedy/Halbert principles adapted for HoneyBun's brand voice. These are non-negotiable on every page, email, ad, and checkout asset.
01
Headlines Pass the Halbert Test
Swap the business name for a competitor's. If the headline still works, rewrite it. It must belong only to HoneyBun.
✓ "YOU RANK IN ONE CITY. YOU SERVE FIFTEEN."
✗ "Grow Your Business With Better SEO"
02
No Generic CTAs — Ever
"Learn More," "Contact Us," "Submit," and "Get Started" are banned. Every CTA names a specific action with a specific outcome.
✓ "Deploy 200-Page Territory →"
✗ "Get Started" · "Learn More" · "Submit"
03
Proof Is Specific and Front-Loaded
"5 cities ranked in 90 days" beats "fast results." Numbers go above the fold. Vague claims get cut entirely. If you don't have the number, don't fake it.
✓ "130 pages deployed · 5 cities ranked · 90 days"
✗ "Great results for our clients"
04
Agitate Before You Reveal
Lead paragraphs name the pain the prospect has already experienced. Never open with "Welcome to" or a restatement of the headline. Make them feel the wound before showing the bandage.
✓ "Your competitor just booked the wedding you can't rank for."
✗ "Welcome to HoneyBun, the local SEO platform."
05
Offer Stack Before Price
Show everything that's included at each tier before revealing the number. Perceived value must exceed stated price. The displacement math re-anchors the brain before the card appears.
✓ "≈ $88,400/yr in displaced ads" → then show the $1,000 price
✗ Price card with no context or value anchor
06
Urgency Must Be Real
Founding Partner slots are genuinely limited per market. Use that. Never manufacture fake countdown timers or invented scarcity. Real constraints convert harder than theater.
✓ "One operator per city cluster — total exclusivity."
✗ "Only 2 spots left! (resets every page load)"
07
One Dominant CTA Per Page
Every page asks for one thing. Multiple competing CTAs fragment attention and kill conversion. Secondary actions (ghost buttons, anchor links) exist only to keep hesitant prospects on the page.
✓ One gradient CTA + one ghost fallback
✗ "Book a Call" + "See Pricing" + "Watch Demo" + "Download Guide"
08
No Placeholder Copy
If a data point is needed and not available, flag it with [NEEDS: description] rather than writing generic filler. Shipping with vague copy is worse than shipping with a visible gap.
✓ [NEEDS: Founding Partner case study data at 90 days]
✗ "Trusted by hundreds of businesses nationwide"