Logo
Two variants. Never use CSS filters, invert, or recolor either version.
Full wordmark — light backgrounds
White (#ffffff) and surface (#f8fafc) only · emails, light-bg pages
File: assets/images/logo-light.webp
Dark background mark
Dark backgrounds only · header (#0a1628), footer (#060e1a), hero
File: assets/images/logo-dark.webp
✓ Do
- Use dark mark (logo-dark.webp) in header and footer
- Use full wordmark (logo-light.webp) in emails and light-bg pages
- Maintain clear space equal to the icon height on all sides
- Use PNG or WebP source files
✗ Don't
- Don't recolor, filter, or invert either version
- Don't use logo-light.webp on dark backgrounds
- Don't stretch or distort the aspect ratio
- Don't place on busy photos or gradients
Size specs
- Header: 38px tall
- Footer: 39px tall
- Minimum: 24px tall
- Favicon: use icon only, cropped square
Logo color breakdown
The logo encodes the full brand palette. These are the source-of-truth values for all brand color decisions.
Color palette
Sourced from theme.json and global styles on the live WordPress site.
CSS variables
--color-green: #22c55e /* primary CTA */
--color-green-hover: #16a34a
--color-cyan: #06b6d4 /* accent, links, labels */
--color-text: #0d1426 /* headings */
--color-text-dark: #2d2d2d /* body */
--color-muted: #64748b /* secondary */
--color-surface: #f8fafc /* alt section backgrounds */
--color-border: #e5e7eb
--color-bg: #ffffffSection color system
Each section class controls background, text color, and child component styles. The homepage uses this sequence top to bottom.
| Class | Background | Used for |
|---|---|---|
| .hero | #060e1a → #1a3a6b gradient | Hero + integrated report form (2-col) |
| .section | #ffffff | Default white sections |
| .section--alt | #f8fafc | Alternating light gray (FAQ, inner pages) |
| .section--tint | #eef9ff | Subtle cyan tint (testimonials) |
| .section--dark | #060e1a → #0d2744 gradient | Dark mid-page sections (How it works) |
| .section--cta | #060e1a → #0a1628 → #0d2744 | Bottom CTA — centered text, dark gradient |
| .site-footer | #060e1a solid | Footer — deepest dark, logo-dark.webp |
Typography
Two typefaces. Space Grotesk for H1 and H2 — geometric, confident, distinctive. Inter for everything else — clean, highly legible at small sizes.
Headings — H1, H2
Space Grotesk
Weights 500, 600, 700 · Google Fonts
Body — H3 and below
Inter
Variable 100–800 · Self-hosted via WordPress CDN
Buttons
All buttons use border-radius: 9999px (pill). Padding scales with em so font-size changes are safe.
/* Primary */ background: #22c55e; color: #fff; border-radius: 9999px;
/* Secondary */ background: transparent; border: 1.5px solid #0d1426; border-radius: 9999px;
/* Cyan */ background: #06b6d4; color: #fff; border-radius: 9999px;
/* Nav CTA */ background: #22c55e; font-size: 0.875rem; padding: 0.5rem 1.2rem;Spacing scale
Fluid spacing using min(spacing-unit × increment × 1px, increment × n × viewport). Base unit: 10, increment: 2.5.
Layout
Two widths from theme.json. Most marketing sections use wide; blog content uses content width.
| Token | Value | Used for |
|---|---|---|
| --max-width | 1440px | Marketing sections, nav, footer |
| --content-width | 620px | Blog posts, long-form prose |
| --radius | 8px | Cards, form fields, inputs |
| --radius-pill | 9999px | All buttons |
Voice & tone
How the copy reads across all touchpoints.
Direct
No hedging. Say what we do and what happens next. "Your report is on its way" not "You should receive a report soon."
Specific
Name the platforms (ChatGPT, Perplexity, Claude). Name the signal types (entity footprint, schema markup). Vague claims erode trust.
Peer-to-peer
Written for B2B marketers who are smart and busy. No jargon explanation unless it's genuinely new (GEO, AEO). Skip the preamble.
Low pressure
The free report speaks for itself. No countdown timers, no artificial scarcity. Confidence, not urgency theatre.
Analytics
Google Tag (Site Kit) — add to _includes/head.html before launch.
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GT-P3HT7456"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GT-P3HT7456');
</script>Schema markup
Organization + WebSite schema is in the live site's <head>. Add to _includes/head.html (homepage only).
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "Organization",
"@id": "https://fixmyairank.com/#organization",
"name": "Fix My AI Rank",
"url": "https://fixmyairank.com/",
"logo": { "@type": "ImageObject", "url": "https://fixmyairank.com/assets/images/logo-dark.webp" },
"sameAs": ["https://x.com/FixMyAIRank", "https://bsky.app/profile/fixmyairank.bsky.social"]
},
{
"@type": "WebSite",
"@id": "https://fixmyairank.com/#website",
"url": "https://fixmyairank.com/",
"name": "Fix My AI Rank",
"publisher": { "@id": "https://fixmyairank.com/#organization" }
}
]
}
</script>