Skip to content
DesignMunkDesignMunk Submit a site

Outrank

outrank.so
Get organic traffic on auto-pilot with done-for-you SEO content.
AI Software Next.js Tailwind Homepage
Share Visit site
outrank.so DESKTOP · 1440
Outrank

AI Breakdown

Design export

---
version: alpha
name: Outrank
description: Get organic traffic on auto-pilot with done-for-you SEO content.
colors:
  primary: "#0d0d12"
  secondary: "#c491fc"
  tertiary: "#882aff"
  neutral: "#ffffff"
  border: "#e5e7eb"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: __Plus_Jakarta_Sans_6ea4a9
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.03em
  headline-md:
    fontFamily: __Plus_Jakarta_Sans_6ea4a9
    fontSize: 33px
    fontWeight: 600
    lineHeight: 1.21
    letterSpacing: -0.055em
  headline-sm:
    fontFamily: __Plus_Jakarta_Sans_6ea4a9
    fontSize: 27px
    fontWeight: 600
    lineHeight: 1.04
    letterSpacing: -0.015em
  headline-xs:
    fontFamily: __Inter_b9c7ce
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.021em
  body-md:
    fontFamily: __Inter_b9c7ce
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.56
    letterSpacing: -0.018em
rounded:
  sm: 16px
  full: 9999px
spacing:
  xs: 8px
  sm: 16px
  md: 28px
  lg: 40px
  xl: 80px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.full}"
    padding: 16px 28px
    height: 70px
  button-secondary:
    backgroundColor: "#6366f1"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 16px 28px
    height: 70px
  button-link:
    textColor: "#8629ff"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 12px
---

# Outrank: Purple Pill CTAs on a Gridded Canvas

## Overview

Outrank presents an automation-forward, confident brand aimed at founders, marketers, and agencies who want SEO handled end-to-end. The interface is bright and spacious, set on a white grid canvas with playful purple accents that signal momentum without sacrificing clarity. Copy is direct and transactional; layout density is moderate with generous breathing room between sections. When tokens don't cover a case, prefer high contrast, clear hierarchy, and one dominant purple action.

## Colors

- **primary (#0d0d12):** Deep ink for headlines, body copy, and icons on light surfaces.
- **secondary (#c491fc):** Soft lavender accent used for gradients, hover states, and decorative glows.
- **tertiary (#882aff):** Electric purple for primary actions and emphasis elements.
- **neutral (#ffffff):** Base canvas and card surfaces.
- **border (#e5e7eb):** Subtle dividers, card outlines, and input borders.
- **surface (#ffffff):** Default surface color for sections and cards.
- **on-surface (#0d0d12):** Text and icon color placed on white surfaces.

## Typography

Two families define the hierarchy. Headlines use Plus Jakarta Sans at 40/33/27px with tight negative tracking for a crisp, modern voice; small headlines and body text use Inter at 22/18px for legibility.
- Availability: Both fonts are provided as self-hosted (custom) and are not directly loadable via Google Fonts in this context.
- Substitutes for Plus Jakarta Sans: Manrope, Outfit, or Urbanist (all freely available) with similar geometry and x-height.
- Substitutes for Inter: Roboto, Source Sans 3, or the system UI sans stack for robust rendering.
- Roles: headline-lg for the hero and marquee statements; headline-md for section headers; headline-sm/xs for card titles and subheads; body-md for paragraphs, FAQs, and feature copy.

## Layout

Spacing scales in 8–80px steps for predictable rhythm: xs 8, sm 16, md 28, lg 40, xl 80. Use xl (80px) as default section padding, with lg (40px) for intra-section groups and md (28px) between related items like feature cards. A standard multi-column grid (e.g., 12 cols) supports wide content with centered, max-width containers; cards and tiles use internal padding of 12px per token. Keep hero and pricing sections airy; densify feature lists with md gaps.

## Elevation & Depth

Depth relies on soft shadows and crisp outlines. Use sm shadow for small floating UI chips; use md (4px white outline + subtle ambient) for prominent cards and modals. Large shadows are intentionally absent; when more separation is needed, switch to a light border (#e5e7eb) and whitespace rather than heavier blur.

## Shapes

Corners speak friendliness and speed. Cards use rounded.sm at 16px, inputs can match this radius, and all major CTAs use rounded.full (9999px) for unmistakable pill buttons. Maintain visual consistency—avoid mixing sharp corners with pills in the same cluster.

## Components

Buttons and card patterns are opinionated and should be reused as-is.
- Primary Button: background #882aff, text #ffffff, height 70px, full-pill radius, 16px×28px padding. Use for the main action in any section.
- Secondary Button: background #6366f1, text #0d0d12, height 70px, full-pill radius. Use adjacent to the primary as an alternative path.
- Link Button: text #8629ff, underline on hover; no radius.
- Card: white surface, deep-ink text, 16px radius, 12px padding; pair with md shadow when the card must pop from the canvas.

### Hero Banner with Dual CTAs
- headline-lg (40px/700) with a single emphasized word. Two pills: Primary (#882aff) and a lighter secondary partner; stack md (28px) gap; social proof row sits just below.

### Social Proof Row
- Avatars + star rating + short label. Use body-md for copy, md shadow on avatar group if needed; keep to a single line to avoid wrapping.

### Success Stories Grid
- 2–3 columns of testimonial cards with 16px radius and sm/md shadow. Titles in headline-sm; author line in body-md; "Read story" uses button-link styling.

### How It Works Steps
- Three vertical steps with headline-xs for step titles and body-md descriptions. Use md (28px) gaps and border (#e5e7eb) dividers on mobile.

### Features Grid
- 3×2 or 4×2 grid of white cards; icons inline; card padding 12px; titles in headline-xs. Primary or link button per tile.

### Backlink Exchange Promo
- Left copy, right visual. Section accent with secondary (#c491fc) to tertiary (#882aff) gradient details; primary CTA uses the standard pill.

### Integrations Strip
- Logo tiles on white with border separators; small pills for "Read more" links. Maintain 16px radius on tiles.

### Pricing Plan Card
- Single-plan focus. Price and perks in a 16px-radius card with md shadow; CTA repeats the primary button. Use xl (80px) section padding to isolate.

## Do's and Don'ts

- Do use #0d0d12 for all text on white; avoid mid-gray copy that reduces contrast.
- Do keep the primary action as a 70px full-pill in #882aff; pair with a lighter secondary nearby.
- Do space sections with 80px padding and keep related items at 28–40px gaps.
- Don't introduce heavier shadows; use the md outline+ambient or a simple #e5e7eb border instead.
- Don't mix square and pill buttons in the same cluster.
- Don't stack more than two actions side-by-side; this system expects a single primary with one secondary.

## Agent Prompt Guide

Quick color reference
- Text: #0d0d12
- Background: #ffffff
- Border: #e5e7eb
- Accent (primary action): #882aff

1) Build a hero with dual CTAs
- Canvas #ffffff, centered container.
- H1 in Manrope 700 at 40px, letter-spacing -0.03em, color #0d0d12.
- Body copy in Source Sans 3 400 at 18px/1.56.
- Primary button: 70px height, 16px 28px padding, background #882aff, text #ffffff, border-radius 9999px.
- Secondary button: 70px height, background #6366f1, text #0d0d12, border-radius 9999px, 28px gap between buttons.

2) Make a 3-step "How it works" row
- Section padding: 80px top/bottom.
- Each step: white card, 16px radius, 12px padding, shadow: rgb(255,255,255) 0 0 0 4px, rgba(6,11,19,0.04) 0 8px 32px 0.
- Titles in Manrope 600 at 22px; descriptions in Source Sans 3 18px.

3) Feature grid of six cards
- Grid: 3 columns desktop, 1 column mobile; gap 28px.
- Card: background #ffffff, border 1px solid #e5e7eb, radius 16px, padding 12px.
- Card title Manrope 600 at 22px; body Source Sans 3 18px; link button in #8629ff.

4) Single-plan pricing card
- Section bg #ffffff; container max-width ~720px, center.
- Card: radius 16px, md shadow (white outline + subtle ambient), internal stack gaps 16–28px.
- Price line Manrope 700 at 33px; features in Source Sans 3 18px.
- Primary CTA: 70px pill in #882aff with #ffffff text.

## Similar Brands

- Jasper AI — Similar purple accent and upbeat automation story; Jasper leans heavier on gradients and illustrations, while Outrank keeps cards crisper with thin borders.
- Surfer SEO — Data-forward SEO SaaS with prominent CTAs; Surfer uses darker surfaces, whereas Outrank stays on white with soft outlines.
- Frase — Clean marketing page with strong section rhythm; Frase employs more muted greens vs. Outrank's electric purple.
- Copy.ai — Bright, friendly palette and big pill buttons; Copy.ai's typography is rounder, while Outrank's tracking is tighter for a sharper read.

More like this

Browse AI →
thelevel.ai
Level AI About AI
Level AI About
A minimalist hero uses extreme whitespace, centering attention on a large, high-contrast headline with an orange eyebrow tag for context. The top…
About · 16 minutes ago
every.to
Every AI
Every
Build Faster With AI
Blog · 16 minutes ago
strata.ws
Strata Productivity
Strata
The all-in-one real-time platform for your knowledge archive
Homepage · 2 hours ago
adapt.com
Adapt About AI
Adapt About
A minimal header with announcement bar and dual CTAs leads into a centered, punchy mission headline, followed by a friendly collage of…
About · 2 hours ago