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

# Evervault · Design System

> Payments security, rendered as a precise dark interface

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

Evervault pairs a near-black canvas with vivid violet light to frame payment security as flexible infrastructure. Compact technical labels and detailed product-interface mockups balance polished typography with a developer-oriented feel.

## North star

Keep the near-black interface calm and structured, using violet glow only to direct attention toward product capability.

## Overview

The page is built around a near-black, blue-tinted canvas, with fine cool borders dividing broad content bands. Violet gradients provide the main visual energy: they glow behind product areas and cards rather than turning the whole interface into a saturated field. White headings stay crisp, while muted gray supporting copy recedes; green is reserved for small approval and status signals. Roobert Medium gives display and heading text a compact, controlled shape, with Inter carrying readable body copy and IBM Plex Mono marking technical labels. The hero centers a short headline, supporting statement, and paired pill CTAs above customer logos and a large payments dashboard. Below, modular feature groups, framed explanatory panels, testimonials, and use-case cards create a long, deliberate scroll. Product imagery is primarily interface illustration—dark cards, encryption diagrams, and dashboard details—with violet glow used as depth and emphasis. Hairline borders and restrained shadows keep the interface structured without adding visual heaviness.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Light page canvas and high-contrast text on dark surfaces, including prominent headings and pale CTA fills. |
| Midnight Ink | `#010314` | `--color-midnight-ink` | surface | Primary dark section and card surface; establishes the site's blue-black foundation. |
| Slate Hairline | `#1d1f2e` | `--color-slate-hairline` | neutral | Fine outlines and separators around dark product cards and interface panels. |
| Electric Violet | `#8e64ff` | `--color-electric-violet` | accent | Primary violet accent for gradient highlights, selected controls, and emphasized text. |
| Plum Shadow | `#0a0024` | `--color-plum-shadow` | surface | Deep purple transition at the start of the dark hero gradient. |
| True Black | `#000000` | `--color-true-black` | neutral | Measured black text; secondary to the page's white-on-dark visual system. |
| Quiet Gray | `#999aa1` | `--color-quiet-gray` | neutral | Muted supporting copy and low-emphasis text on dark sections. |
| Frosted Gray | `#e8e8e9` | `--color-frosted-gray` | neutral | Soft light heading and text color within dark product and content areas. |
| Night Panel | `#101222` | `--color-night-panel` | surface | Secondary dark panel tone for layered interface surfaces. |
| Soft Porcelain | `#f4f4f4` | `--color-soft-porcelain` | neutral | Occasional pale control or subtle outline detail; not a dominant canvas color. |
| Blue Gray | `#9fa2b9` | `--color-blue-gray` | neutral | Secondary subdued text tone within technical interface details. |
| Deep Violet | `#6633ee` | `--color-deep-violet` | accent | Darker violet stop in atmospheric gradients and compact accent surfaces. |
| Indigo Edge | `#21204e` | `--color-indigo-edge` | neutral | Subtle dark-indigo border or detail, mainly within interface elements. |
| Card Midnight | `#0b0d1c` | `--color-card-midnight` | surface | Dark product-card fill for the encryption and relay interface mockup. |
| Cloud Gray | `#cccdd0` | `--color-cloud-gray` | neutral | Low-frequency pale heading detail against dark surfaces. |
| Status Green | `#3ddc97` | `--color-status-green` | semantic | Small success and approval indicators within payment dashboard UI. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#010314` (Midnight Ink) · `--color-surface-2` → `#101222` (Night Panel) · `--color-text` → `#000000` (True Black) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#999aa1` (Quiet Gray) · `--color-border` → `#1d1f2e` (Slate Hairline) · `--color-accent` → `#8e64ff` (Electric Violet) · `--color-accent-2` → `#6633ee` (Deep Violet) · `--color-accent-3` → `#3ddc97` (Status Green) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#010314` | 1.02:1 | fail |
| `#000000` | `#101222` | 1.13:1 | fail |
| `#ffffff` | `#010314` | 20.5:1 | AAA |
| `#ffffff` | `#101222` | 18.56:1 | AAA |
| `#999aa1` | `#ffffff` | 2.8:1 | fail |
| `#999aa1` | `#010314` | 7.31:1 | AAA |
| `#999aa1` | `#101222` | 6.62:1 | AA |
| `#8e64ff` | `#ffffff` | 3.88:1 | AA-large |
| `#8e64ff` | `#010314` | 5.29:1 | AA |

### Gradients

- `linear-gradient(rgb(10, 0, 36) 0%, rgb(1, 3, 20) 7%)`
- `radial-gradient(115.017% 55.492% at 107% -3.2%, rgb(142, 100, 255) 0%, rgb(102, 51, 238) 25%, rgba(0, 0, 0, 0) 62.5869%)`
- `radial-gradient(135% 65.7035% at 1.84783% 102.295%, rgb(142, 100, 255) 0%, rgb(102, 51, 238) 25%, rgba(0, 0, 0, 0) 62.5869%)`
- `radial-gradient(450px 450px at calc(50% + 204px) calc(50% - 394px), rgb(255, 255, 255) 0%, rgb(102, 51, 238) 38%, rgb(1, 3, 20) 78%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 600, 500, 700 | Body copy, captions, buttons, and much of the interface text | Inter |
| Roobert Medium | `--font-display` | webfont | 500 | Display headlines and section headings | DM Sans |
| IBM Plex Mono | `--font-mono` | webfont | 400, 300, 500 | Eyebrows and technical micro-labels | IBM Plex Mono |
| ui-monospace | `--font-ui-monospace` | system | 400 | System fallback for compact code-like interface details | IBM Plex Mono |
| Roobert SemiBold | `--font-roobert-semibold` | webfont | 600 | Occasional stronger heading or emphasis | DM Sans |

- **Inter:** Mostly regular with measured medium, semibold, and bold weights; compact body tracking and clear, restrained hierarchy.
- **Roobert Medium:** Medium weight, tight negative tracking on larger headings, sentence case, and clean geometric forms.
- **IBM Plex Mono:** Uppercase, widely tracked, small labels that give section markers a technical, instrument-like character.
- **ui-monospace:** Monospaced fallback used sparingly; retain its technical feel in terse metadata.
- **Roobert SemiBold:** Semibold emphasis is limited; keep it subordinate to the medium-weight display system.

### Type scale — Perfect Fourth (ratio ≈ 1.368, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 500 | 1.2 | -0.02em | — | Roobert Medium | Centered hero headline and prominent campaign statements. |
| h1 | 40px | 500 | 1.2 | -0.01em | — | Roobert Medium | Primary page or major section heading. |
| h2 | 29.5px | 500 | 1.2 | 0 | — | Roobert Medium | Section titles for product capabilities and use cases. |
| h3 | 20px | 500 | 1.3 | -0.01em | — | Roobert Medium | Feature names and card-level headings. |
| body | 16px | 400 | 1.5 | -0.02em | — | Inter | Supporting descriptions, navigation, and explanatory copy. |
| caption | 13px | 400 | 1.4 | 0 | — | Inter | Compact dashboard details and secondary card text. |
| eyebrow | 10px | 400 | 1.6 | 0.61em | uppercase | IBM Plex Mono | Uppercase technical labels above or within sections. |
| code | 10px | 400 | 1.6 | 0.61em | uppercase | IBM Plex Mono | Small monospaced technical markers and interface labels. |

OpenType features in use: `"blwf", "cv03", "cv04", "cv09", "cv11"`.

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 3, 4, 5, 6, 7, 8, 10, 12, 14, 16, 18, 20, 22, 24, 32 px.
- Section rhythm 48px · element gap 10px · card padding — · max content width 1200px.

A centered, wide content frame organizes the page into stacked dark bands, with measured maximum width of 1200px. The hero is center-aligned; product dashboards and feature groups shift into multi-column arrangements below. Hairline vertical and horizontal rules frame selected sections, creating a measured grid without crowding the content. Spacing follows a comfortable rhythm: generous gaps around major sections, tighter intervals within cards and interface mockups. The page alternates dense product detail with quieter testimonial and CTA moments.

## Shape & elevation

- Radius: button `9999px` · input `6px` · card `16px` · media `8px` · link `9999px` · xs `4px` · sm `6px` · md `8px` · lg `16px` · pill `9999px`
- Shadow `lg` (other): `rgba(0, 0, 0, 0.34) 0px 0.361312px 1.51751px -1.5px, rgba(0, 0, 0, 0.29) 0px 1.37312px 5.7671px -3px, rgba(0, 0, 0, 0.04) 0px 6px 25.2px -4.5px, rgba(141, 99, 255, 0.2) 0px 2px 15px 0px`
- Shadow `inset` (card): `rgba(0, 0, 0, 0.05) 0px 0px 0px 2px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px, rgba(255, 255, 255, 0.5) 0px 0.5px 0px 0px inset`
- Shadow `sm` (other): `rgba(0, 0, 0, 0.3) 0px 2px 8px 0px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0.25) -7px 10px 18.6px 0px, rgba(0, 0, 0, 0.17) -2px 2px 4px 0px, rgba(0, 0, 0, 0.3) -2px 4px 34.5px 0px`
- Shadow `inset-2` (other): `rgba(190, 167, 255, 0.12) 0px 0px 0px 1px inset`
- Motion: standard transition `0.16s ease` on interactive elements.

The system relies on thin borders and contrast between closely related dark surfaces more than on floating shadows. Product panels use fine cool outlines, with selective inset edges and restrained shadow depth to separate layered UI. Violet glow gives key cards and showcase regions atmosphere without making every surface appear elevated.

## Imagery

Imagery is product-led rather than photographic: payment dashboards, encryption panels, payment cards, code-like screens, and compact partner marks. Mockups sit in dark framed surfaces and use violet glow or gradient light to distinguish key areas. Keep interface illustrations legible at a glance, with realistic data density and restrained highlights; green appears as a small status cue.

## Components

### Header navigation

Slim brand and navigation row over the dark canvas, with a centered pill-shaped nav and a pale expert-contact CTA.

### Hero CTAs

Centered pair of rounded actions beneath the hero copy; use a bright primary button and a subdued dark secondary action.

### Payments dashboard

Wide, dark bordered product mockup with transaction rows, status indicators, card controls, and compact interface typography.

### Feature columns

Three grouped capability columns with uppercase mono labels, short descriptions, fine separators, and compact icon-led items.

### Framed feature panel

Large outlined content area with a section heading, violet-gradient product illustration, and concise supporting benefit columns.

### Use-case cards

Three dark cards with short titles, muted explanatory copy, and interface imagery highlighted by violet light.

### Newsletter form

Footer signup module pairing a short heading and supporting sentence with a compact email field and pill action.

### Measured component styles

- **Primary button**: background #8e64ff · text #ffffff · radius 20px · padding 2px · 400 12px sans-serif
- **Secondary button** (“Sign up”): background #f2eeff · text #ffffff · radius 100px · padding 12px 24px · 500 14px Inter
- **Link** (“LEVEL 1 SERVICE PROVIDER GDPR AICPA SOC ”): transparent background · text #9e9eff · radius 0px · padding 0px · 400 12px sans-serif
- **Input**: transparent background · text #ffffff · radius 6px · padding 8px 10px · 400 12.8px Inter
- **Card** (“Encryption ALWAYS ON Relay ALWAYS ON BIN”): background #0b0d1c · text #ffffff · border 1px solid #1d1f2e · radius 16px · padding 0px · 400 12px Inter · shadow rgba(0, 0, 0, 0.05) 0px 0px 0px 2px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px, r

## Do

- Use a near-black blue-tinted base for the main page canvas.
- Reserve violet gradients for product highlights and focused calls to action.
- Keep major headings centered and concise in the hero.
- Separate dark panels with fine, low-contrast borders.
- Use mono uppercase labels for technical section markers.
- Show product capability through detailed interface mockups.
- Keep success green to small status indicators.

## Don't

- Do not turn the page into a bright white layout.
- Do not spread violet glow across every section.
- Do not use heavy shadows in place of panel borders.
- Do not let supporting copy compete with the headline.
- Do not use large photographic hero imagery.
- Do not make dashboard details look like generic decorative cards.

## Agent prompt

Build a new Evervault-style page as a dark, technical fintech experience. Use Midnight Ink (#010314) as the primary surface, with Night Panel (#101222) and Card Midnight (#0b0d1c) for layered UI, separated by Slate Hairline (#1d1f2e). Keep Gallery White (#ffffff) and Frosted Gray (#e8e8e9) for clear text hierarchy, with Quiet Gray (#999aa1) for supporting copy. Use Electric Violet (#8e64ff) and Deep Violet (#6633ee) selectively in soft gradients and focused controls; Status Green (#3ddc97) should only signal success. Set display headings in a Roobert-like sans, body in Inter, and technical eyebrows in IBM Plex Mono. Compose a centered hero, pill CTAs, realistic payment or encryption UI, modular feature sections, and a restrained footer. Favor thin borders, generous section breathing room, and crisp product detail over decorative effects.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero and navigation above customer logos and a wide payment dashboard mockup. | primary and secondary CTA, customer proof, product preview | dark canvas, pill navigation, violet glow, bordered dashboard |
| 2 | newsletter | Three-column footer with newsletter signup at left and grouped links at right. | email signup, product navigation, legal links | compact form, small logo, muted link lists, dark footer |

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