Design System

Single source of truth for the BRANDefenders refresh UI. All classes live in src/styles/refresh/ (tokens, typography, components).

1. Typography

Bebas Neue display headings + system-font body text. Responsive sizes scale at 768px and 1280px.

Token Class Mobile md (768) xl (1280)
H1 Hero h1.refresh-heading 48px 64px 72px
H2 Section h2.refresh-heading 36px 48px 54px
H3 Card h3.refresh-subheading 24px 28px 32px
Eyebrow .refresh-eyebrow 14px · 600 · uppercase · 0.05em tracking
Body .refresh-body 15px 17px
Body (dark bg) .refresh-body .refresh-body-light Same sizes, white/80 color
Body Small .refresh-body-sm 14px · 1.5 line-height
Stat Number .refresh-stat 24px 28px · 700 weight

H1 — Hero Headline

Bebas Neue · 48→64→72px · Used in page hero sections

Is ChatGPT Recommending You? 

<h1 class="refresh-heading text-brandBlue">...</h1>

H2 — Section Title

Bebas Neue · 36→48→54px · Used for every section heading

Enterprise Brand Management 

<h2 class="refresh-heading text-brandBlue">...</h2>

H2 — On Dark Background

Same class, white text via Tailwind utility

Ready to Get Started? 

<h2 class="refresh-heading text-white">...</h2>

H3 — Card / Subheading

Bebas Neue · 24→28→32px · Used inside cards, outcomes, steps

Revenue Acceleration 

<h3 class="refresh-subheading text-brandBlue">...</h3>

Eyebrow

14px · 600 weight · uppercase · yellow · Used above section headings

The Reputation Equity Engine™

Section Title Goes Here 

<p class="refresh-eyebrow">Eyebrow Text</p>

Body Text

15→17px · 1.6 line-height · Used for section descriptions

Your reputation directly impacts revenue. The Reputation Equity Engine™ is our proven system for converting brand trust into measurable business outcomes across every channel. 

<p class="refresh-body">...</p>

Body Text — Dark Background

Add .refresh-body-light for white/80 text on dark sections

Understand where every dollar is going, and why it's going there. Let's make better decisions for your business together. 

<p class="refresh-body refresh-body-light">...</p>

Body Small — Card Text

14px · 1.5 line-height · Used inside cards for descriptions

Monitors and improves what people say about your business online to build trust and attract more customers. 

<p class="refresh-body-sm">...</p>

Stat Number

24→28px · 700 weight · Used for metrics in case study cards

328% Traffic increase
94% Negative results reduced
666K+ Impressions generated 
<span class="refresh-stat">328%</span>

2. Buttons

Base class .btn-refresh + variant. Replaces legacy .btn .btn-primary.

Primary

Yellow bg, dark blue text. Main CTAs.

Get Started 
<a class="btn-refresh btn-refresh-primary" href="#">Get Started</a>

Ghost (Outlined)

Dark blue border, fills on hover. Secondary CTAs on light backgrounds.

Learn More 
<a class="btn-refresh btn-refresh-ghost" href="#">Learn More</a>

Ghost Light (Dark Backgrounds)

White border/text. Subtle white fill on hover.

Explore 
<a class="btn-refresh btn-refresh-ghost-light" href="#">Explore</a>

Button Pair (Hero Pattern)

Primary + Ghost side by side, as used in hero sections.

Request Your AI Visibility Report Learn About AI-Defined® GEO

Button Pair (Dark Background Pattern)

Primary + Ghost Light, as used in the Expand CTA section.

Free SEO Audit Schedule a Call

3. Text Links

Inline links with optional animated arrow.

Link with Arrow

Arrow slides right on hover. Used for "Read More" patterns.

Read More 
<a class="link-refresh link-refresh-arrow" href="#">Read More</a>

Plain Link

No arrow, turns yellow on hover.

View All Industries 
<a class="link-refresh" href="#">View All Industries</a>

4. Cards

Card patterns used across the homepage refresh components. Each variant is purpose-built for its section.

Standard Card .card-refresh

Dark blue border, yellow on hover. Generic utility card.

Strategic Brand Management

Defines and strengthens your brand identity so customers recognize, trust, and choose you over competitors. 

<div class="card-refresh">
  <h3 class="refresh-subheading">...</h3>
  <p class="refresh-body-sm">...</p>
</div>

Subtle Card .card-refresh-subtle

Light border, yellow on hover. Less emphasis.

Online Reputation Management

Monitors and improves what people say about your business online to build trust and attract more customers. 

<div class="card-refresh card-refresh-subtle">...</div>

Feature Card — Icon + Title + Text

Centered icon badge, Bebas title, body text. Border turns yellow on hover. Used in WhatWeDo 3-column grid.

Build

Create brand authority that accelerates deal velocity and increases buyer confidence.

Protect

Eliminate reputation threats that kill conversions and hand opportunities to competitors.

Amplify

Activate trust signals across search, AI, paid media, and sales channels. 

<div class="card-feature">
  <div class="card-feature__icon-wrap">
    <div class="card-feature__icon"><img .../></div>
  </div>
  <h3 class="refresh-subheading">Build</h3>
  <p class="refresh-body">...</p>
</div>

Capability Card — Compact Icon + Title + Text

Left-aligned icon, smaller padding. Transparent bg on colored section. Border turns yellow on hover. Used in Capabilities 4×2 grid.

Strategic Brand Management

Defines and strengthens your brand identity so customers recognize, trust, and choose you.

Online Reputation Management

Monitors and improves what people say about your business online.

Search Visibility (SEO)

Gets your business found on Google and establishes you as an expert.

Paid Media & Performance

Drives immediate, measurable sales and leads through targeted campaigns. 

<div class="card-capability">
  <div class="card-capability__icon"><img .../></div>
  <h3 class="refresh-subheading text-brandBlue">...</h3>
  <p class="refresh-body-sm text-brandBlue">...</p>
</div>

Industry Card — Image Header + Body + Arrow CTA

Image with gradient overlay, three-dot badge, title, clamped description (3 lines), and arrow link CTA. Used in Industries 3-column grid.

Healthcare

Healthcare Brand & Trust Control

Healthcare decisions are made before appointments are scheduled. Patients, families, and payers evaluate providers through search results and reviews.

See Medical Packages
Finance

Finance & Banking Brand Control

Financial institutions are evaluated long before applications are submitted. Clients assess credibility through search results and media coverage.

See Finance Packages
Construction

Construction & Real Estate

Buyers, investors, and partners evaluate credibility before starting a conversation. Search results and project visibility shape that perception.

See Construction Packages 
<div class="card-industry">
  <div class="card-industry__image">
    <img src="..." alt="..." />
    <div class="card-industry__overlay"></div>
    <div class="card-industry__dots">...</div>
  </div>
  <div class="card-industry__body">
    <h3 class="refresh-subheading">...</h3>
    <p class="refresh-body-sm card-industry__text">...</p>
    <a class="card-industry__cta">CTA &rarr;</a>
  </div>
</div>

Blog Card — Image + Category + Title + Description + Read More

Rounded image with scale-on-hover, category pill badge, Bebas title, clamped description, and arrow link. Used in BlogSection 3-column grid.

Blog post
Launch

Why Your Brand Needs an AI Visibility Strategy

Discover how AI tools like ChatGPT are reshaping buyer decisions and what your brand can do to stay visible.

Read More
Blog post
Protect

The Real Cost of Ignoring Your Online Reputation

Negative search results cost businesses revenue every day. Learn how to take control before it's too late.

Read More
Blog post
Grow

SEO in 2025: What Enterprise Brands Need to Know

Search algorithms are evolving fast. Here's what enterprise brands should prioritize this year.

Read More 
<div class="card-blog">
  <div class="card-blog__img-wrap">
    <img class="card-blog__img" .../>
  </div>
  <div class="card-blog__body">
    <span class="card-blog__category">Launch</span>
    <h3 class="refresh-subheading">...</h3>
    <p class="refresh-body-sm card-blog__desc">...</p>
    <a class="card-blog__read-more">Read More &rarr;</a>
  </div>
</div>

Case Study Card — Image Background + Stat + Title

Full-bleed background image with dark gradient overlay. Stat number top-right, title and description bottom. Used in the marquee carousel.

All Year Cooling
666K+ Impressions generated

All Year Cooling

Dominating local search and protecting a trusted HVAC brand.

Rezvani Motors
94% Negative results reduced

Rezvani Motors

Taking control of the narrative for a luxury automotive brand. 

<div class="card-case-study">
  <img class="card-case-study__bg" .../>
  <div class="card-case-study__overlay"></div>
  <div class="card-case-study__content">
    <div class="card-case-study__top">
      <div></div>
      <div class="card-case-study__stat">
        <span class="refresh-stat">666K+</span>
        <span>Impressions generated</span>
      </div>
    </div>
    <div class="card-case-study__bottom">
      <h3 class="refresh-subheading">...</h3>
      <p class="refresh-body-sm">...</p>
    </div>
  </div>
</div>

Testimonial Card — Stars + Quote + Author

Dark background card with star rating, italic quote, and author info. Border turns yellow on hover. Used in Testimonials Swiper carousel.

“If you're looking for a team that combines top-notch expertise with an easy, client-focused approach, BRANDefenders is the way to go.”
Josh Paese
Marketing Director
“Their dedication to brand development is truly commendable. They took the time to understand my brand identity and delivered tailored strategies.”
Codi Martin
UX Designer 
<div class="card-testimonial">
  <div class="card-testimonial__stars">⭐×5</div>
  <blockquote class="card-testimonial__quote">...</blockquote>
  <div class="card-testimonial__author">
    <div class="card-testimonial__name">...</div>
    <div class="card-testimonial__role">...</div>
  </div>
</div>