Ranked

---
version: alpha
name: Ranked
description: Fully managed AI SEO—humans handle everything for you.
colors:
  primary: "#fafafa"
  secondary: "#7c7c7c"
  tertiary: "#51a2ff"
  neutral: "#0a0a0a"
  border: "#374151"
  brand-leadbelcher: "#cacaca"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Geist
    fontSize: 71px
    fontWeight: 500
    lineHeight: 1.02
    letterSpacing: -0.025em
  headline-md:
    fontFamily: Geist
    fontSize: 49px
    fontWeight: 500
    lineHeight: 1.19
    letterSpacing: -0.029em
  headline-sm:
    fontFamily: Geist
    fontSize: 34px
    fontWeight: 500
    lineHeight: 1.21
    letterSpacing: -0.012em
  headline-xs:
    fontFamily: Geist
    fontSize: 23px
    fontWeight: 500
    lineHeight: 1.22
  body-md:
    fontFamily: Geist
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.63
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 6px
  sm: 16px
  md: 28px
  lg: 36px
  xl: 56px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.full}"
    padding: 19px 32px
    height: 52px
  button-secondary:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 19px 32px
    height: 52px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Ranked: Floating Badges and Unmissable White Pill CTAs

## Overview

Ranked's UI is a dark, high-contrast system aimed at B2B buyers who want clarity and speed. It feels professional, minimal, and confident rather than playful. Content is dense in the hero, then spacious and scannable below the fold. Interactions prioritize legibility and conversion with consistent white pill CTAs and restrained supporting color.

## Colors

- **Primary (#FAFAFA):** Default text on dark surfaces and primary CTA background.
- **Secondary (#7C7C7C):** Muted copy, timestamps, helper text, and low-emphasis UI.
- **Tertiary (#51A2FF):** Action accents for links, hovers, and occasional highlights.
- **Neutral (#0A0A0A):** Global background in dark mode.
- **Border (#374151):** Subtle dividers, card outlines, and input borders.
- **Brand-leadbelcher (#CACACA):** Mid-tone highlights, icons, and soft UI chrome.
- **Surface (#0A0A0A):** Alias of Neutral; use for panels and page background.
- **On-surface (#FAFAFA):** Alias of Primary; use for text and icons on dark surfaces.

## Typography

Geist is the single system face across headings and body. It is freely available via Google and can be loaded directly. Roles: Headline-lg (71px/1.02, 500) for primary h1s; Headline-md (49px/1.19, 500) for major section leads; Headline-sm (34px/1.21, 500) and Headline-xs (23px/1.22, 500) for subheads; Body-md (16px/1.63, 400) for paragraphs and lists. Roboto is also available via Google in all weights and can be used as a sanctioned fallback when performance or platform constraints prevent loading Geist. Maintain the same sizes and weights when switching to Roboto to keep rhythm intact.

## Layout

Spacing uses a compact-to-generous scale: 6, 16, 28, 36, and 56px. Use XL (56px) for major section padding and hero breathing room; LG (36px) for content blocks; MD (28px) for card interiors and feature rows; SM (16px) for control gutters and list spacing; XS (6px) for tight element gaps. Grid layouts should keep comfortable side gutters and allow large headlines to wrap cleanly without crowding CTAs.

## Elevation & Depth

Depth is mostly tonal: light text on a near-black surface with subtle borders (#374151). A single measured shadow is available (sm: rgba(0,0,0,0.25) 0 30px 70px -24) and should be reserved for floating elements or marquee graphics. All other layers rely on contrast, spacing, and borders rather than heavy shadows.

## Shapes

The language is binary: full-radius pills (9999px) for primary interactions and 8px corners for cards and contained surfaces. Use the 8px radius consistently for panels, chat bubbles, and pricing cards to keep a cohesive, modern feel.

## Components

- Button — Primary: #FAFAFA background, #0A0A0A text, 52px tall, 19px × 32px padding, full-radius (9999px). Default CTA across the site.
- Button — Secondary: #0A0A0A background, #FAFAFA text, 52px tall, 19px × 32px padding, full-radius. Works on light overlays or media.
- Button — Link: Text-only in #FAFAFA with no radius; apply hover using #51A2FF when an accent is needed.
- Card: #0A0A0A background, #FAFAFA text, 8px radius, 16px padding, optional #374151 border. Use for pricing tiers, chat messages, and story tiles.

### Hero with Floating Badges
Large Headline-lg (71px) centered over the neutral surface with drifting platform icons. Two CTAs: Primary and a secondary link-style "Compare us to others." Generous XL spacing.

### Split Tagline Block
Two stacked Headline-md lines ("Search is changing. Stay found.") with a primary pill CTA and a secondary link to explore the live dashboard.

### Product Trio
Three feature modules ("AI SEO," "PPC," "White label") using Headline-xs or Headline-sm, brief Body-md copy, and a link. Even MD spacing between cards.

### Conversation Transcript Panel
A multi-message card stack using Body-md for messages, Secondary color for timestamps, and 8px radii. Borders or subtle separators help scanning.

### Pricing Grid with Billing Toggle
Three 8px-radius cards, clear plan headings (Headline-xs/sm), feature lists in Body-md, and a consistent primary pill CTA per tier. Use #374151 borders for separation.

### Customer Stories Strip
Compact cards linking to case studies; rely on Body-md and subtle borders. Keep MD gaps and avoid extra colors.

### Footer CTA Banner
Short closing block with Headline-xs and the primary pill. XL top and bottom padding to separate from footer links.

### Top Navigation Bar
Left-aligned brand, product menu, and a right-side primary pill ("Start free trial"). Use SM spacing and link color #FAFAFA; only the CTA uses the filled style.

## Do's and Don'ts

- Do use #FAFAFA text on #0A0A0A backgrounds for all primary copy; reserve #7C7C7C for low-importance text.
- Do keep the primary CTA at 52px height and full-radius to match the rest of the site.
- Do space sections with 56px (XL) or 36px (LG) margins so large headlines breathe.
- Don't introduce new accent colors—use #51A2FF sparingly for links and hovers only.
- Don't add heavy shadows; prefer borders (#374151) and tonal contrast instead.
- Don't mix radii on a single surface—cards are 8px, buttons are 9999px.

## Agent Prompt Guide

Quick color reference: text #FAFAFA, background #0A0A0A, border #374151, accent #51A2FF.

1) Build a dark hero with centered headline and two CTAs
- Container: background #0A0A0A, padding-top/bottom 56px.
- H1: Geist 500, 71px, line-height 1.02, letter-spacing -0.025em, color #FAFAFA.
- Subcopy: Geist 400, 16px/1.63, color #7C7C7C, max-width 640px, margin-top 16px.
- CTA primary: 52px height, padding 19px 32px, bg #FAFAFA, text #0A0A0A, radius 9999px, margin-right 16px.
- CTA link: color #FAFAFA; on hover use #51A2FF.

2) Create a three-feature row
- Section padding 36px; grid with 3 columns and 28px gaps.
- Each item: title Geist 500, 23px/1.22, color #FAFAFA; body 16px/1.63, color #FAFAFA at 80%.
- Use link color #51A2FF for "Learn more."

3) Price tier cards
- Grid: 3 columns, gap 28px, section padding 56px.
- Card: bg #0A0A0A, text #FAFAFA, border 1px solid #374151, radius 8px, padding 16px.
- Plan name: Geist 500, 34px/1.21; price in Body-md. CTA uses primary button spec (52px, #FAFAFA bg, #0A0A0A text, radius 9999px).

4) Chat transcript block
- Stack cards with 16px gaps; each bubble radius 8px, border 1px #374151.
- Message: Geist 400, 16px/1.63 #FAFAFA; timestamp in #7C7C7C.

5) Closing CTA strip
- Padding 56px; title Geist 500, 49px/1.19; single primary CTA as above; keep background #0A0A0A and avoid extra accents.

## Similar Brands

- Vercel — Dark canvas, white type, restrained blue accents; Vercel is more austere with fewer marketing components.
- Linear — High-contrast dark UI with oversized sans headlines; Linear is sparser and uses more motion micro-interactions.
- OpenAI — Dark surface and large type; OpenAI leans softer with more neutral greys and fewer pill CTAs.
- Framer — Bold type and dark mode marketing; Framer uses brighter gradients where Ranked stays monochrome with a single blue accent.

:root {
  /* Colors */
  --color-primary: #fafafa;
  --color-secondary: #7c7c7c;
  --color-tertiary: #51a2ff;
  --color-neutral: #0a0a0a;
  --color-border: #374151;
  --color-brand-leadbelcher: #cacaca;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 71px;
  --text-headline-lg-weight: 500;
  --text-headline-lg-leading: 1.02;
  --text-headline-lg-tracking: -0.025em;
  --text-headline-md-size: 49px;
  --text-headline-md-weight: 500;
  --text-headline-md-leading: 1.19;
  --text-headline-md-tracking: -0.029em;
  --text-headline-sm-size: 34px;
  --text-headline-sm-weight: 500;
  --text-headline-sm-leading: 1.21;
  --text-headline-sm-tracking: -0.012em;
  --text-headline-xs-size: 23px;
  --text-headline-xs-weight: 500;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.63;
  --font-geist: "Geist";

  /* Rounded */
  --radius-sm: 8px;
  --radius-full: 9999px;

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 28px;
  --spacing-lg: 36px;
  --spacing-xl: 56px;

  /* Components */
  --button-primary-background-color: var(--color-primary);
  --button-primary-text-color: var(--color-neutral);
  --button-primary-rounded: var(--radius-full);
  --button-primary-padding: 19px 32px;
  --button-primary-height: 52px;
  --button-secondary-background-color: var(--color-neutral);
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-full);
  --button-secondary-padding: 19px 32px;
  --button-secondary-height: 52px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 16px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Fully managed AI SEO—humans handle everything for you.",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.98,
          0.98,
          0.98
        ],
        "hex": "#fafafa"
      }
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.486,
          0.486,
          0.486
        ],
        "hex": "#7c7c7c"
      }
    },
    "tertiary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.318,
          0.635,
          1
        ],
        "hex": "#51a2ff"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.039,
          0.039,
          0.039
        ],
        "hex": "#0a0a0a"
      }
    },
    "border": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.216,
          0.255,
          0.318
        ],
        "hex": "#374151"
      }
    },
    "brand-leadbelcher": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.792,
          0.792,
          0.792
        ],
        "hex": "#cacaca"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.039,
          0.039,
          0.039
        ],
        "hex": "#0a0a0a"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.98,
          0.98,
          0.98
        ],
        "hex": "#fafafa"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 28,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 36,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 56,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "full": {
      "$value": {
        "value": 9999,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Geist",
        "fontSize": {
          "value": 71,
          "unit": "px"
        },
        "fontWeight": 500,
        "letterSpacing": {
          "value": -0.025,
          "unit": "em"
        }
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Geist",
        "fontSize": {
          "value": 49,
          "unit": "px"
        },
        "fontWeight": 500,
        "letterSpacing": {
          "value": -0.029,
          "unit": "em"
        }
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Geist",
        "fontSize": {
          "value": 34,
          "unit": "px"
        },
        "fontWeight": 500,
        "letterSpacing": {
          "value": -0.012,
          "unit": "em"
        }
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Geist",
        "fontSize": {
          "value": 23,
          "unit": "px"
        },
        "fontWeight": 500
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Geist",
        "fontSize": {
          "value": 16,
          "unit": "px"
        },
        "fontWeight": 400
      }
    }
  }
}