---
title: "Wope design system"
variant: extended
source: https://wope.com/
captured_at: 2026-10-12
theme: dark
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/wope-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Wope · Design System

> Deep violet, luminous research

**Theme:** dark · **Industry:** saas · **Source:** https://wope.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Wope pairs a near-black violet canvas with luminous purple product imagery to present an AI-powered SEO platform. Spacious centered messaging leads into a large interface preview, feature panels, FAQ, and a restrained footer.

## North star

Keep the page immersed in a near-black violet canvas, and let a single luminous product showcase carry the visual drama.

## Overview

The page is built on a continuous near-black violet canvas (#0a0118), so the experience reads as one immersive environment rather than a stack of contrasting bands. White display headlines provide crisp hierarchy, while muted lavender-gray copy keeps supporting information quiet. Saturated violet is reserved for key emphasis and subtle atmospheric light; purple gradients and glows are concentrated behind the hero product preview instead of becoming a general background treatment. Rebond Grotesque gives large headings a distinctive, rounded presence, paired with Inter V for navigation, body copy, labels, and controls. The centered hero introduces the product before a wide, dark interface screenshot anchors the page. Customer marks, feature panels, FAQ rows, and footer columns continue the same restrained palette. Generous vertical gaps separate major sections, while fine dark borders and pill-shaped controls define interaction without heavy shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Void Violet | `#0a0118` | `--color-void-violet` | brand | Continuous page canvas behind the hero, feature area, FAQ, and footer. |
| Lavender Haze | `#9b96b0` | `--color-lavender-haze` | neutral | Muted navigation, links, and secondary copy against the dark canvas. |
| Plum Hairline | `#231b30` | `--color-plum-hairline` | surface | Subtle outlines around controls and fine dividers between dark elements. |
| Dusky Plum | `#2c2438` | `--color-dusky-plum` | surface | Secondary dark detailing, including border and gradient tones. |
| Clear White | `#ffffff` | `--color-clear-white` | neutral | Primary headlines, navigation emphasis, and high-contrast interface text. |
| Electric Violet | `#713dff` | `--color-electric-violet` | accent | Strong accent for the primary contact action and purple product lighting. |
| Indigo Ink | `#49408c` | `--color-indigo-ink` | accent | Secondary purple accent measured within button styling. |
| Ash Mauve | `#85818c` | `--color-ash-mauve` | neutral | Occasional subdued text and interface detail; not a dominant brand color. |
| Midnight Iris | `#1f0d46` | `--color-midnight-iris` | surface | Deep purple gradient tone used in atmospheric section treatment. |
| Muted Amethyst | `#61528a` | `--color-muted-amethyst` | accent | Soft purple gradient and decorative detail, rather than a broad surface. |
| Shadow Orchid | `#48328c` | `--color-shadow-orchid` | accent | Supporting violet gradient tone around product imagery. |
| Blackberry Shade | `#100621` | `--color-blackberry-shade` | surface | Near-black plum used in layered gradient details. |
| Silver Lilac | `#b6b3ba` | `--color-silver-lilac` | neutral | Occasional pale text tone within headings and interface details. |

### Semantic aliases

`--color-canvas` → `#0a0118` (Void Violet) · `--color-text` → `#ffffff` (Clear White) · `--color-text-muted` → `#9b96b0` (Lavender Haze) · `--color-border` → `#231b30` (Plum Hairline) · `--color-accent` → `#713dff` (Electric Violet) · `--color-accent-2` → `#61528a` (Muted Amethyst) · `--color-accent-3` → `#48328c` (Shadow Orchid)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#0a0118` | 20.38:1 | AAA |
| `#9b96b0` | `#0a0118` | 7.17:1 | AAA |
| `#713dff` | `#0a0118` | 3.7:1 | AA-large |

### Gradients

- `radial-gradient(24.45% 22.45% at 50% 0%, rgba(133, 102, 255, 0.04) 0%, rgba(133, 102, 255, 0) 100%, rgba(133, 102, 255, 0) 100%), radial-gradient(38.5% 24.47% at 50% 11.59%, rgba(133, 102, 255, 0.08) 0%, rgba(133, 102, 2`
- `radial-gradient(47.84% 61.25% at 50% 0%, rgba(113, 61, 255, 0.06) 0%, rgba(113, 61, 255, 0) 100%), radial-gradient(28.37% 15.33% at 50% 42.67%, rgba(113, 61, 255, 0.2) 0%, rgba(113, 61, 255, 0) 100%)`
- `linear-gradient(rgba(183, 164, 251, 0) 0px, rgba(183, 164, 251, 0.5) 100%, rgba(133, 98, 255, 0.5) 100%, rgba(133, 98, 255, 0) 0%)`
- `linear-gradient(0deg, rgba(191, 175, 255, 0.04) 0%, rgba(191, 175, 255, 0.04) 100%), linear-gradient(rgba(169, 163, 194, 0.05) 0%, rgba(169, 163, 194, 0.2) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter V | `--font-body` | webfont | 400, 500, 700 | Navigation, body copy, links, labels, buttons, and FAQ text. | Inter |
| Rebond Grotesque | `--font-display` | webfont | 700 | Display headlines and prominent feature headings. | Space Grotesk |

- **Inter V:** Use regular and medium weights for interface text; keep copy compact and understated.
- **Rebond Grotesque:** Bold, rounded display lettering; sentence case, with a subtly tight display feel.

### Type scale — Augmented Fourth (ratio ≈ 1.414, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 700 | 1.11 | -0.02em | — | Rebond Grotesque | Large, bold hero or campaign headline. |
| h1 | 56px | 700 | 1.14 | 0 | — | Rebond Grotesque | Primary page headline: “New Era of SEO Research.” |
| h2 | 28px | 400 | 1.43 | -0.02em | — | Inter V | Supporting section introduction and secondary headline. |
| h3 | 24px | 700 | 1.33 | 0 | — | Rebond Grotesque | Feature titles and prominent FAQ heading. |
| body | 18px | 400 | 1.56 | -0.01em | — | Inter V | Hero description and explanatory feature copy. |
| caption | 14px | 400 | 1.71 | -0.01em | — | Inter V | Small interface labels and supporting notes. |
| button | 14px | 500 | 1.71 | -0.01em | — | Inter V | Trial and account actions. |
| nav | 14px | 400 | 1.71 | -0.01em | — | Inter V | Top navigation and footer navigation. |
| link | 14px | 400 | 1.71 | -0.01em | — | Inter V | Inline links, footer destinations, and secondary actions. |
| eyebrow | 14px | 500 | 1.71 | 0.08em | uppercase | Inter V | Compact uppercase markers such as the FAQ badge. |

OpenType features in use: `"calt" 0, "cv06", "liga" 0`, `"cv01", "salt", "ss01", "ss03", "ss14"`, `"cv01", "dlig", "salt", "ss01", "ss03", "ss14"`, `"calt" 0, "cv06", "dlig", "liga" 0`.

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 4, 7, 8, 12, 14, 16, 20, 22, 24, 28, 32, 40, 64, 80, 124 px.
- Section rhythm 124px · element gap 8px · card padding — · max content width 1248px.

Use a centered content frame with a measured maximum width of 1248px, keeping the page visually open and aligned around the central message. The hero is centered, followed by a wide product preview and a horizontal customer-logo row. Feature content sits in a restrained multi-column arrangement, then gives way to centered FAQ content and a multi-column footer. Preserve the measured spacious section rhythm and small, consistent gaps between related elements; avoid crowding the dark canvas with dense ornament.

## Shape & elevation

- Radius: button `9999px` · badge `9999px` · nav `9999px` · xs `10px` · sm `16px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The page is mostly flat and tonal, with no measured shadow system. Separate dark content using very fine plum borders and restrained contrast rather than raised cards. Create depth through the layered hero screenshot, violet glow, and faint grid; keep controls outlined or pill-shaped and avoid heavy drop shadows.

## Imagery

The hero uses a wide screenshot of the SEO research interface, framed as a floating dark product window over a glowing violet perspective grid. Treat the interface preview as the key visual, with subdued detail and atmospheric purple light around its edges. Customer logos act as a compact trust strip. Feature panels use dark imagery or interface visuals rather than lifestyle photography; the page is product-led, with no prominent video treatment.

## Components

### Top navigation

A restrained horizontal bar with the Wope mark, centered navigation links, and account actions; white and muted lavender text sits on the dark canvas.

### Hero headline and trial action

Centered bold display heading, muted two-line supporting copy, and a compact outlined pill labeled “Unlimited trial for 14 days.”

### Product preview

Wide dark SEO dashboard screenshot layered above a violet perspective grid and soft glow; it dominates the hero visual.

### Customer logo strip

A compact horizontal row of customer marks beneath the hero showcase, rendered discreetly against the continuous dark background.

### Feature panels

Dark, lightly bordered product feature areas with interface imagery, concise headings, and quiet explanatory copy.

### FAQ list

Centered section heading and compact badge above stacked question rows, subtle divider lines, and plus-shaped expand affordances.

### Footer

Three link columns, Wope summary and trial action, contact card, and a low-contrast bottom row for copyright and social icons.

### Measured component styles

- **Primary button** (“Contact us.”): background #713dff · radius 0px · padding 0px · 500 20px Inter V
- **Secondary button** (“Unlimited trial for 14 days”): transparent background · text #000000 · border 1px solid #231b30 · radius 999px · padding 7px 24px · 500 14px Inter V
- **Link** (“Pricing”): transparent background · text #9b96b0 · radius 0px · padding 0px · 400 14px Inter V
- **Input**: transparent background · text #ffffff · border 1px solid · radius 0px · padding 14px 130px 14px 20px · 400 14px Inter V
- **Badge** (“FAQ”): transparent background · text #ffffff · border 1px solid #140b21 · radius 999px · padding 4px 14px · 500 14px Inter V · uppercase
- **Navigation item** (“Resources Pricing Download Contact Us”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Inter V

## Do

- Keep the page canvas near-black violet throughout.
- Reserve bright purple glow for product imagery and key emphasis.
- Use white for headline hierarchy and lavender-gray for secondary copy.
- Center the hero headline and supporting message.
- Give major sections generous vertical separation.
- Use fine dark borders and restrained pill-shaped controls.

## Don't

- Do not introduce bright white section backgrounds.
- Do not spread saturated purple across large flat surfaces.
- Do not add heavy shadows or thick card outlines.
- Do not let product screenshots overpower the main message.
- Do not use decorative colors outside the measured palette.
- Do not compress the page into a dense dashboard layout.

## Agent prompt

Build a new page in Wope’s visual style: an immersive dark SaaS experience on Void Violet (#0a0118), with Clear White (#ffffff) display headlines and Lavender Haze (#9b96b0) for secondary copy and links. Use Rebond Grotesque or a close display substitute for bold headings, and Inter for navigation, body text, labels, and controls. Keep the layout centered and spacious, with a clear hero followed by a wide product-interface showcase. Use Electric Violet (#713dff) sparingly for primary emphasis and atmospheric product lighting, supported by subtle purple gradients. Keep surfaces mostly flat; define panels with Plum Hairline (#231b30), not heavy shadows. Include concise feature sections, a simple FAQ, and a restrained multi-column footer. Prioritize clear hierarchy and let product imagery provide the visual drama.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and supporting copy above a wide product preview, with navigation at the top. | Primary trial action, Product-first introduction | Centered display heading, Purple glow and grid, Dark interface preview |
| 2 | logo-cloud | A centered horizontal row of customer logos between the product showcase and feature introduction. | Customer proof | Compact logo strip, Low-contrast presentation |
| 3 | feature-grid | Centered section heading followed by a small set of dark, bordered feature areas with product imagery. | Feature discovery, Product capability explanation | Three feature headings, Dark panels, Subtle borders |
| 4 | footer | Three link columns, brand summary, contact card, and a separate low-contrast bottom row. | Footer navigation, Contact discovery, Trial reminder | Column links, Outlined contact card, Social icons |

## Source CSS custom properties (selected)

```css
--animate-duration: 1s;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/wope-com