Skip to content

Now in the official shadcn registry directory.

Start free
ai2v0.7
Back to gallery
saas · productivity · content

Semrush

Light-first enterprise-marketing canvas for the SEO platform — wide 1440px hero confidence, custom Lazzer display family for marketing voice, Inter for dense data tables, corporate blue and lavender as a two-accent system. Pastel surface variants zone sections without committing to colour-fills. Confident enterprise that refuses startup minimalism.

semrush.comAdded 2026-05-15
Semrush - Desktop

Editorial disclaimer

Editorial note

This entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm - do not reproduce brand identity, logo, product copy, or proprietary features.

Fair Use & Gallery Policy
FreePrompt kit

Copy the full design language into your agent

A typed, paste-ready design system brief - philosophy, tokens, rules, techniques, and fitness checks. Drop it into Claude, Cursor, v0 or any coding agent and it builds in Semrush’s language, not just a screenshot.

Paste into your agent. No signup, no cost.
Light-first enterprise-marketing canvas. Warm #ffffff ground, dark olive ink #181e15 for primary text, slate #333333 for secondary, #6c6e79 for metadata. Lazzer Variable as the display voice (24-60px marketing moments), Inter as the workhorse (12-16px UI and data density). Corporate blue #0071bc is the trust accent, lavender #c190ff is the delight accent — two-accent system, never combined. Pastel surface variants (#dceeeb mint, #c190ff lavender at 15-25% alpha) divide sections without committing to colour-fill territory. Wide 1440 hero canvas + 720 reading rail — confident enterprise breathing room.
Main prompt
Use this capture as a design language transfer brief for my project. Adopt the palette (light-first #ffffff canvas + #181e15 primary olive ink + #333333 secondary + slate descender scale + two-accent corporate blue #0071bc and lavender #c190ff, pastel surface variants at 15-25% alpha), typographic duet (Lazzer Variable for display 24-60px + Inter for UI and data 12-16px), 4px-base spacing scale heavy at 1/4/6/8/12/14, wide 1440 hero canvas + 720 reading rail, restrained 2-variant shadow system, expressive but disciplined motion (10 transitions), 640/768/1024/1280/1440 breakpoint ladder. Treat this as my project's constitution. Apply the language, not the source brand. When I ask you to build a page or component, enforce these rules by default and call out any deviation.
Layout
Multi-column wide canvas with editorial reading rail nested inside; section dividers use pastel surface variants for ambient colour zoning.
Content width
720px primary reading rail centred inside 1440px hero canvas; section bands break out to full 1440.
Framing
Enterprise reading room — wide, warm-white, confident.
Grid strength
Strong 12-column grid at desktop, collapses to 4-column at tablet; reading rhythm follows column count.

Warm #ffffff ground + olive #181e15 ink + slate descender scale carry reading; two-accent system (corporate blue + lavender) handles attention without combining.

Mode strategyLight-first; dark mode plausible but not present in capture.
  • #ffffff for primary background, never #f5f5f5 or off-white
  • #181e15 olive ink for body — softer than pure #000, easier on long reading
  • #333333 secondary, #6c6e79 metadata, #d1d2d5 hairlines
  • #0071bc corporate blue: CTAs, primary links, focus rings (trust signal)
  • #c190ff lavender: success states, hero moments, delight (never combined with blue in the same component)
  • #dceeeb mint at 15-25% alpha: section background bands

Gradients (paste-ready)

4 gradients catalogued — soft pastel atmosphere on section dividers, never as button fill or hero backdrop
  • Lazzer Variable for all display moments (24-60px) — marketing headlines, section titles, brand voice
  • Inter for all UI, body, data tables, captions (12-16px range)
  • Weights: Lazzer 500/600 for display, Inter 400/500/600 for UI
  • Line-height 1.4-1.5 for body, 1.1-1.2 for Lazzer display
  • Letter-spacing: 0 for Inter body, -0.01em for Lazzer display headlines
  • 4px base unit, heaviest use at 1/4/6/8/12/14px increments
  • Section vertical rhythm: 80-160px between major content blocks
  • Card internal padding: 24-32px standard; CTA padding: 12-14px vertical / 24-32px horizontal
  • Data table cell padding: 8-12px (Inter sized to match)
Surface styleCards float subtly via 1px hairline + soft drop shadow; no glassmorphism, no inner glow. Section bands use pastel surface variants instead of elevation.
  • 2 shadow variants total — restrained system
  • Hover lift: 2px Y + shadow opacity bump from 0.06 to 0.1
  • Tables and data rows: hairline rows only, no shadows

Techniques

Marketing card

1px #d1d2d5 hairline + 0 6px 16px rgba(24,30,21,0.06) shadow; pastel surface optional for emphasis.

Section colour band

#dceeeb @ 18% alpha or #c190ff @ 12% alpha — used as background-only, never with borders.

Radii4 / 6 / 8 / 12 / 16Icon treatmentStroke 1.5px, monoline, optical alignment with Inter baseline.Icon setsCustom monoline set + Lucide for utility icons
  • Buttons: 6-8px radius
  • Cards: 10-12px radius
  • Section bands: 16px radius on rounded corners (top-left + top-right only when nested)
  • Primary CTA (corporate blue)
    background
    #0071bc
    textColor
    #ffffff
    fontFamily
    Inter
    fontWeight
    600
    fontSize
    16px
    padding
    12px 24px
    borderRadius
    8px
    shadow
    0 6px 16px rgba(0,113,188,0.24)
    hover
    background darkens to #005e9c + shadow expand

    Tailwind

    inline-flex items-center gap-2 rounded-lg bg-[#0071bc] px-6 py-3 text-base font-semibold text-white shadow-[0_6px_16px_rgba(0,113,188,0.24)] transition hover:bg-[#005e9c]
  • Marketing feature card
    background
    #ffffff
    border
    1px solid #d1d2d5
    borderRadius
    12px
    padding
    24px 28px
    shadow
    0 6px 16px rgba(24,30,21,0.06)

    Tailwind

    rounded-xl border border-[#d1d2d5] bg-white p-7 shadow-[0_6px_16px_rgba(24,30,21,0.06)]
LevelexpressiveDurations150ms / 250ms / 400ms

Easings

cubic-bezier(0.4, 0, 0.2, 1)cubic-bezier(0.16, 1, 0.3, 1)
HoverCard lift 2px + shadow bump, Button background shift 8% darker on hover, Link underline reveal on hover (animated width 0 → 100%)

Scroll patterns

  • Fade-in + 12px upward translate on viewport entry (one-shot)
  • Sticky nav appears after 80px scroll with backdrop blur
  • Animation supports comprehension, never decoration
  • Respect prefers-reduced-motion: opacity-only fades
  • Cards lift subtly on hover, never float
  • Focus rings: corporate blue 2px + 2px offset
  • Data tables row hover: pastel mint @ 8% alpha background
Approachdesktop-first

Custom enterprise ladder (640/768/1024/1280/1440) — 1440 is the design canvas, not 1536.

  • <768: single column, 16px gutter, no break-outs, hide secondary nav
  • 768-1024: 720px content rail, basic 2-col grid
  • ≥1024: full 720 rail + 1440 hero break-outs, full 12-col data tables
  • WCAG AA contrast on body text (#181e15 on #ffffff is 16.8:1)
  • Corporate blue accent passes AA for UI text (4.6:1 on white)
  • Data tables use proper th/td semantics + caption
Next.js or similar SSR frameworkLazzer custom font (likely woff2)Lucide icons

Marketing illustrations are subtle SVG accents; product UI screenshots dominate visual content; data tables are first-class citizens.

  • Custom Lazzer subsetted to display sizes only
  • Inter loaded with font-display: swap
  • Pastel surface bands as CSS background-color, not images
  • Use Lazzer for display (24px+), Inter for everything else
  • Reserve corporate blue for trust, lavender for delight — never combine in one component
  • Use pastel surface variants for section zoning, not for fills
  • Keep the canvas wide (1440) — confident enterprise breathing room
  • Don't shrink the canvas to 1024 — Semrush's confidence lives in the wide layout
  • Don't paint buttons in lavender — that breaks the two-accent system
  • Don't introduce a third font family — duet is the discipline
  • Don't use pure #000 for body ink — olive #181e15 is the warmer reading layer
  • Light-only — no dark variant in this capture
  • Lazzer + Inter only — no third family
  • Two-accent system: blue ↔ lavender, never together
  • Font-family grep: only `Lazzer` and `Inter` appear
  • Background colour grep: only `#ffffff` for ground, pastel surfaces in 15-25% alpha range
  • Accent colour usage: corporate blue and lavender never both in one component
  • Body text size: 12px-16px range
  • Shadow variants total: <=2 distinct values site-wide

Design tokens

Observed token system

Color, type, spacing, gradients, and stacking order captured from the live page and rendered here as living, paste-ready previews.

Inspector

Observable layers

Structure, breakpoints, motion, fonts, and images captured from the live page and kept paste-ready alongside the tokens.

Depth-first walk of the meaningful sections. 12 nodes across 7 levels, shallow to deep by color.

  • body1
    • div (×9)1
      • div2
        • Main1
          • div3
            • Section1
              • Section
            • div1
              • Section (×2)
            • Section (×5)
        • div1
          • Footer

Accessibility

Contrast matrix

62 combinations - 28 pass AA - 22 pass AAA. Each pair is previewed with its real foreground on background; APCA Lc sits alongside the WCAG 2.1 ratio for draft WCAG 3 awareness.

Normal text passes AAALarge text passes AAA
fg
#FFFFFF
bg
#000000
APCA Lc
-108
Use
background on foreground
Normal text passes AAALarge text passes AAA
fg
#000000
bg
#FFFFFF
APCA Lc
+106
Use
foreground on background
Normal text passes AAALarge text passes AAA
fg
#DCEEEB
bg
#000000
APCA Lc
-94
Use
background on foreground
Normal text passes AAALarge text passes AAA
fg
#000000
bg
#DCEEEB
APCA Lc
+94
Use
foreground on background
Normal text passes AAALarge text passes AAA
fg
#181E15
bg
#FFFFFF
APCA Lc
+104
Use
foreground on background
Normal text passes AAALarge text passes AAA
fg
#FFFFFF
bg
#181E15
APCA Lc
-106
Use
background on foreground
Normal text passes AAALarge text passes AAA
fg
#181E15
bg
#DCEEEB
APCA Lc
+92
Use
foreground on background
Normal text passes AAALarge text passes AAA
fg
#DCEEEB
bg
#181E15
APCA Lc
-93
Use
background on foreground
Normal text passes AAALarge text passes AAA
fg
#D1D2D5
bg
#000000
APCA Lc
-79
Use
foreground on foreground

Images

Image strategy

Observable image posture - total count, lazy-loading ratio, and format mix. The hero image is measured above the fold.

Total images
30
Lazy loaded
100%
Format mix
  • svg28 · 54%
  • webp23 · 44%
  • png1 · 2%
Industry
saas
Industry
productivity
Industry
content
Theme
Light
Added
2026-05-15
semrush.com

FAQ

Questions people ask about Semrush

3questions

Answers are pulled from the curator verdict and design brief - the same text your AI agent sees when it paste-reads this page.

Compare this with

Side-by-side reads sharing this design signal.