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

# Promova · Design System

> Bold language learning in bright, rounded panels

**Theme:** dark · **Industry:** education · **Source:** https://promova.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._

Promova pairs oversized, distinctive typography with soft pastel section bands and crisp black calls to action. Product-screen mockups, friendly learning graphics, and testimonials make the long homepage feel practical and approachable.

## North star

Build a sequence of spacious, softly colored panels in which bold Nekst headlines, black actions, and product imagery make language learning feel inviting and tangible.

## Overview

The visual system balances an inky black frame and typography with broad, softly colored section panels. Lavender-blue anchors the hero; white and very light gray carry the main content, while butter yellow, mint, pink, and warm beige distinguish selected proof points and content groups. Manrope handles navigation, body copy, and card text with a clean, readable texture. Nekst gives headings and calls to action a distinctive geometric display voice; headings are large and mostly regular-weight rather than heavy. The layout alternates roomy split features, centered statements, statistics, and card collections, with rounded panel edges creating a continuous sequence of contained blocks. Phone mockups and friendly character graphics show the learning product in use. Keep real interface imagery visually prominent, and treat incidental colors inside illustrations as product artwork rather than core brand colors.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Promova Ink | `#000000` | `--color-promova-ink` | brand | Page frame, primary text, dark section backgrounds, and high-contrast calls to action. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Navigation, statistic band, feature cards, review cards, and main content sections. |
| Soft Graphite | `#b3b3b3` | `--color-soft-graphite` | semantic | Measured gradient stop; not a defining flat section color in the screenshots. |
| Cloud Gray | `#f5f5f5` | `--color-cloud-gray` | surface | Large platform-benefits section and pale content surfaces. |
| Promova Lavender | `#bec8ff` | `--color-promova-lavender` | brand | Hero panel and selected product or feature cards. |
| Warm Sand | `#ebe0d3` | `--color-warm-sand` | surface | Language-tools and article content bands. |
| Muted Charcoal | `#4c4c4c` | `--color-muted-charcoal` | neutral | Secondary copy where text is softened against light surfaces. |
| Award Pink | `#f5a3d0` | `--color-award-pink` | accent | Awards and achievements panel. |
| Fresh Mint | `#bcf0d0` | `--color-fresh-mint` | accent | User testimonial band and selected supporting panels. |
| Butter Yellow | `#fff8a7` | `--color-butter-yellow` | accent | Large learner-confidence statistic panel. |
| Lilac Mist | `#d7d4e2` | `--color-lilac-mist` | semantic | Subtle pale lavender-gray surfaced in card or section treatments. |
| Pistachio Tint | `#e3efc3` | `--color-pistachio-tint` | semantic | Pale green card color, including the getting-started treatment. |
| Sage Cream | `#eef5db` | `--color-sage-cream` | semantic | Light green card surface within the product presentation. |
| Quiet Gray | `#e0e0e0` | `--color-quiet-gray` | neutral | Minor light card or interface surface, not a defining section color. |

### Semantic aliases

`--color-canvas` → `#000000` (Promova Ink) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#f5f5f5` (Cloud Gray) · `--color-surface-3` → `#bec8ff` (Promova Lavender) · `--color-surface-4` → `#ebe0d3` (Warm Sand) · `--color-text` → `#000000` (Promova Ink) · `--color-text-muted` → `#4c4c4c` (Muted Charcoal) · `--color-border` → `#000000` (Promova Ink) · `--color-accent` → `#bec8ff` (Promova Lavender) · `--color-accent-2` → `#f5a3d0` (Award Pink) · `--color-accent-3` → `#bcf0d0` (Fresh Mint)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f5f5f5` | 19.26:1 | AAA |
| `#000000` | `#bec8ff` | 12.9:1 | AAA |
| `#4c4c4c` | `#000000` | 2.45:1 | fail |
| `#4c4c4c` | `#ffffff` | 8.59:1 | AAA |
| `#4c4c4c` | `#f5f5f5` | 7.88:1 | AAA |
| `#4c4c4c` | `#bec8ff` | 5.27:1 | AA |
| `#bec8ff` | `#000000` | 12.9:1 | AAA |
| `#bec8ff` | `#ffffff` | 1.63:1 | fail |
| `#bec8ff` | `#f5f5f5` | 1.49:1 | fail |

### Gradients

- `linear-gradient(0deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 100%), none`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Manrope | `--font-manrope` | webfont | 400, 700, 500 | Navigation, body copy, card content, statistics labels, and utility text. | DM Sans |
| nekst | `--font-display` | webfont | 400, 700 | Display headings, section titles, and prominent CTA labels. | Space Grotesk |

- **Manrope:** Use a clean sans-serif voice; measured weights include 400, 500, and 700. Keep body copy readable and avoid unnecessary uppercase.
- **nekst:** Geometric display forms, generally regular weight; headings are large and compact. CTA labels may use uppercase.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 100px | 400 | 1 | 0 | — | nekst | Oversized campaign-style hero or statement headings. |
| h1 | 70px | 400 | 1 | 0 | — | nekst | Primary hero headline and major page title. |
| h2 | 50px | 400 | 1 | 0 | — | nekst | Section headlines for features, testimonials, and tools. |
| h3 | 40px | 400 | normal | 0 | — | nekst | Feature headings and prominent sub-section titles. |
| h4 | 30px | 400 | 1.2 | 0 | — | nekst | Smaller feature titles and card-level headings. |
| body | 18px | 400 | 1.44 | 0 | — | manrope | Explanatory copy, descriptions, and navigation-adjacent text. |
| caption | 15px | 700 | 1.47 | 0 | uppercase | manrope | Compact labels, metadata, and uppercase supporting labels. |
| button | 15px | 400 | normal | 0 | — | nekst | Short, prominent action labels such as TRY NOW. |

OpenType features in use: `"lnum", "pnum", "ss09", "ss10", "ss11"`.

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 3, 5, 6, 10, 15, 20, 30, 40, 60, 80, 100, 120 px.
- Section rhythm 60px · element gap 10px · card padding 28px · max content width 1160px.

A centered, wide desktop composition is framed by black gutters and divided into large, rounded section bands. The measured page max-width is 1160px, with a comfortable density and a repeating section rhythm. Use two-column splits for hero and feature storytelling, four-column groupings for stats and reviews, and broader single-column panels for testimonials or steps. Alternate left-aligned editorial blocks with centered headings; keep generous breathing room around product mockups and allow long feature sections to unfold vertically.

## Shape & elevation

- Radius: button `20px` · card `30px` · nav `30px` · xs `10px` · sm `15px` · md `20px` · lg `24px` · xl `30px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The page relies on flat color fields and rounded panel edges rather than visible shadows. Black gutters separate neighboring bands, while white cards sit directly on pale backgrounds. Use clean borders only where the interface calls for them, such as the outlined navigation sign-up action; keep product-screen layering within the artwork.

## Imagery

Use prominent app-phone mockups, cropped interface screens, friendly character artwork, and occasional human photography. Product imagery is layered within feature panels rather than treated as detached decoration; hero mockups overlap small achievement graphics. Keep imagery crisp and colorful against restrained panel backgrounds. Press logos and app-review marks serve as supporting evidence. Colors appearing only inside phone screens or illustrations are artwork, not extra brand tokens.

## Components

### Floating navigation

A white rounded navigation capsule on the black frame, with the Promova mark, Manrope links, outlined sign-up, and solid black primary action.

### Hero split

Lavender panel with a large left-aligned Nekst headline, concise supporting copy, black TRY NOW action, phone mockups, and a press-logo strip.

### Metric strip

Four evenly distributed bold figures and compact labels on a white band; keep the numbers visually stronger than their captions.

### Language selector

Dark section with a prominent question and a multi-column set of white rounded language choices with flag icons.

### Feature storytelling

Long light-gray feature panel combining numbered copy blocks, product mockups, and repeated black actions.

### Review cards

Pale lavender review area with a large title and white cards containing store identity, star marks, review copy, and learner details.

### Tool cards

Warm beige content panel with a centered headline and white cards showing app imagery, tool name, short explanation, and directional affordance.

### Measured component styles

- **Primary button** (“English”): background #ffffff · text #000000 · radius 20px · padding 20px · 400 16px manrope
- **Secondary button** (“TRY NOW”): background #000000 · text #ffffff · radius 0px · padding 0px 15px · 400 18px nekst · uppercase
- **Link** (“Pronunciation checker Listen to any word”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px manrope
- **Card** (“Pronunciation checker Listen to any word”): background #ffffff · text #000000 · radius 30px · padding 30px 30px 20px 30px · 400 16px manrope
- **Navigation item** (“Languages Courses Why Promova Resources ”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px manrope

## Do

- Use the measured palette and assign each pastel to a clear section role.
- Keep the black page frame and strong black-on-light text contrast.
- Set display headlines in Nekst and supporting copy in Manrope.
- Use rounded section panels to organize the long scrolling page.
- Show product interfaces prominently beside relevant feature explanations.
- Keep CTA labels short, direct, and visually high contrast.

## Don't

- Do not make every section the same pastel color.
- Do not replace the distinctive display type with generic heavy headings.
- Do not add decorative shadows to otherwise flat panels.
- Do not treat illustration-only colors as core brand colors.
- Do not compress explanatory copy and product imagery into dense grids.
- Do not use rounded, filled styling for every navigation or action element.

## Agent prompt

Create a new Promova-style language-learning page using Promova Ink (#000000), Gallery White (#ffffff), and Cloud Gray (#f5f5f5) as the structural foundation. Use Promova Lavender (#bec8ff) for a prominent feature or hero band, then reserve Butter Yellow (#fff8a7), Fresh Mint (#bcf0d0), Award Pink (#f5a3d0), and Warm Sand (#ebe0d3) for distinct supporting sections. Set large geometric headings in Nekst, with Manrope for navigation, body text, labels, and cards. Organize content as spacious rounded panels on a black frame, alternating split product storytelling with stats, steps, and review cards. Use crisp phone-interface mockups and friendly learning illustrations to explain the product. Keep surfaces mostly flat, text readable, and primary actions black with white labels.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Lavender two-column hero with copy at left, app mockups at right, and a press strip below. | Primary TRY NOW action, Press credibility row | Lavender panel, Oversized heading, Phone mockups, Black CTA |
| 2 | stats | Four evenly spaced metrics on a white horizontal band. | At-a-glance proof | Large numerals, Small labels, White surface |
| 3 | category-nav | Black section with heading above a multi-column set of language choices. | Choose a language, Flag-assisted recognition | Dark background, White rounded options, Flag icons |
| 4 | feature-grid | Long light-gray panel with centered heading and alternating text-and-image feature blocks. | Numbered feature progression, Repeated TRY NOW actions | Pale gray surface, Split content, App mockups |
| 5 | stats | Single centered statistic on a full-width butter-yellow band. | Social-proof statement | Oversized percentage, Centered illustration, Yellow field |
| 6 | how-it-works | Long white, vertically structured feature section with centered title and product-led content. | Stepwise product explanation, Feature detail | White canvas, Numbered headings, Phone UI |
| 7 | feature-split | Dark three-column band pairing introductory copy with athlete and app imagery. | Explore themed learning modes | Black section, Athlete photography, Mode labels |
| 8 | testimonials | Single mint testimonial band with quote, review copy, and attribution. | Learner endorsement | Mint surface, Prominent quote mark, Clear attribution |
| 9 | how-it-works | Dark introductory band followed by a step-led layout with product imagery. | Three-step onboarding, Start action | Dark background, Numbered steps, Phone and character art |
| 10 | testimonials | Pale lavender title band with left-aligned heading and carousel controls. | Review carousel navigation | Lavender-gray field, Large heading, Arrow controls |
| 11 | reviews | Four-column review-card row on a pale lavender background. | Browse learner reviews, Store-source cues | White cards, Star marks, Reviewer details |
| 12 | feature-grid | Centered headline and short introduction on a warm beige section band. | Discover free tools | Warm beige surface, Centered typography |
| 13 | product-grid | A row of tool cards within the same beige content section. | Open an individual tool | White cards, Product thumbnails, Short descriptions, Directional icons |
| 14 | other | Pink section opening with a left-aligned title and brief supporting line. | Transition to credibility proof | Pink background, Bold section title |
| 15 | logo-cloud | Recognition content arranged across a pink panel beneath the section introduction. | Scan third-party accolades | Award marks, Pink field, Compact recognition labels |
| 16 | content-feed | Warm beige editorial section with a left-aligned heading and two-column article content. | Read an article, Browse editorial content | Article thumbnails, Read-article actions, Beige surface |

## Source CSS custom properties (selected)

```css
--bprogress-color: #fffd00;
--bprogress-spinner-animation-duration: 400ms;
--bprogress-spinner-border-size: 2px;
--bprogress-box-shadow: 0 0 10px #fffd00, 0 0 5px #fffd00;
```

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