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

# Visual · Design System

> Editorial restraint meets playful AI product visuals

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

Visual presents AI design agents for revenue teams through a restrained monochrome interface and editorial typography. Product interface previews and polished 3D imagery bring energy to an otherwise quiet, structured page.

## North star

Keep the interface quiet and editorial, using typography and product imagery—not color or ornament—to create contrast.

## Overview

The page uses a warm, near-white canvas and pale gray-beige bands to create a calm foundation, punctuated by deep charcoal feature and footer sections. Black carries the main headlines and body copy, while muted olive-gray handles secondary links and labels; occasional yellow-green accents appear mainly in product artwork. Large, high-contrast serif headlines establish an editorial voice, balanced by compact monospaced navigation, captions, body text, and uppercase buttons. Layout alternates centered hero moments with generous two-column product demonstrations, bordered or pale cards, and a three-column audience section. Product screenshots, interface mockups, pixel-art icons, and glossy 3D forms provide contrast without introducing a broad color palette. Borders and thin rules define structure more than shadows. The overall rhythm is spacious, with clear transitions between white content and dark feature bands.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, light content sections, and reversed text on charcoal buttons and dark bands. |
| Olive Hush | `#6d6e5e` | `--color-olive-hush` | semantic | Muted navigation and link text, including small uppercase supporting links. |
| Porcelain Mist | `#f6f6f4` | `--color-porcelain-mist` | surface | Hero backdrop and pale product cards that separate content from the white canvas. |
| Charcoal Olive | `#2c2c26` | `--color-charcoal-olive` | brand | Primary CTA fill, feature band and footer background, with white text. |
| Muted Brass | `#aaa674` | `--color-muted-brass` | accent | Thin control outline and occasional small accent details; not a dominant page color. |
| Checker Gray | `#e3e3de` | `--color-checker-gray` | neutral | Checkerboard transparency-style pattern behind media and decorative imagery. |
| Editorial Ink | `#000000` | `--color-editorial-ink` | neutral | Primary headline, navigation, and card text on light surfaces. |
| Soft Rule | `#d0d0c8` | `--color-soft-rule` | semantic | Hairline borders and subtle outlines on cards, navigation, buttons, and separators. |
| Stone Gray | `#aaab9c` | `--color-stone-gray` | neutral | Secondary text tone, visible in supporting copy and fine print. |
| Moss Charcoal | `#57584b` | `--color-moss-charcoal` | neutral | Subtle dark card and interface details, primarily within product and media visuals. |
| Sage Gray | `#979886` | `--color-sage-gray` | neutral | Low-emphasis text and footer details rather than a primary brand color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f6f6f4` (Porcelain Mist) · `--color-surface-2` → `#2c2c26` (Charcoal Olive) · `--color-text` → `#000000` (Editorial Ink) · `--color-text-muted` → `#6d6e5e` (Olive Hush) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#d0d0c8` (Soft Rule)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f6f6f4` | 19.41:1 | AAA |
| `#000000` | `#2c2c26` | 1.5:1 | fail |
| `#6d6e5e` | `#ffffff` | 5.2:1 | AA |
| `#6d6e5e` | `#f6f6f4` | 4.8:1 | AA |
| `#6d6e5e` | `#2c2c26` | 2.7:1 | fail |
| `#ffffff` | `#f6f6f4` | 1.08:1 | fail |
| `#ffffff` | `#2c2c26` | 14.04:1 | AAA |

### Gradients

- `linear-gradient(45deg, rgb(227, 227, 222) 25%, rgba(0, 0, 0, 0) 0px), linear-gradient(-45deg, rgb(227, 227, 222) 25%, rgba(0, 0, 0, 0) 0px), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(227, 227, 222) 0px), linear-gr`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| fontMono | `--font-mono` | webfont | 500, 300 | Navigation, body copy, captions, buttons, labels, and interface-style text. | IBM Plex Mono |
| fontSerif | `--font-display` | webfont | 300, 400 | Display headlines, section headings, and prominent editorial links. | DM Serif Display |

- **fontMono:** Compact, medium-weight monospace; small labels and controls are uppercase, with subtly tight tracking.
- **fontSerif:** Light-to-regular high-contrast serif with tight negative tracking and compact leading.

### Type scale — Perfect Fifth (ratio ≈ 1.47, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 400 | 0.94 | -0.05em | — | fontSerif | Oversized central hero headline and other statement-scale moments. |
| h1 | 64px | 300 | 1 | -0.05em | — | fontSerif | Primary page headline and major feature headings. |
| h2 | 48px | 300 | 1 | -0.025em | — | fontSerif | Section titles introducing product, vision, or content blocks. |
| h3 | 32px | 400 | 1.13 | -0.025em | — | fontSerif | Card and feature headings in the main content flow. |
| h4 | 28px | 500 | 1 | -0.025em | — | fontMono | Compact subheadings and product-interface labels. |
| body | 14px | 500 | 1.33 | -0.025em | — | fontMono | Descriptions, supporting paragraphs, and product card copy. |
| caption | 12px | 500 | 1 | 0 | uppercase | fontMono | Uppercase eyebrow labels, metadata, and small annotations. |
| button | 12px | 500 | 1 | 0 | uppercase | fontMono | Uppercase CTA and utility button labels. |
| nav | 12px | 500 | 1 | 0 | uppercase | fontMono | Uppercase primary navigation links. |
| link | 24px | 400 | 1.13 | -0.025em | — | fontSerif | Prominent editorial article links and large text links. |
| code | 14px | 500 | 1.33 | -0.025em | — | fontMono | Code-like snippets and agent or integration interface text. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 12, 16, 24, 32, 64, 80 px.
- Section rhythm 80px · element gap 8px · card padding 24px · max content width 1376px.

Use a centered page frame with a measured maximum width of 1376px and comfortable content density. The hero is centered, followed by broad, spacious sections that alternate between two-column product storytelling and three-column audience or article grids. Preserve generous section separation and use alignment changes to create rhythm: centered introductions, left-aligned feature copy, and neatly aligned cards. Thin borders and corner marks lightly frame selected content areas without enclosing every section.

## Shape & elevation

- Radius: button `9999px` · card `8px` · media `6px` · nav `3px` · xs `3px` · sm `4px` · md `6px` · lg `8px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Keep surfaces largely flat, with no measured shadows. Use fine gray hairlines, pale card fills, and occasional dark panels to establish hierarchy. Rounded pill CTAs contrast with mostly square card geometry; let media overlap or float within its frame for depth instead of adding shadow effects.

## Imagery

Combine product UI mockups and slide previews with polished reflective 3D abstract forms, checkerboard transparency motifs, and occasional pixel-art icons. Keep media framed within the content grid, with graphics sometimes overlapping nearby space. The images can carry brighter yellow-green details, but the surrounding interface remains restrained; treat those colors as artwork accents rather than core UI colors.

## Components

### Primary navigation

Compact uppercase monospaced links centered near the top, with the dark Visual mark at left and a light, outlined waitlist pill at right.

### Hero

Large centered serif headline, small uppercase eyebrow, short monospaced description, paired CTAs, and a glossy 3D visual over a checker motif.

### Primary CTA

Charcoal pill-shaped button with white uppercase monospaced text; use the measured #2c2c26 and #ffffff pairing.

### Product feature band

Dark charcoal section with left-aligned serif feature heading and concise UI-like copy, balanced by a product/AI visual on the right.

### Feature cards

Pale #f6f6f4 cards with dark monospaced copy, supported by thin #d0d0c8 borders where needed.

### Audience grid

Three adjacent sales, marketing, and success columns, each led by a concise heading, supporting copy, and an illustrative icon.

### Editorial feed

Three-column blog preview with image-led cards, serif article titles, and compact uppercase dates and author metadata.

### Footer

Deep charcoal four-column footer with small uppercase monospaced links, subdued copyright text, and a contrasting waitlist control.

### Measured component styles

- **Primary button** (“VISUAL”): background #2c2c26 · text #ffffff · radius 4px · padding 0px 12px · 500 12px fontMono · uppercase
- **Secondary button** (“WAITLIST”): background #e8e7d9 · text #2c2c26 · border 1px solid #aaa674 · radius 3.35544e+07px · padding 0px 12px · 500 12px fontMono · uppercase
- **Link** (“6 Reasons Why Consistency is Everything ”): transparent background · text #000000 · radius 0px · padding 0px · 400 24px fontSerif
- **Card** (“Automate QBRs Skip the copy-paste loop a”): background #f6f6f4 · text #000000 · radius 0px · padding 24px · 400 16px fontMono
- **Navigation item** (“VISUAL WHY VISUAL? ASSETS TOOLS BLOG WAI”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px fontMono

## Do

- Use large, tightly tracked serif headlines for key statements.
- Set navigation, labels, and buttons in compact uppercase monospace.
- Keep light sections predominantly white and warm off-white.
- Use charcoal bands to create decisive contrast between content groups.
- Let product previews and 3D artwork provide most of the visual variety.
- Use thin rules and pale surfaces instead of shadows for structure.

## Don't

- Don't introduce a broad or saturated UI color palette.
- Don't use generic sans-serif typography for the main display headlines.
- Don't add heavy shadows or glossy effects to interface cards.
- Don't crowd the hero with extra labels or competing actions.
- Don't apply illustration-only accent colors to every UI control.
- Don't round every card; reserve pill forms mainly for CTA controls.

## Agent prompt

Build a new page in Visual’s editorial AI SaaS style. Use Gallery White (#ffffff) and Porcelain Mist (#f6f6f4) for quiet light sections, then use Charcoal Olive (#2c2c26) for one strong feature band or footer. Set major headlines in a high-contrast serif with tight tracking; use compact monospaced typography for navigation, labels, body copy, and uppercase buttons. Use Editorial Ink (#000000) for primary text and Olive Hush (#6d6e5e) for subdued links. Structure the page with a centered introduction, spacious feature splits, and orderly multi-column cards. Define edges with Soft Rule (#d0d0c8), not shadows. Add product UI previews or carefully framed 3D artwork, allowing any brighter accents to remain inside imagery. Keep the interface sparse, readable, and product-led.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered serif headline and copy above paired CTAs and a large overlapping 3D hero visual. | waitlist CTA, secondary learn-more action | monospaced top navigation, checkerboard media motif, 3D visual |
| 2 | product-showcase | Centered section heading above a wide product preview and a three-card workflow row. | workflow overview, product interface preview | pale cards, serif section title, thin framing marks |
| 3 | feature-split | Dark two-column band with feature copy and interaction list at left, product imagery at right. | expandable feature list, join waitlist CTA | charcoal background, white serif heading, overlapping AI mockups |
| 4 | feature-grid | Two side-by-side product panels, one pale and one dark, each with a heading and supporting illustration. | brand consistency explanation, integration overview | paired panels, mixed light and dark surfaces, product diagrams |
| 5 | feature-grid | Three-column audience grid for sales, marketing, and customer success. | role-based use cases | aligned headings, pixel-art style icons, thin separators |
| 6 | gallery | Centered gallery introduction above a multi-panel collage of slide and presentation previews. | browse template examples | asymmetric media collage, varied preview surfaces, light framing |
| 7 | cta | Centered dark statement panel inside a broad checkerboard-style backdrop. | learn about the company | dark inset panel, centered serif message, outlined pill link |
| 8 | content-feed | Three-column article preview grid with image, serif title, and compact metadata. | article discovery | image-led cards, serif headlines, uppercase metadata |
| 9 | footer | Dark four-column footer with grouped links and a waitlist control. | resource navigation, company navigation, waitlist action | charcoal surface, uppercase monospace links, subdued copyright |

## Source CSS custom properties (selected)

```css
--background: 0 0% 100%;
--foreground: 64 8% 16%;
--primary: 64 8% 16%;
--primary-hover: 64 8% 24%;
--primary-disabled: 64 8% 40%;
--primary-foreground: 0 0% 100%;
--primary-foreground-disabled: 64 8% 80%;
--secondary: 64 8% 96%;
--secondary-hover: 64 8% 80%;
--secondary-foreground: 64 8% 40%;
--muted-foreground: 64 8% 56%;
--accent: 56 24% 88%;
--accent-foreground: 56 24% 56%;
--destructive-foreground: 210 40% 98%;
--popover-foreground: 64 8% 16%;
--border-surface: 64 8% 88%;
--border-control: 64 8% 80%;
--border-control-hover: 64 8% 56%;
--border-control-focus: 56 24% 56%;
--card-foreground: 64 8% 16%;
--border-a11y: 248 64% 56%;
```

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