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

# Vivid+Co · Design System

> Quiet monochrome, oversized type, deliberate space

**Theme:** dark · **Industry:** agency · **Source:** https://vividand.co/ · **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._

Vivid+Co presents its agency through a near-black canvas, warm-white typography, and oversized editorial headlines. Generous vertical pauses, fine rules, and restrained team photography keep the long page composed and understated.

## North star

Let oversized warm-white typography and generous dark space carry the story; keep every other visual device quiet.

## Overview

The page is built around a continuous near-black canvas (#101010), with warm off-white (#fffdf9) carrying nearly all visible text, from large statements to small navigation labels and footer links. The palette stays deliberately narrow; muted slate (#4a5765) and charcoal gray (#40403f) are measured as minor border or detail colours, not broad background bands. Neue Montreal is used throughout in regular weight. Large, naturally cased headlines dominate the editorial rhythm, while smaller uppercase labels identify services, clients, and sections. A single-column narrative alternates oversized statements with compact supporting copy and service or advisor lists; thin horizontal rules quietly organize rows. Wide vertical gaps create a spacious pace across the long page. Team portraits appear as framed, rounded-corner photographs among otherwise text-led sections, while client and publication marks remain small. Avoid adding decorative colour, gradients, heavy shadows, or dense card treatments.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Ink Canvas | `#101010` | `--color-ink-canvas` | surface | Continuous page canvas and background for all major sections. |
| Warm Porcelain | `#fffdf9` | `--color-warm-porcelain` | neutral | Primary text, headings, navigation, links, and footer details. |
| Slate Hairline | `#4a5765` | `--color-slate-hairline` | semantic | Measured as a minor border/detail colour; use only for subdued separators where visible. |
| Coal Detail | `#40403f` | `--color-coal-detail` | neutral | Minor measured detail colour, not a defining section background or prominent UI fill. |

### Semantic aliases

`--color-canvas` → `#101010` (Ink Canvas) · `--color-text` → `#fffdf9` (Warm Porcelain) · `--color-border` → `#4a5765` (Slate Hairline)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#fffdf9` | `#101010` | 18.73:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Neue Montreal | `--font-body` | webfont | 400 | Site-wide display, headings, body copy, labels, navigation, and links. | Inter |

- **Neue Montreal:** Regular weight throughout; large headlines use natural case, labels often uppercase, with slight negative tracking on display text.

### Type scale — Perfect Fifth (ratio ≈ 1.554, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 136px | 400 | 1 | -0.02em | — | Neue Montreal | Oversized lead statements and prominent editorial moments. |
| h1 | 105.5px | 400 | 1.01 | 0 | — | Neue Montreal | Primary section headlines and major page statements. |
| h2 | 56px | 400 | 1.13 | 0 | — | Neue Montreal | Large supporting section headings. |
| h3 | 33.5px | 400 | 1.2 | -0.01em | — | Neue Montreal | Service and link titles with editorial emphasis. |
| h4 | 32px | 400 | 1.01 | 0 | uppercase | Neue Montreal | Uppercase service or category labels. |
| body | 15px | 400 | 1.2 | 0.01em | — | Neue Montreal | Compact descriptive copy and supporting paragraphs. |
| caption | 14px | 400 | 1.5 | 0 | uppercase | Neue Montreal | Small uppercase section labels and metadata. |
| link | 33.5px | 400 | 1.2 | -0.01em | — | Neue Montreal | Prominent text links and project labels. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 1, 5, 7, 11, 15, 20, 30, 38, 40, 53, 56, 60, 64, 72 px.
- Section rhythm 109px · element gap 38px · card padding — · max content width 1070px.

A long, mostly single-column editorial page sits within a measured 1070px maximum width. Content aligns to a consistent left edge, with select supporting copy offset toward the right and team content arranged across columns. Large headline sections alternate with compact service lists, case-study rows, logo groups, and team profiles. Measured section gaps are generous; preserve the visible pauses rather than compressing the page. Use thin horizontal rules to separate repeated rows, and keep overall density low.

## Shape & elevation

- Radius: xs `15px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s ease` on interactive elements.

The interface reads as flat: there are no measured shadows or gradients. Sections share the same canvas rather than sitting on raised cards. Fine horizontal rules distinguish repeated rows and list items; image framing provides the main localized change in depth without adding general card elevation.

## Imagery

The page is primarily typography and text, not image-led. Team portraits are the main human imagery, shown as individual rounded-corner photographs against the dark page. Client and publication logos appear small within their own compact grouping; treat them as supplied marks rather than sources for a broader colour palette. Avoid inventing illustration, 3D, or decorative media treatments.

## Components

### Editorial headline

Large regular-weight Neue Montreal statement in warm white, left aligned, with natural casing and ample surrounding dark space.

### Service columns

Three compact service groups with uppercase labels, small supporting copy, simple marks, and understated bottom rules.

### Case-study rows

Stacked uppercase client or project labels separated by thin horizontal rules rather than boxed cards.

### Client and press marks

Small logo marks arranged in compact groups beside uppercase section labels; preserve their supplied artwork.

### Team profiles

Portrait-led profile items with rounded image corners, name and role text, and subtle separators.

### Text navigation and links

Unfilled, unshadowed text controls in warm white; labels are often uppercase and links remain visually restrained.

### Footer details

Small email, social, copyright, and policy links placed directly on the dark canvas.

### Measured component styles

- **Primary button** (“Caitlin Kelly + Founder”): transparent background · text #fffdf9 · radius 0px · padding 0px · 400 18px Neue Montreal
- **Link** (“FINTECH COMPANY”): transparent background · text #fffdf9 · radius 0px · padding 60.5px 0px 52.9px 0px · 400 18px Neue Montreal
- **Navigation item** (“EXPERTISE EXPERTISE WORK WORK TEAM TEAM ”): transparent background · text #fffdf9 · radius 0px · padding 0px · 400 18px Neue Montreal

## Do

- Use #101010 as the continuous page canvas.
- Set primary text in #fffdf9.
- Use Neue Montreal or a close neutral sans-serif substitute.
- Give major statements generous room to breathe.
- Separate repeated rows with fine, quiet rules.
- Keep labels and supporting copy visually subordinate.
- Use portraits and logos sparingly within the editorial flow.

## Don't

- Do not introduce bright accent colours or gradients.
- Do not place every content group inside a card.
- Do not add shadows or ornamental elevation.
- Do not make supporting copy compete with the headlines.
- Do not compress the large vertical pauses.
- Do not recolour client or publication logos as brand accents.

## Agent prompt

Build a new Vivid+Co-style agency page as a restrained editorial narrative. Use Ink Canvas (#101010) across the page and Warm Porcelain (#fffdf9) for headings, body text, labels, navigation, and links. Use Neue Montreal where available, otherwise a neutral sans such as Inter, in regular weight. Create a clear scale contrast between oversized, naturally cased statements and compact supporting copy. Keep content aligned to a broad, consistent column, but allow secondary copy to sit offset where appropriate. Organize service groups, case studies, and advisors with thin horizontal rules rather than cards. Preserve generous vertical breathing room between blocks. Keep imagery limited to carefully framed team portraits and small supplied logos. Avoid gradients, shadows, bright accents, and decorative surfaces.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width dark opening canvas with no detected visible content. | quiet entry | near-black canvas |
| 2 | other | Continued single-column dark section with substantial empty space. | scroll-led reveal | continuous dark background |
| 3 | feature-split | Small supporting statement paired with a large left-aligned headline. | statement-led introduction | oversized typography, offset supporting copy |
| 4 | other | Dark single-column pause between headline sections. | paced scrolling | open canvas |
| 5 | feature-split | Large multiline headline followed by compact supporting copy offset to the right. | editorial argument | large type, asymmetric text placement |
| 6 | feature-grid | Three service columns with compact descriptions and fine bottom rules. | service overview | three-column grouping, uppercase labels, hairline dividers |
| 7 | feature-split | Large left-aligned process headline with smaller supporting copy to the right. | process explanation | oversized headline, offset paragraph |
| 8 | other | Three stacked case-study labels with thin horizontal dividers. | case-study browsing | uppercase project labels, separated rows |
| 9 | logo-cloud | Two compact logo groups, each introduced by an uppercase label. | credibility scan | small logo marks, paired groups |
| 10 | other | Open dark transition before the team section. | paced transition | uninterrupted canvas |
| 11 | team | Team introduction alongside profile columns with portrait imagery. | team discovery | portrait tiles, name and role labels |
| 12 | team | Section heading followed by a vertical list of advisor names and separators. | advisor roster | stacked names, thin row dividers |
| 13 | other | Dark, spacious transition before the recruitment call to action. | scroll continuation | open canvas |
| 14 | cta | Two-column call to action with a large statement and compact copy containing a contact link. | recruitment invitation, contact link | oversized headline, split text layout |
| 15 | footer | Minimal footer with email, social link, copyright, and policy links. | contact access, legal navigation | small text links, dark canvas |

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