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

# Prevalent AI · Design System

> Editorial clarity for enterprise security AI

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

Prevalent AI pairs deep navy hero and footer bands with generous white content sections, serif display headlines, and a restrained violet accent. Large narrative illustrations introduce the platform, while tinted application cards and a compact article grid make the long homepage easy to scan.

## North star

Balance editorial serif headlines and vivid narrative illustration against calm, spacious layouts and a disciplined navy-violet palette.

## Overview

The visual strategy alternates immersive dark bands with bright, open content sections. The hero and footer use Midnight Ink (#060b25), making white type and Signal Violet (#6360d8) headline emphasis and CTA buttons stand out; the central narrative and resources sections return to white or near-white canvases. Matter handles navigation, body copy, and buttons in a clean sans-serif voice, while Tiempos Headline brings an editorial, literary character to display and section headings. Typography is generally regular-weight, with tight headline tracking and selective violet emphasis rather than decorative effects. The spacious layout uses a centered hero, broad content width, and clear section breaks; product blocks shift into two-column layouts, with three-column capability and resource groupings. Illustrations carry much of the personality: they are large, colorful, and integrated into the page story rather than treated as generic stock imagery. Cards remain mostly flat, differentiated by pale mint or lavender fills and fine rules.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas for the product, team, and resource sections; also the light navigation bar and text on dark bands. |
| True Ink | `#000000` | `--color-true-ink` | neutral | Primary dark text for headings, body copy, and navigation on light backgrounds. |
| Signal Violet | `#6360d8` | `--color-signal-violet` | accent | Primary CTA fill, selected headline emphasis, links, and fine accent borders. |
| Midnight Ink | `#060b25` | `--color-midnight-ink` | brand | Full-width hero and footer backgrounds, creating contrast for white copy and bright illustrations. |
| Slate Copy | `#383c51` | `--color-slate-copy` | neutral | Muted supporting text on light backgrounds. |
| Mint Veil | `#f1fff9` | `--color-mint-veil` | surface | Pale mint fill on exposure-management product cards; keep its use confined to card surfaces. |
| Footer Rule | `#1f243b` | `--color-footer-rule` | semantic | Subtle footer border detail, not a primary page surface. |
| Lavender Veil | `#f1f1ff` | `--color-lavender-veil` | surface | Pale lavender product-card background for Security Data Fabric. |
| Footer Slate | `#242940` | `--color-footer-slate` | semantic | Small dark footer detail; use only for restrained footer-level contrast. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#060b25` (Midnight Ink) · `--color-surface-2` → `#f1fff9` (Mint Veil) · `--color-surface-3` → `#f1f1ff` (Lavender Veil) · `--color-text` → `#000000` (True Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#383c51` (Slate Copy) · `--color-border` → `#6360d8` (Signal Violet) · `--color-accent` → `#6360d8` (Signal Violet) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#060b25` | 1.08:1 | fail |
| `#000000` | `#f1fff9` | 20.41:1 | AAA |
| `#000000` | `#f1f1ff` | 18.77:1 | AAA |
| `#ffffff` | `#060b25` | 19.4:1 | AAA |
| `#ffffff` | `#f1fff9` | 1.03:1 | fail |
| `#ffffff` | `#f1f1ff` | 1.12:1 | fail |
| `#383c51` | `#ffffff` | 10.86:1 | AAA |
| `#383c51` | `#060b25` | 1.79:1 | fail |
| `#383c51` | `#f1fff9` | 10.56:1 | AAA |

### Gradients

- `linear-gradient(90deg, rgba(255, 255, 255, 0.08) 2px, rgba(0, 0, 0, 0) 0px)`
- `linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Matter | `--font-body` | webfont | 400, 500 | Navigation, body copy, captions, buttons, and the measured sans-serif h1. | DM Sans |
| Tiempos Headline | `--font-display` | webfont | 400 | Display and section headlines, including editorial statements and product titles. | Instrument Serif |

- **Matter:** Mostly regular weight, with occasional medium navigation or small badge text; tight tracking in content and mixed-case labels.
- **Tiempos Headline:** Regular-weight serif headlines with tight negative tracking; mixed case, sentence-style phrasing, and selective violet emphasis.

### Type scale — Perfect Fourth (ratio ≈ 1.348, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 400 | 0.98 | -0.02em | — | Tiempos Headline | Oversized editorial hero statement. |
| h1 | 50px | 400 | 1 | -0.02em | — | Matter | Hero heading in a clean sans-serif treatment where used. |
| h2 | 48px | 400 | 1.1 | -0.02em | — | Tiempos Headline | Major section statements and prominent product headings. |
| h3 | 45px | 400 | 1.1 | -0.02em | — | Tiempos Headline | Secondary editorial headings and content group titles. |
| h4 | 30px | 400 | 1.1 | -0.02em | — | Tiempos Headline | Product-card and smaller section headings. |
| body | 18px | 400 | 1.55 | -0.02em | — | Matter | Explanatory copy, product descriptions, and article summaries. |
| caption | 16px | 400 | 1.55 | -0.02em | — | Matter | Small supporting labels and resource metadata. |
| button | 14px | 400 | 1 | -0.02em | — | Matter | Compact CTA labels such as demo and contact actions. |
| nav | 16px | 400 | 1.55 | 0 | — | Matter | Primary navigation links and menu labels. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 2, 4, 5, 7, 8, 12, 14, 15, 17, 18, 22, 24, 26, 29, 32 px.
- Section rhythm 144px · element gap 32px · card padding — · max content width 1200px.

The page uses a spacious, long-form rhythm with a measured 1200px maximum content width and substantial section separation. A centered, single-column hero gives way to left-aligned introduction and three-column capability content, followed by centered product framing and two-column product cards. Team content uses a media-and-copy split; resources use a three-column article grid. Dark full-width bands bookend the mostly white page. Keep alignments clear and density low, using whitespace rather than heavy dividers to distinguish sections.

## Shape & elevation

- Radius: button `4px` · nav `4px` · xs `4px` · sm `10px`
- Shadow `hairline` (nav): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Motion: standard transition `0.2s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The design is predominantly flat: cards rely on tinted fills, framing, and whitespace rather than shadows. Borders and hairlines are restrained, with occasional fine rules in content and footer areas. Layering comes from the hero illustration overlapping the dark field and the white navigation panel sitting above it, not from prominent elevation effects.

## Imagery

The hero is built around a large, colorful illustrated enterprise world that extends across the dark background and anchors the opening story. Product cards pair concise copy with distinct illustrated scenes on pale mint, lavender, and blue-toned panels. The team block uses a media image, and the resource area uses photographic article thumbnails. Preserve the contrast between narrative illustration and documentary-style editorial photography; imagery is integrated into broad page blocks rather than small decorative icons.

## Components

### Floating navigation

A broad white rounded navigation panel over the dark hero, with a logo and hiring badge at left, centered menu links, and a violet demo CTA at right.

### Hero statement

Centered editorial headline with white and violet emphasis, supporting copy, a violet Learn more button, and a large illustrated scene below.

### Capability columns

Three evenly distributed text-led columns for Clarity, Context, and Control, separated by fine vertical rules and paired with small colorful illustrations.

### Product showcase cards

Wide, flat cards combine concise left-aligned product copy and Learn more link with a large illustration; use pale lavender or mint surfaces.

### Resource grid

Editorial article cards arranged in three columns with landscape thumbnails, small category labels, compact titles, and subtle separators.

### Footer CTA

Dark full-width closing band with a two-line headline, violet emphasis, contact button, grouped navigation links, and a subdued legal bar.

### Measured component styles

- **Primary button** (“Learn more Learn more”): background #6360d8 · text #ffffff · radius 4px · padding 15px 48px · 400 16px Matter
- **Link** (“Learn more Learn more”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Matter
- **Card** (“Exposure Management Continuously identif”): background #f1fff9 · text #000000 · radius 0px · padding 0px · 400 16px Matter
- **Navigation item** (“Join our team! Products Company Resource”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Matter

## Do

- Use Midnight Ink (#060b25) for the hero and closing footer bands.
- Set editorial display headlines in a restrained serif.
- Reserve Signal Violet (#6360d8) for CTAs and selective emphasis.
- Keep content sections bright, spacious, and easy to scan.
- Use illustrations as integrated storytelling, especially in the hero and product cards.
- Differentiate product cards with pale mint or lavender fills.

## Don't

- Do not turn every section into a dark panel.
- Do not replace the illustrated narrative with generic interface mockups.
- Do not add heavy shadows to otherwise flat cards.
- Do not use multiple competing accent colors for controls.
- Do not compress sections into a dense dashboard layout.
- Do not set all headings in the same sans-serif voice.

## Agent prompt

Build a new page in Prevalent AI’s editorial enterprise-security style. Use Midnight Ink (#060b25) for immersive hero or closing bands, Gallery White (#ffffff) for the main canvas, True Ink (#000000) for primary copy, and Signal Violet (#6360d8) for CTAs and selective headline emphasis. Set major statements in a Tiempos-like editorial serif and navigation/body copy in a Matter-like sans serif. Favor a spacious content width, clear section breaks, and simple column grids. Use large narrative illustrations as meaningful content, with product panels on Mint Veil (#f1fff9) or Lavender Veil (#f1f1ff). Keep cards flat, borders restrained, and hierarchy obvious. Build a new composition rather than copying the exact homepage sections; preserve its contrast, typography, and calm pacing.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Dark, full-bleed illustrated hero with centered headline, copy, and CTA beneath a floating navigation bar. | Primary demo navigation, Single hero CTA | Navy canvas, White and violet serif headline, Large narrative illustration |
| 2 | feature-grid | Bright section with a left-aligned introduction followed by three evenly spaced capability columns. | Scan three value pillars, Explanatory supporting copy | Light neutral canvas, Fine vertical dividers, Small colorful illustrations |
| 3 | product-showcase | Centered section heading above stacked, wide two-column product cards. | Browse multiple applications, Learn more links | Pale tinted card surfaces, Copy-and-illustration split, Flat card treatment |
| 4 | team | Open media-and-copy split with image on one side and left-aligned story and CTA on the other. | Read founder context, Join-the-team CTA | White canvas, Editorial heading, Single prominent media block |
| 5 | content-feed | Left-aligned introduction above a three-column editorial grid of image-led article cards. | Browse thought leadership, Open article cards | Photographic thumbnails, Small category labels, Fine horizontal rules |
| 6 | footer | Full-width dark closing band with prominent CTA heading, contact action, grouped links, and legal bar. | Speak-to-us CTA, Grouped site navigation, Back-to-top control | Navy background, White headline with violet emphasis, Subtle footer dividers |

## Source CSS custom properties (selected)

```css
--tw-text-opacity: 1;
--swiper-theme-color: #007aff;
```

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