The wordmark.
Two versions, no exceptions. Black on light surfaces, white on dark or Conversion Blue. Give it room, keep it flat, and never recolor it.
Clear space & minimum size
Clear space: keep at least 1× the logo's height of empty space on every side (the dashed guide). Nothing intrudes into that zone.
Minimum size: 32px tall on screen. Below that the wordmark stops being readable. Standard header use is 34–40px.
Don't
- Recolor it into Conversion Blue or any secondary color.
- Add drop shadows, outlines, or glow effects.
- Rotate, skew, or stretch the wordmark.
- Place it on busy imagery without a scrim.
- Set it on red, yellow, green, or purple fills.
- Shrink it below 32px tall.
Strong, simple, built to impact.
Black, white, and Conversion Blue carry the brand. Blue is the signal, not the wallpaper: use it for the moment that matters, then let it go. Click any swatch to copy its hex.
Primary
Blue system & cyan accent
Cyan is the single delight accent: hero glows, one highlighted detail, avatar gradients. It pairs with blue, never competes with it.
Secondary families · reserved for illustration & data viz
Order within each family: base · light · lighter · dark. These stay off the primary web UI. They live in brand illustration, iconography, and multi-series charts, one family per idea.
Surfaces
Text
Status
Borders
| Token | Value | Use |
|---|---|---|
| --border | rgba(0,0,0,0.08) | Default hairline on light surfaces, card outlines, dividers. |
| --border-strong | rgba(0,0,0,0.14) | Ghost buttons, secondary outlines, higher-contrast dividers. |
| --border-on-dark | rgba(255,255,255,0.10) | Card outlines and dividers on Slate / Ink surfaces. |
Data-viz palette
Rule of thumb: five categorical colors max per chart. To spotlight one point, render the rest in Neutral Muted and the hero point in Conversion Blue. On dark canvases, start the categorical order from Cyan for contrast.
One typeface. Hierarchy from weight.
Avenir Next does all the work. Geometric, clean, legible at any size. Hierarchy comes from weight, size, and tracking, never a second family. It's self-hosted as WOFF2 (six faces: 400/500/600/700 plus Regular and Medium italics), loaded once from /fonts.css. The fallback stack keeps Avenir and Montserrat for the rare case a face fails to load.
font-family: "Avenir Next", Avenir, Montserrat, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
Weights in use
Skip the extremes. No Thin, Light, Heavy, or Black weights (100/200/300/800/900). The narrow range is what keeps the brand cohesive.
Scale
Blockquote · links · lists
You can't fake your way into visibility anymore. Real work, original insight, earned citations.
- Unordered items inherit body styling at 16px.
- Eight pixels of breathing room between each line.
- Comfortable to scan, never cramped.
A base-8 rhythm.
Every margin, pad, and gap steps off an 8px scale. Consistent spacing is what makes a page feel built rather than assembled.
Spacing scale
Cards pad to 24px (lg) by default, dropping to 16px (md) on mobile. Keep at least 32px (xl) between adjacent components. Sections breathe at 104px on desktop.
Corner radius
Atmosphere, not flat fills.
Surfaces get depth from layered radial glows, a low grid, and a barely-there grain. The signatures: a warm-to-cool hero light, a deep ink panel with a blue glow, and a warm sand base for editorial case studies.
Hero light. Cyan + blue glows over a warm→cool base. Opening frames and light headers.
Ink panel. Deep ink with a blue glow from the top. CTA panels and high-drama frames.
Dark blue panel. Confident, brand-forward. Comparison and transition sections.
Grid overlay. 48px lines at low opacity, radially masked. Adds a technical, dashboard feel to dark surfaces.
Warm paper surfaces
Warm sand. #FAF7F0. The editorial base behind case studies like Semrush. Reads like paper.
Cream. #FBF8F1. Slightly warmer still, for pull-quote and testimonial sections.
White to sand. A light hero settling into the warm base below, used on case-study covers.
Grain texture
A fractal-noise SVG at 0.025 opacity on light, 0.6 with overlay blend on dark. It breaks up flatness without ever reading as noise. Applied via the reusable .grain / .grain-dark helper.
/* Signature hero-light background */ background: radial-gradient(ellipse 600px 400px at 92% 10%, rgba(23,230,230,0.10), transparent 55%), radial-gradient(ellipse 700px 420px at 4% 55%, rgba(25,83,255,0.07), transparent 55%), linear-gradient(180deg, #FDFCFA 0%, #FFFFFF 45%, #FAFBFE 100%);
Shadows with a blue tint.
Nothing sits on a flat shadow-md. Every shadow is layered, low-opacity, and carries a faint Conversion Blue in the diffuse layer, so lift reinforces the brand without shouting.
/* Default card shadow. Note the blue diffuse layer */ box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 12px 32px rgba(25,83,255,0.08), 0 4px 12px rgba(0,0,0,0.04);
The elevation ladder: base (flush) → raised (cards) → floating (hero stats, menus) → overlay (dark CTA panels). Cards lift 2px on hover into a deeper blue-tinted shadow.
Restrained, spring-eased.
Animate transform and opacity, nothing else. Never transition-all. One orchestrated page-load beats a dozen scattered effects. The house easing curve does most of the character.
Hover lift · live
All looping and load motion honors prefers-reduced-motion. When a visitor opts out, animations resolve instantly to their end state.
Low-friction, plain.
One primary action per view, in Conversion Blue. A ghost button for the secondary path. Every clickable element carries hover, focus-visible, and active states. Hover the buttons below.
| Variant | Fill | Radius · pad | States |
|---|---|---|---|
| Primary .btn-blue | #1953FF | 6px · 14/26 | Hover: darken + 4px glow ring, lift 1px. Arrow slides 4px. |
| Ghost .btn-ghost | transparent | 6px · 14/24 | 1px border, hover fills elevated + lifts. Focus: blue ring. |
| Arrow link .arrow-link | #1953FF text | n/a | Inline, arrow slides on hover, deepens to Blue Dark. |
CTAs stay plain and specific: "Book a strategy call," "Claim your free Snapshot." No urgency theater, no "Don't miss out."
.btn-blue { background: #1953FF; padding: 14px 26px; border-radius: 6px; box-shadow: 0 4px 20px rgba(25,83,255,0.28); } .btn-blue:hover { background: #1240CC; box-shadow: 0 0 0 4px rgba(25,83,255,0.15), 0 6px 28px rgba(25,83,255,0.36); transform: translateY(-1px); }
Quiet fields, clear focus.
Inputs sit on the elevated surface with a hairline border. Focus lifts them to white and rings them in blue. Labels are small, uppercase, and to the point.
Click a field to see the focus ring: background lifts to white, border goes Conversion Blue, inset 2px blue glow.
States
Your Snapshot is on the way, delivered within 12 hours.
Errors say what went wrong and how to fix it, in the interface's voice. Success confirms the next thing that happens, not a vague thank-you.
The surface family.
One shared recipe: white surface, hairline border, house radius, and a 2px hover lift into a blue-tinted shadow. Everything else is a variation on that theme. Hover any card.
Approach & feature cards
Context Engineering
We feed models the same context a senior strategist would, so the first draft starts where others finish.
Get cited by AI
Show up across ChatGPT, Claude, Gemini, and Google's AI Overviews, not just page one.
Testimonial & floating stat
We were stuck at a content ceiling. They rebuilt our brief workflow and output tripled without the quality drop we expected.
Dark outcome card
Up from 14% at kickoff, measured across ChatGPT, Claude, and Gemini.
From fourth in the category to first, against three larger competitors.
Glassmorphic outcome cards live only on dark surfaces: a faint white gradient fill, a light hairline, and a deep shadow that lets the panel's glow read through.
Small labels, tight tracking.
Eyebrows and pills carry category and status. All-caps, heavily tracked, mostly in Conversion Blue on a faint blue wash. A few colored variants signal recommendation, citation, and comparison outcomes.
Eyebrows & chips
Status & data badges
Comparison markers use the status palette: green yes, amber partial, red no. Recommendation badges pair Good green with a soft green wash.
Line-drawn, round-capped.
Icons are strokes, not filled silhouettes: 2px round caps and joins, drawn on a 24px grid. When one needs weight, it sits in a Conversion Blue "glass" badge.
Line icons
Icon badges
The badge reads as blue-tinted glass: rgba(25,83,255,0.10) fill, rgba(25,83,255,0.22) border, blue line icon. In nav menus, per-service icons swap the tint via CSS variables for gentle category color.
Numbers that carry the argument.
Case studies and product pages lean hard on data, so the primitives are consistent: tabular numbers, blue for the hero point, the status palette for direction. Below are the reusable building blocks, then two of the signature visualizations they compose into.
Primitives
Comparison table & score dial · signature, dark surface
| Approach | Conversion MediaAI + senior review | AI tools |
|---|---|---|
| Senior sign-off | ||
| Holds at volume | ~ | |
| Time to first deliverable | Days | Minutes, then drift |
The comparison table names the real trade-off instead of trashing the alternative. The Conversion Media column gets a subtle blue fill and cyan sub-label; the dial uses a cyan-to-blue stroke on a dark track. Seen on the AI Visibility Snapshots and service pages.
AI answer mockup · signature
AnswerFor in-house teams that want senior-reviewed output at scale, Conversion Media pairs AI orchestration with human strategists across SEO, AEO/GEO, and web design.
The answer card shows a brand cited inside an AI response, with the highlighted brand name on a blue underline wash. It anchors the AI Visibility story across the site.