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

# Vivid Europe · Design System

> Clear business finance in a calm, vivid interface

**Theme:** light · **Industry:** fintech · **Source:** https://vivid.money/en-eu/ · **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._

A bright fintech homepage pairs a restrained white canvas with vivid purple calls to action and soft, tinted product panels. Large Satoshi headings, generous section breaks, and polished banking imagery make dense business-finance features approachable.

## North star

Keep the page predominantly white and let precise purple accents, soft product panels, and real product imagery do the visual work.

## Overview

Vivid’s visual strategy uses white as the dominant canvas, keeping a long, information-rich business-finance page open and legible. Ink-like charcoal headings and body text provide strong contrast, while saturated purple is reserved for primary calls to action, selected links, and small status accents. Cool pale blue and near-white gray panels separate feature cards without creating heavy visual bands; lavender and blush gradients are used selectively for promotional moments and signup areas. Satoshi carries the page throughout: headings are medium-weight, compactly tracked, and prominent, while smaller body copy stays neutral and readable. The layout alternates centered feature sections with broad card grids and split hero content. Product screenshots, banking devices, people, and customer-story video thumbnails make the offer tangible, while soft corners, fine borders, and generous whitespace keep the overall presentation calm rather than corporate-heavy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Graphite | `#333333` | `--color-soft-graphite` | neutral | Primary headings and body copy, navigation text, and dark card content. |
| Vivid Violet | `#7d33f6` | `--color-vivid-violet` | brand | Primary CTA fill, selected links, small badges, and interactive emphasis. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas, light cards, and white text on purple controls. |
| Cloud Blue | `#ecf1fa` | `--color-cloud-blue` | surface | Cool-tinted cards, subtle section surfaces, and fine dividers. |
| Mist Gray | `#f5f5f7` | `--color-mist-gray` | surface | Pale feature-card and link-panel backgrounds. |
| Quiet Slate | `#79797f` | `--color-quiet-slate` | neutral | Muted supporting copy, footer text, and secondary links. |
| Lavender Haze | `#f4edff` | `--color-lavender-haze` | surface | Soft purple-tinted card and link surfaces. |
| Illustration Black | `#000000` | `--color-illustration-black` | semantic | Gradient and product-image detail only; not a defining interface color. |
| Lilac Edge | `#e5d6fd` | `--color-lilac-edge` | accent | Subtle card outline accent; secondary to the primary violet. |
| Blush Tint | `#f7ecee` | `--color-blush-tint` | surface | Soft blush hue within occasional promotional gradients. |
| Deep Charcoal | `#2b2b2b` | `--color-deep-charcoal` | neutral | Minor dark text variation; use sparingly alongside the main graphite. |
| Pale Leaf | `#f1faec` | `--color-pale-leaf` | semantic | Tiny link or status surface, not part of the dominant page palette. |
| Night Detail | `#1f1f1f` | `--color-night-detail` | semantic | Occasional dark media or gradient detail, not a general page surface. |
| Orchid Mist | `#f2e4f0` | `--color-orchid-mist` | surface | Mid-tone in the brand’s soft lilac promotional gradient. |
| Soft Amethyst | `#aa93ea` | `--color-soft-amethyst` | accent | Secondary purple gradient color and restrained decorative accent. |
| Warm Cream | `#faf5ec` | `--color-warm-cream` | semantic | Minor warm link surface, appearing only as a small supporting tint. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#ecf1fa` (Cloud Blue) · `--color-surface-2` → `#f5f5f7` (Mist Gray) · `--color-surface-3` → `#333333` (Soft Graphite) · `--color-surface-4` → `#f4edff` (Lavender Haze) · `--color-text` → `#333333` (Soft Graphite) · `--color-text-muted` → `#79797f` (Quiet Slate) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#ecf1fa` (Cloud Blue) · `--color-accent` → `#7d33f6` (Vivid Violet) · `--color-accent-2` → `#aa93ea` (Soft Amethyst) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#333333` | `#ffffff` | 12.63:1 | AAA |
| `#333333` | `#ecf1fa` | 11.15:1 | AAA |
| `#333333` | `#f5f5f7` | 11.6:1 | AAA |
| `#79797f` | `#ffffff` | 4.33:1 | AA-large |
| `#79797f` | `#ecf1fa` | 3.82:1 | AA-large |
| `#79797f` | `#f5f5f7` | 3.97:1 | AA-large |
| `#79797f` | `#333333` | 2.92:1 | fail |
| `#ffffff` | `#ecf1fa` | 1.13:1 | fail |
| `#ffffff` | `#f5f5f7` | 1.09:1 | fail |
| `#ffffff` | `#333333` | 12.63:1 | AAA |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0), rgb(0, 0, 0))`
- `linear-gradient(251deg, rgb(248, 240, 237) -9.1%, rgb(242, 228, 240) 36.43%, rgb(170, 147, 234) 105.93%)`
- `linear-gradient(rgb(236, 238, 242) 0px, rgb(255, 255, 255) 100%)`
- `linear-gradient(rgba(236, 238, 242, 0.7), rgba(236, 238, 242, 0) 20.323%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Satoshi | `--font-body` | webfont | 400, 500, 700 | All primary page typography, from navigation and headings to body copy and buttons. | Inter |
| ui-monospace | `--font-mono` | system | 400, 700 | Tiny code-like or technical labels only. | Roboto Mono |

- **Satoshi:** Use measured weights 400, 500, and 700; headings are medium-weight with subtly tight tracking, while eyebrow text is uppercase.
- **ui-monospace:** Rare usage; keep it secondary and compact rather than introducing a second prominent type voice.

### Type scale — Augmented Fourth (ratio ≈ 1.388, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 52px | 500 | 1 | -0.02em | — | Satoshi | Hero headline; large, compact, left-aligned display copy. |
| h2 | 36px | 500 | 1 | -0.005em | — | Satoshi | Main section headings, generally centered above feature groups. |
| h3 | 24px | 500 | 1.17 | -0.01em | — | Satoshi | Feature, product, and trust-panel titles. |
| h4 | 20px | 500 | 1.2 | -0.01em | — | Satoshi | Subsection and card-level headings. |
| body | 14px | 400 | 1.29 | 0 | — | Satoshi | Supporting paragraphs and explanatory feature descriptions. |
| caption | 12px | 400 | 1.17 | 0 | — | Satoshi | Fine print, helper text, and compact supporting labels. |
| button | 16px | 500 | 1.5 | 0 | — | Satoshi | Primary and secondary action labels. |
| nav | 16px | 500 | 1.5 | 0 | — | Satoshi | Header navigation and top-level menu links. |
| link | 14px | 500 | 1.29 | 0 | — | Satoshi | Text links and smaller card actions. |
| eyebrow | 12px | 500 | 1.33 | 0.06em | uppercase | Satoshi | Small uppercase category labels with expanded tracking. |
| code | 8px | 400 | 1.88 | 0 | — | ui-monospace | Occasional technical or code-like detail. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 1, 2, 4, 6, 8, 10, 12, 13, 15, 16, 23, 24, 30, 32, 48, 56 px.
- Section rhythm 56px · element gap 8px · card padding 6px · max content width 1152px.

Use a centered content frame capped at the measured 1152px page max width, with broad white section backgrounds and comfortable breathing room. The page alternates a two-column, left-copy/right-product hero with centered headings above modular card grids. Three- and multi-column arrangements support feature, trust, and pricing content; a few full-width promotional panels interrupt the rhythm. Measured section rhythm is 56px, with an 8px base unit. Keep cards and text readable rather than compressing the long page into dense blocks.

## Shape & elevation

- Radius: button `9999px` · card `24px` · media `50%` · badge `8px` · link `24px` · xs `4px` · sm `6px` · md `8px` · lg `10px` · xl `24px` · 2xl `30px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The interface is mostly flat: measured shadow data is absent, so avoid adding conspicuous drop shadows. Separate cards with pale fills, generous whitespace, and occasional thin outlines. Rounded panels and overlapping product imagery provide the sense of depth; gradients belong to selected promotional sections rather than every card.

## Imagery

Use polished product visuals—banking app screens, cards, phones, and interface mockups—alongside candid business photography and customer-story video stills. The hero’s device imagery is large, angled, and allowed to dominate its half of the composition. Feature cards crop imagery cleanly within rounded containers; illustrations and product renderings can carry lavender and purple, while ordinary page chrome stays restrained.

## Components

### Primary CTA

Bright Vivid Violet #7d33f6 pill button with white 16px, weight-500 Satoshi text; the measured primary button uses a fully rounded radius.

### Top navigation

Minimal header with the vivid wordmark, compact menu links, locale and login controls, and a prominent purple Get started action.

### Feature cards

Modular product cards use pale gray or blue-tinted surfaces, rounded corners, concise text, and product photography or interface imagery.

### Product feature grid

Centered section title above card groups; pair short headings and copy with visual product details, keeping panels distinct but light.

### Trust and testimonial cards

Customer stories combine video imagery, short quotation text, and restrained supporting actions in soft-tinted rounded panels.

### Pricing cards

Three plan columns compare rates and features; emphasize the selected tier with a subtle lavender surface and purple action.

### Signup panel

Broad rounded promotional panel with a soft lilac-to-blush gradient, centered form fields, and a violet submission button.

### Measured component styles

- **Primary button** (“Get started”): background #7d33f6 · text #ffffff · border 1px solid · radius 100px · padding 15px 23px · 500 16px Satoshi
- **Secondary button** (“Get started”): background #f4edff · text #7d33f6 · border 1px solid · radius 100px · padding 15px 23px · 500 16px Satoshi
- **Link** (“Corporate cards Cards assigned to a pers”): background #f5f5f7 · text #333333 · radius 24px · padding 32px · 400 16px Satoshi
- **Input** (“+49”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Satoshi
- **Card** (“Accounts & Interest Free accounts with u”): transparent background · text #333333 · border 1px solid #e5d6fd · radius 0px · padding 24px 0px 0px 0px · 400 15px Satoshi
- **Badge** (“Learn more”): background #f5f5f4 · text #333333 · radius 8px · padding 8px · 500 12px Satoshi
- **Navigation item** (“Products Solutions Pricing Customers Res”): transparent background · text #7d33f6 · radius 0px · padding 0px · 400 15px Satoshi

## Do

- Keep white as the dominant canvas.
- Reserve vivid purple for primary actions and focused accents.
- Use Satoshi-style geometric sans typography throughout.
- Give section headings room to breathe.
- Group complex features into pale, rounded panels.
- Use genuine product and business imagery to explain the offer.

## Don't

- Do not turn the page into a dark interface.
- Do not use purple as a full-page background.
- Do not add unmeasured shadows or heavy outlines.
- Do not crowd feature cards with long blocks of copy.
- Do not treat incidental illustration colors as brand colors.
- Do not replace the calm whitespace with dense decorative elements.

## Agent prompt

Build a new fintech page in the Vivid Europe visual style. Use Gallery White (#ffffff) as the dominant canvas, Soft Graphite (#333333) for headings and body copy, and Vivid Violet (#7d33f6) for primary actions and focused accents. Use Cloud Blue (#ecf1fa), Mist Gray (#f5f5f7), and Lavender Haze (#f4edff) as restrained card surfaces; reserve Soft Amethyst (#aa93ea) and Orchid Mist (#f2e4f0) for occasional gradients. Set a geometric sans such as Satoshi or Inter, with medium-weight compact headings and readable regular body text. Organize content in a centered, measured-width frame with generous whitespace, centered section titles, modular rounded cards, and occasional split layouts. Use polished product imagery and real business photography. Keep elevation subtle and avoid invented shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column hero: large left-aligned headline and copy beside oversized angled banking device imagery. | Primary Get started action, Trust rating and review count, Brand logo proof | White canvas, Purple pill CTA, Product mockup |
| 2 | feature-grid | Centered section heading above a three-column feature composition with large image cards and smaller feature panels. | Feature discovery, Get started action, Regulatory reassurance | Rounded image cards, Pale feature panels, Product interface overlays |
| 3 | product-showcase | Centered heading above three product cards, followed by partner and protection details. | Compare cash options, Scan investment choices, Get started action | Three-column cards, Product illustrations, Partner marks |
| 4 | feature-grid | Centered section title above a multi-column carousel-like row of compact product cards. | Browse product offerings, Previous and next controls | Pastel card surfaces, Small product illustrations, Carousel arrows |
| 5 | category-nav | Centered heading above three image-led audience cards with compact copy and card-level links. | Audience self-selection, Learn more links, Carousel navigation | Business photography, Three-column cards, Light card framing |
| 6 | feature-split | Full-width horizontal promotional band with copy on the left and a person holding a card on the right. | Open personal account CTA, Secondary learn-more link | Lilac gradient band, Person-and-card image, Purple pill button |
| 7 | testimonials | Centered proof heading above two wide story cards with media thumbnails and quotation panels. | Read customer stories, Video playback, Browse story carousel | Video thumbnails, Soft blue quote panels, Rounded cards |
| 8 | reviews | Centered review heading followed by rating statistics and a horizontal row of review excerpts. | Compare rating sources, Browse review cards | Large rating numerals, Compact review text, Carousel arrows |
| 9 | other | Centered heading above a broad rounded information panel, with security marks arranged beneath. | Review safeguarding information, Scan compliance assurances | Pale lavender panel, Shield visual, Certification icons |
| 10 | pricing | Centered pricing heading, account-type and billing selectors, three plan columns, and a feature comparison below. | Switch business type, Toggle billing period, Compare plans | Three pricing cards, Highlighted lavender plan, Feature rows and checkmarks |
| 11 | contact | Broad rounded gradient panel with a centered heading and vertically stacked account-registration fields. | Select country and entity, Enter company and phone details, Submit application | Lilac-to-blush background, White form fields, Purple submit button |
| 12 | footer | Four-column footer link directory with compact category labels and stacked text links. | Navigate product categories, Find company and resource links | Multi-column link lists, Small uppercase labels, Muted text |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
--color-white: #fff;
--color-dark-coal: #303336;
--color-green-spring: #42c88c;
--color-gray-light: #f5f5f5;
--color-gray-lightest: #f8f8f7;
--color-gray-blue: #dbe0e4;
--color-gray: #959ba4;
--color-gray-skinhead: #6f6f6f;
--color-error: #c40b08;
--color-black-skinhead: #222;
--color-purple-haze: #6c26de;
--color-purple-rane: #aa93ea;
--color-white-punk: #fff;
--color-dark-goose: #d3d3d3;
--font-family: Satoshi,-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
--font-size-text-xs: 11px;
--font-size-text-s: 13px;
--font-size-text-m: 15px;
--font-size-text-l: 17px;
--line-height-text-xs: 16px;
--line-height-text-s: 20px;
--line-height-text-m: 24px;
--line-height-text-l: 28px;
--font-size-h1: 40px;
--font-size-h2: 30px;
--font-size-h3: 24px;
--font-size-h4: 20px;
--font-size-h1-mob: 28px;
--font-size-h2-mob: 24px;
--font-size-h3-mob: 22px;
--font-weight-normal: 400;
--font-weight-semibold: 500;
--font-weight-bold: 600;
--border-radius-block: 8px;
--border-default-s: 1px solid #b3b3b3;
--border-default-l: 2px solid #b3b3b3;
--border-radius-s: 4px;
--border-radius-l: 8px;
--border-radius-xl: 16px;
```

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