Foundation
Colors
Brand palette
Hero Purple
#e8e1ff (gradient mid)
Greys & UI
Foundation
Typography
Font: Lazzer (100–900 weights) with Inter as fallback
H1 · clamp(36–72px) · w600 · ls-2px
Page Heading
H2 · clamp(28–48px) · w700 · ls-1px
Section Heading
H2 CTA · uppercase
CTA HEADING
H3 · 20px · w700
Card Subheading
Body · 16px · w400 · lh1.6
Body copy text. The quick brown fox jumps over the lazy dog. Used for paragraph text and card descriptions throughout the page.
Eyebrow · 14px · w500 · #171a22
Powered by Semrush Traffic Analytics
Large number · 72px · w700 · lavender
1
Components
Buttons
Primary (hero search)
Footer button (on lavender)
Components
Metric Card
<li class="metrics-card">
<div class="metrics-card__header">
<svg class="metrics-card__icon" viewBox="0 0 24 24" ...>
<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>
</svg>
<h3 class="metrics-card__role">Heading</h3>
</div>
<p class="metrics-card__body">Body text.</p>
</li>
Components
CTA Banner
Banner heading.
Supporting sentence that sets context.
- First checkmark item
- Second checkmark item
Button Label
Components
FAQ
Question text goes here?
Answer paragraph text. Detailed response to the question above.
Another collapsed question?
Components
How-To Steps
-
1
Enter a domain or webpage URL in the field above
-
2
Choose the analysis scope and click "Check Traffic"
-
3
Review your free analysis and key insights
Foundation
Border Radius
Pill button
--radius-pill
100px
Components
Hero Preview CTA
Upsell link below the hero form — 16px, dark grey, lavender underline
<p class="hero__preview-cta">Need more than a free [tool] check? <a href="#">Try [Full Tool]</a>.</p>
Foundation
Hero Background Gradient
linear-gradient(to bottom, #dceeeb 0%, #e8e1ff 75%, #ffffff 100%)
background: linear-gradient(to bottom, #dceeeb 0%, #e8e1ff 75%, #ffffff 100%);
Components
Hero Form — Separate Pills (bc-form)
Used for Backlink Checker and multi-input tools
<form class="bc-form" role="search">
<input class="bc-input" type="search" placeholder="Enter a domain...">
<input class="bc-input" type="search" placeholder="vs. competitor...">
<button class="bc-btn" type="submit">Check Backlinks</button>
</form>
Components
Why-Section Image Card
border: 1px solid #e0e1e9 · border-radius: 8px · lavender glow shadow
Screenshot / tool preview image
.why-section__img {
border: 1px solid #e0e1e9;
border-radius: 8px;
box-shadow: 0px 24px 56px 0px rgba(189, 137, 255, 0.3);
max-width: 460px;
}
Components — Results Panel
Section Nav Pills
Horizontal scrollable tab strip at the top of the results panel. Active pill: black bg + white text.
<div class="section-nav">
<a href="#" class="section-nav__pill is-active">Traffic Overview</a>
<a href="#" class="section-nav__pill">Traffic Distribution</a>
</div>
Components — Results Panel
Results Metric Card
White card with grey border · border-radius: 6px. Different from the mint content metric cards.
<a href="#" class="metric-card">
<div class="metric-card__label">Total Visits</div>
<div class="metric-card__value">7.88M</div>
<div class="metric-card__change metric-card__change--down">↓ 4.2% vs last month</div>
</a>
Components — Results Panel
Channel Distribution Row
Used in Traffic Distribution section. Bar track is 8px tall, fill color varies by channel.
<div class="channel-row">
<div class="channel-row__name">Direct</div>
<div class="channel-row__bar-track">
<div class="channel-row__bar-fill" style="width:44%;background:#181e15;"></div>
</div>
<div class="channel-row__pct">44.1%</div>
</div>
Components — Results Panel
Upgrade Gate Card
Appears at the bottom of free results to prompt sign-up. White card, centered, lavender CTA button.
Free plan · 3 of 3 searches used
Want the full picture?
Get AI Search Visibility, Top Keywords, Top Pages, Competitors, and historical trends with a free Semrush account.
Get More Free Data →
Components
Footer Brand Block
Giant centered SEMRUSH wordmark on mint + lavender stripe pattern. aria-hidden="true".
<div class="footer-brand" aria-hidden="true">
<span class="footer-brand__text">SEMRUSH</span>
</div>