Skip to content
DesignMunkDesignMunk Submit a site

Wope

wope.com
Outrank Everyone. Starting Now.
AI Software Homepage Rebond Grotesque
Share Visit site
wope.com DESKTOP · 1440
Wope

AI Breakdown

Design export

---
version: alpha
name: Wope
description: Outrank Everyone. Starting Now.
colors:
  primary: "#ffffff"
  secondary: "#8f60ef"
  neutral: "#0a0118"
  border: "#374151"
  brand-sweet-flag: "#644491"
  brand-cold-steel: "#272632"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Rebond Grotesque
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Rebond Grotesque
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.29
  headline-sm:
    fontFamily: system-ui
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.2
  headline-xs:
    fontFamily: system-ui
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.15
  body-md:
    fontFamily: system-ui
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.71
    letterSpacing: -0.011em
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 8px
  sm: 16px
  md: 28px
  lg: 46px
  xl: 150px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 7px 24px
    height: 40px
  button-secondary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 7px 24px
    height: 40px
  button-link:
    textColor: "#676182"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Wope: Neon Horizon Grid Framing a Dark SEO Pitch

## Overview

Wope's interface is dark, high-contrast, and atmospheric. It aims for technical confidence without feeling heavy by using a violet glow as brand expression and keeping most text white on a deep surface. Spacing trends roomy in heroes and compact in data regions to balance storytelling and dense analytics. The tone is professional and tool-first for SEO specialists, agencies, and startups.

## Colors

- **primary (#ffffff):** Core text and icons on dark backgrounds.
- **secondary (#8f60ef):** Accent for highlights, gradients, and interactive emphasis; keep usage sparse for impact.
- **neutral (#0a0118):** Page background and modal backdrops; establishes dark mode baseline.
- **border (#374151):** Subtle dividers and outlines on dark; 1px strokes for tables, inputs, and card seams.
- **brand-sweet-flag (#644491):** Supporting violet for gradients or subtle tints on illustrations.
- **brand-cold-steel (#272632):** Secondary surface and panel tones to step content back from the main surface.
- **surface ({colors.neutral}):** Alias for core background when referencing component surfaces.
- **on-surface ({colors.primary}):** Alias for legible text/icons placed on surface tones.

## Typography

- Headline LG — Rebond Grotesque, 40px, 700, 1.2, -0.02em: Display headlines and hero claims. Rebond Grotesque is custom/self-hosted; if unavailable, use obtainable substitutes with similar punch such as Archivo, Oswald, or Ubuntu (700).
- Headline MD — Rebond Grotesque, 28px, 700, 1.29: Section headers and feature leads; same availability notes as above.
- Headline SM — system-ui, 20px, 600, 1.2: Subheads, card titles, and UI labels where compactness matters.
- Headline XS — system-ui, 16px, 600, 1.15: Overlines, chips, and small section labels.
- Body MD — system-ui, 14px, 400, 1.71, -0.011em: All paragraph copy, FAQs, and supporting descriptions. For hosted body fonts, Roboto, Open Sans, Oxygen, Ubuntu, or Cantarell are supported Google alternatives; choose per platform needs.

## Layout

Spacing follows an 8px base with asymmetric steps for tone control. Use xl (150px) for hero/top and major section padding, lg (46px) for section gutters, md (28px) for card interiors and feature columns, sm (16px) for compact groups, and xs (8px) for tight controls. Data-heavy areas stay compact (sm–md), while marketing sections breathe (lg–xl). Keep consistent vertical rhythm by pairing headline sizes with md or lg spacing above and sm below.

## Elevation & Depth

Depth relies on soft glows and selective shadows. Use sm (rgba(186,179,255,0.04) 0 0 20px 1px) for hover emphasis, md (rgba(0,0,0,0.25) 0 4px 4px) for sticky navs or small popovers, and lg (rgb(10,1,24) 0 72px 54px) for hero screenshots or modal canvases. Where shadows are none, separate layers with border (#374151) and tonal steps between neutral (#0a0118) and brand-cold-steel (#272632).

## Shapes

Corners are minimal and purposeful. Cards and panels use rounded.sm (8px) to read as equipment-like modules. CTAs, inputs, and chips use rounded.full (9999px) for pill silhouettes that feel quick and tappable. Avoid mixing additional radii to keep the language consistent.

## Components

Buttons and cards are the building blocks.
- Button — Primary: 40px height, 7px 24px padding, rounded.full, text and background tokens both map to #ffffff. In practice, place on dark surfaces and use border (#374151) or shadow sm for definition.
- Button — Secondary: Same dimensions and radius as primary; apply hierarchy via placement and surrounding tonal contrast.
- Button — Link: Text #676182, no radius; reserve for low-emphasis actions within paragraphs or lists.
- Card: Background #0a0118, text #ffffff, 8px radius, 16px padding; use md shadow sparingly, border #374151 for separation.

### Top Navigation Bar
- Surface #0a0118 with white text; compact height. Use body-md for links, sm spacing, and md shadow when sticky.

### Hero with Horizon Grid
- Headline uses headline-lg at 40px/700. Supporting copy in body-md. One primary pill CTA at 40px high with rounded.full; place over the glow and ensure focus state via sm shadow.

### Product Screenshot Stage
- Place a large dark panel (card) with lg shadow to lift it above the glow. Panel radius 8px; internal gutters md (28px).

### Feature Triptych
- Three cards in a row: headline-sm titles, body-md descriptions. Use md (28px) column gaps and sm (16px) interior padding; cards at 8px radius.

### Content Assistant Teaser
- Overline with headline-xs, short lead in headline-sm, body-md copy. One link-style button for "Copy to Clipboard."

### FAQ Accordion
- Questions in headline-sm; answers in body-md with 16px vertical padding. Use border #374151 to separate items.

### Footer Columns
- Multi-column list blocks with body-md links; column gaps md–lg. Apply brand-cold-steel (#272632) panels if extra separation is needed.

## Do's and Don'ts

Do
- Use #0a0118 as the default page background with #ffffff for core text.
- Keep violet (#8f60ef) accents sparse—glows, highlights, and key interactions only.
- Use 8px radii for cards and 9999px pills for CTAs to maintain shape language.
- Maintain roomy hero spacing (150px) and tighter data sections (16–28px).

Don't
- Stack multiple heavy shadows; prefer one lg shadow for major elements.
- Replace borders with low-contrast grays—use #374151 for consistent dividers.
- Mix additional corner radii or square some cards; it breaks continuity.

## Agent Prompt Guide

Quick color reference
- Text: #ffffff
- Background: #0a0118
- Border: #374151
- Accent: #8f60ef

1) Build the hero
- Background: #0a0118. Add a radial/linear glow using #8f60ef behind content.
- H1: font-family: 'Rebond Grotesque', Ubuntu, system-ui; font-size: 40px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: #ffffff.
- Body: font-family: system-ui, Roboto; font-size: 14px; line-height: 1.71; color: #ffffff.
- CTA: height: 40px; padding: 7px 24px; border-radius: 9999px; color: #ffffff; background: transparent; border: 1px solid #374151; box-shadow: rgba(186,179,255,0.04) 0px 0px 20px 1px; spacing above/below: 16px.

2) Feature triptych cards
- Grid: three columns with 28px gaps.
- Card: background #0a0118; color #ffffff; padding: 16px; border-radius: 8px; border: 1px solid #374151.
- Title: system-ui 20px/600; Body: system-ui 14px/1.71.

3) Dashboard stage
- Wrapper card: background #0a0118; radius 8px; shadow: rgb(10,1,24) 0px 72px 54px 0px; overflow hidden.
- Caption/toolbar text: system-ui 14px/1.71; color #ffffff.

4) FAQ accordion
- Item: border-top: 1px solid #374151; padding: 16px 0.
- Question: system-ui 20px/600; Answer: system-ui 14px/1.71; all text #ffffff; focus ring 1px #8f60ef.

5) Footer columns
- Background: #0a0118; text #ffffff; links body-md.
- Column gaps: 28px–46px; fine dividers #374151 as needed; badges/chips use 9999px radius.

## Similar Brands

- Ahrefs — Also leans dark with electric accents; Ahrefs uses brighter blues and higher-contrast tables, while Wope keeps most UI dim and emphasizes glow.
- Semrush — Orange brand on dark/gray surfaces; Semrush is louder with color in typography, where Wope reserves purple for lighting effects.
- Moz — Lighter visual tone; shares clarity in typography but avoids the dramatic shadows and neon horizon used by Wope.
- Surfer SEO — Purple brand on dark; Surfer uses more gradient fills in components, while Wope keeps components flat with subtle shadows.

More like this

Browse AI →
lev8.com
Lev8 AI
Lev8
Turn the live web into people and business intelligence.
Homepage · 4 hours ago
blogcms.io
BlogCMS AI
BlogCMS
Static blogs built to rank higher—SEO and speed built in.
Homepage · 5 hours ago
maillayer.com
MailLayer Developer Tools
MailLayer
Everything you need. Nothing you don't.
Homepage · 17 hours ago
superdevpro.com
SuperDev Pro Developer Tools
SuperDev Pro
One extension replaces your browser toolbox—no clutter, no context switching.
Homepage · 18 hours ago