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

# V7 · Design System

> Quiet editorial typography for complex AI workflows

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

V7 pairs a near-black canvas and refined serif headlines with restrained orange accents to present enterprise AI workflows with confidence. Broad shifts between dark narrative sections and bright, information-rich product content keep the long homepage legible and varied.

## North star

Let expressive light serif headlines lead, then use disciplined sans-serif detail and alternating dark and light bands to make complex enterprise workflows feel clear.

## Overview

The homepage is built around a dramatic near-black opening, using soft white serif typography for the central promise and small sans-serif copy for supporting detail. Dark sections carry the brand narrative, industry cards and closing footer; bright white and warm off-white panels provide contrast for workflow explanations, testimonials, metrics and security content. Orange appears sparingly in the measured palette and in fine visual accents, not as a broad CTA fill. Headings use a light editorial serif with tight negative tracking, while compact sans-serif text handles navigation, labels and dense enterprise information. Content is organized in broad, clearly separated bands, with centered hero messaging followed by structured card grids and image-led proof. Customer videos and subdued interface imagery supply evidence without turning the page into a product screenshot collage. Hairline dividers and restrained shadows keep cards crisp but largely flat.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main light canvas, card backgrounds, inverse text on dark bands, and prominent pill buttons. |
| Graphite Ink | `#292929` | `--color-graphite-ink` | brand | Primary text and interface marks, including headings, badges, and dark button surfaces. |
| Midnight Panel | `#1c1c1c` | `--color-midnight-panel` | surface | Dominant dark hero, industry and footer bands; establishes the page’s central visual mood. |
| Slate Hairline | `#2e2e2e` | `--color-slate-hairline` | neutral | Measured border colour for dark badges and subtle outlines. |
| Warm Porcelain | `#f7f6f5` | `--color-warm-porcelain` | surface | Soft light section surface that breaks up pure white content areas. |
| Signal Orange | `#ff6300` | `--color-signal-orange` | accent | Restrained orange accent in text and a radial visual gradient; not a dominant fill. |
| Black Core | `#000000` | `--color-black-core` | semantic | Gradient endpoint and occasional dark interface detail; screenshot variation may also reflect imagery. |
| Deep Charcoal | `#171717` | `--color-deep-charcoal` | neutral | Secondary dark text and navigation detail, especially on light surfaces. |
| Ash Gray | `#989796` | `--color-ash-gray` | neutral | Muted supporting text and low-emphasis copy. |
| Pewter Mist | `#c1c1c1` | `--color-pewter-mist` | neutral | Low-emphasis badge detail and secondary interface text. |
| Stone Gray | `#8e8e8e` | `--color-stone-gray` | neutral | Subdued text within supporting content and interface details. |
| Warm Ash | `#a5a5a1` | `--color-warm-ash` | neutral | Muted footer and supporting text. |
| Burnt Signal | `#ec580a` | `--color-burnt-signal` | accent | Secondary orange text accent, used sparingly alongside the brighter orange. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#1c1c1c` (Midnight Panel) · `--color-surface-2` → `#f7f6f5` (Warm Porcelain) · `--color-text` → `#292929` (Graphite Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#171717` (Deep Charcoal) · `--color-border` → `#2e2e2e` (Slate Hairline) · `--color-accent` → `#ff6300` (Signal Orange) · `--color-accent-2` → `#ec580a` (Burnt Signal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#292929` | `#ffffff` | 14.55:1 | AAA |
| `#292929` | `#1c1c1c` | 1.17:1 | fail |
| `#292929` | `#f7f6f5` | 13.48:1 | AAA |
| `#ffffff` | `#1c1c1c` | 17.04:1 | AAA |
| `#ffffff` | `#f7f6f5` | 1.08:1 | fail |
| `#171717` | `#ffffff` | 17.93:1 | AAA |
| `#171717` | `#1c1c1c` | 1.05:1 | fail |
| `#171717` | `#f7f6f5` | 16.61:1 | AAA |
| `#ff6300` | `#ffffff` | 2.98:1 | fail |
| `#ff6300` | `#1c1c1c` | 5.71:1 | AA |

### Gradients

- `radial-gradient(50% 70%, rgb(255, 99, 0) 0%, rgb(0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| STK Bureau Sans Book | `--font-body` | webfont | 400 | Body copy, captions, badges, and compact content labels. | Inter |
| Martina Plantijn Light | `--font-display` | webfont | 300 | Large editorial headlines and section titles. | Cormorant Garamond |
| STK Bureau STK Bureau | `--font-stk-bureau-stk-bureau` | webfont | 430 | Navigation and compact interface labels. | Inter |

- **STK Bureau Sans Book:** Measured at regular weight; tightly tracked, small-scale text supports dense enterprise content.
- **Martina Plantijn Light:** Light weight, close line-height and negative tracking create the distinctive refined headline voice.
- **STK Bureau STK Bureau:** Measured at a slightly stronger-than-regular weight; small, tightly tracked labels remain understated.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 54px | 300 | 1 | -0.03em | — | Martina Plantijn Light | Central hero promise, set as a large light serif headline. |
| h2 | 48px | 300 | 1 | -0.03em | — | Martina Plantijn Light | Major section headings introducing product and proof content. |
| h3 | 40px | 300 | 1 | -0.03em | — | Martina Plantijn Light | Subsection headings for industry and workflow areas. |
| h4 | 30px | 300 | 1 | -0.03em | — | Martina Plantijn Light | Smaller card and feature titles. |
| body | 14px | 400 | 1.4 | -0.04em | — | STK Bureau Sans Book | Supporting descriptions, customer quotes, and explanatory copy. |
| caption | 12px | 400 | 1.4 | -0.04em | — | STK Bureau Sans Book | Compact labels, testimonial metadata, and fine print. |
| nav | 13px | 430 | 1.4 | -0.04em | — | STK Bureau STK Bureau | Top navigation and concise interface labels. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 3, 4, 6, 8, 9, 10, 12, 15, 16, 20, 24, 30, 32, 39, 40 px.
- Section rhythm 60px · element gap 4px · card padding 24px · max content width 1336px.

The page uses a broad centered content frame, measured at a maximum width of 1336px, with comfortable density and generous section separation. The hero centers its headline and supporting copy within a full-width dark field; later content alternates full-width dark and light bands. Industry cards and workflow content use aligned columns, while testimonials and proof points form structured grids. Keep text blocks narrow relative to the canvas and use the measured spacing scale to maintain clear grouping without crowding.

## Shape & elevation

- Radius: button `9999px` · card `10px` · media `50%` · badge `6px` · nav `9999px` · link `9999px` · xs `6px` · sm `8px` · md `10px` · lg `12px` · pill `9999px`
- Shadow `sm` (other, card): `rgba(0, 0, 0, 0.04) 0px 1px 3px 0px`
- Shadow `inset` (badge): `rgba(255, 255, 255, 0) 0px 0px 0px 1px inset`
- Shadow `hairline` (card): `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`
- Shadow `hairline-2` (other): `rgba(0, 0, 0, 0) 0px 1px 2px 0px`
- Shadow `xl` (link): `rgba(0, 0, 0, 0.01) 0px 0.5px 1.3px 0px, rgba(0, 0, 0, 0.01) 0px 1.2px 3.1px 0px, rgba(0, 0, 0, 0.01) 0px 2.3px 5.8px 0px, rgba(0, 0, 0, 0.02) 0px 4px 10.5px 0px, rgba(0, 0, 0, 0.02) 0px 7.5px 19px 0p`

The system is mostly flat: strong surface changes and thin dividers establish hierarchy instead of heavy shadows. Cards can use the measured subtle shadow treatment, while badges use a fine outline and inset edge. Keep layering restrained, with rounded pill controls and softly rounded cards rather than elevated, floating panels.

## Imagery

Imagery combines subdued interface and workflow visuals with customer interview videos. Video thumbnails are framed as rectangular panels with darkened overlays and concise speaker captions. The hero uses an abstract, low-contrast dark visual with fine orange traces rather than prominent product photography. Keep imagery restrained, legible, and supportive of the enterprise narrative.

## Components

### Dark hero

Full-width near-black field with centered light serif headline, compact supporting copy, a white pill CTA, and subdued abstract visual texture.

### Pill actions

Rounded CTA and navigation controls; use white surfaces against dark bands and restrained text contrast.

### Industry cards

Three-column dark cards with concise industry descriptions, outlined category badges, and low-key text links.

### Workflow grid

Light section with aligned feature cells, compact headings, product/interface imagery, and subtle separators.

### Customer proof

Video-led testimonials with darkened rectangular thumbnails, speaker labels, metrics, and readable quote text.

### Trust strip

Compact security and customer proof marks set in subdued tones within a spacious light content area.

### Dark footer

Near-black closing band with a serif positioning statement and multiple compact link columns separated from the bottom utility row.

### Measured component styles

- **Primary button** (“Get in Touch”): background #ffffff · text #0000ee · radius 160px · padding 0px · 400 12px sans-serif
- **Secondary button**: background #292929 · text #000000 · radius 40px · padding 0px · 400 12px sans-serif
- **Link** (“Explore Private Markets”): transparent background · text #0000ee · radius 120px · padding 0px · 400 12px sans-serif
- **Card** (“Time saving for invoice processing 95% "”): background #ffffff · text #000000 · radius 0px · padding 24px · 400 12px sans-serif
- **Badge** (“Deal screening”): background #282828 · text #ffffff · border 1px solid #2e2e2e · radius 6px · padding 6px 8px · 400 13px STK Bureau Sans Book · shadow rgba(255, 255, 255, 0) 0px 0px 0px 1px inset
- **Navigation item** (“AI for Private Markets: Inside 10 East's”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px sans-serif

## Do

- Use near-black bands to anchor the hero and closing content.
- Set major headlines in a light editorial serif.
- Keep supporting copy compact and sans-serif.
- Alternate dark narrative sections with bright product sections.
- Reserve orange for sparse accents and fine visual details.
- Use thin dividers and subtle card shadows.
- Give product and proof content clear, aligned grids.

## Don't

- Do not fill large areas with orange.
- Do not use heavy shadows to create card hierarchy.
- Do not crowd the hero with extra controls or copy.
- Do not use oversized sans-serif headlines in place of the editorial serif.
- Do not make every section share the same background tone.
- Do not treat illustrative orange traces as a standalone brand gradient across the page.

## Agent prompt

Build a new enterprise AI page in V7’s restrained editorial style. Use Midnight Panel (#1c1c1c) for the hero and selected narrative bands, with Gallery White (#ffffff) for content surfaces and Warm Porcelain (#f7f6f5) as a gentle section variation. Set prominent headings in a light, tightly tracked editorial serif; use compact sans-serif for body copy, labels, and navigation. Keep Signal Orange (#ff6300) and Burnt Signal (#ec580a) sparse, as small accents rather than broad fills. Organize content in a wide centered frame with clear section bands, aligned grids, and comfortable spacing. Favor customer video and muted workflow imagery, crisp dividers, lightly rounded cards, and subtle shadows. Keep CTAs simple white pills on dark fields and avoid unnecessary visual ornament.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | cta | Single-column, full-width white section with a left-aligned headline and one supporting link. | Customer proof, Single next-step link | Editorial heading, Minimal copy, Generous white space |
| 2 | footer | Multi-column navigation footer with a leading brand statement, link groups, and a separated utility row. | Grouped site navigation, Contact pathway, Utility links | Dark background, Compact link lists, Thin horizontal divider |

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