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

# Copy.ai · Design System

> Calm, structured layouts with vivid violet platform graphics

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

Copy.ai’s homepage pairs spacious, pale sections and bold black typography with vivid purple product graphics. Modular cards, customer proof, and a dark closing CTA guide visitors from platform overview to demo.

## North star

Keep the page airy and editorial, using violet for focused product emphasis rather than broad decoration.

## Overview

The page uses white as its main canvas, alternating with very pale blue-gray bands to distinguish major content areas without heavy decoration. Near-black headings provide strong contrast, while muted blue-gray copy keeps supporting text quieter. Violet is the signature visual accent, most visible in the hero’s route-like platform illustration, product diagrams, and small action elements; it should not be mistaken for a full-page background color. ABC Normal gives display and primary headings a compact, assertive editorial character, supported by Inter for navigation, body copy, and interface details. The layout moves through broad hero storytelling, a three-column use-case grid, customer proof, platform architecture, and article cards before a high-contrast dark demo CTA. Cards remain mostly flat, with fine borders and restrained shadows. Consistent alignment, generous section separation, and concise text make a dense enterprise product story feel organized.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary canvas, white cards, and light text on dark surfaces. |
| Carbon Ink | `#171717` | `--color-carbon-ink` | brand | Main headings, navigation, dark footer band, and dark demo CTA. |
| Mist Wash | `#f6fafb` | `--color-mist-wash` | surface | Pale blue-gray section bands, hero field, and email input background. |
| Slate Copy | `#566b76` | `--color-slate-copy` | semantic | Muted body copy and understated text links such as Learn more. |
| Cloud Hairline | `#e4edf1` | `--color-cloud-hairline` | neutral | Fine dividers and input or section borders on light surfaces. |
| Lilac Signal | `#c1b9f4` | `--color-lilac-signal` | accent | Soft violet text accent; also present in purple product artwork. |
| Pale Graphite | `#e0e0e0` | `--color-pale-graphite` | neutral | Subtle borders around editorial link cards and secondary interface details. |
| Electric Violet | `#693edf` | `--color-electric-violet` | brand | Primary demo button and prominent violet product graphics. |
| Ash Text | `#5d5d5d` | `--color-ash-text` | semantic | Secondary footer and supporting text. |
| Blue Black | `#000b0f` | `--color-blue-black` | semantic | Occasional extra-dark heading text; not a dominant surface color. |
| Steel Text | `#364045` | `--color-steel-text` | semantic | Secondary button and supporting interface text. |
| Frost Edge | `#ccd9e0` | `--color-frost-edge` | neutral | Subtle inset edge on secondary demo buttons. |
| Graphite Border | `#424445` | `--color-graphite-border` | neutral | Borders on dark testimonial cards. |
| Deep Iris | `#3b0d96` | `--color-deep-iris` | accent | Deep violet links and lower-tone details inside platform illustrations. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f6fafb` (Mist Wash) · `--color-surface-2` → `#171717` (Carbon Ink) · `--color-text` → `#171717` (Carbon Ink) · `--color-text-muted` → `#566b76` (Slate Copy) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#e4edf1` (Cloud Hairline) · `--color-accent` → `#c1b9f4` (Lilac Signal) · `--color-accent-2` → `#693edf` (Electric Violet) · `--color-accent-3` → `#3b0d96` (Deep Iris) · `--color-on-accent` → `#171717` (Carbon Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#171717` | `#ffffff` | 17.93:1 | AAA |
| `#171717` | `#f6fafb` | 17.06:1 | AAA |
| `#566b76` | `#ffffff` | 5.58:1 | AA |
| `#566b76` | `#f6fafb` | 5.31:1 | AA |
| `#566b76` | `#171717` | 3.21:1 | AA-large |
| `#ffffff` | `#f6fafb` | 1.05:1 | fail |
| `#ffffff` | `#171717` | 17.93:1 | AAA |
| `#c1b9f4` | `#ffffff` | 1.82:1 | fail |
| `#c1b9f4` | `#f6fafb` | 1.74:1 | fail |
| `#c1b9f4` | `#171717` | 9.83:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500, 600, 700 | Navigation, body copy, cards, links, and interface text. | Inter |
| ABC Normal | `--font-display` | webfont | 500, 600 | Display and primary page headings. | Inter |

- **Inter:** Measured weights 400–700; functional sans-serif with compact, untransformed labels.
- **ABC Normal:** Measured weights 500–600; assertive, tightly composed headings without uppercase transformation.

### Type scale — Major Third (ratio ≈ 1.285, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 500 | 1.18 | 0 | — | ABC Normal | Large hero and campaign-style display headlines. |
| h1 | 48px | 600 | 1 | 0.005em | — | ABC Normal | Primary hero title and strongest page heading. |
| h2 | 26px | 400 | 1.31 | 0.01em | — | ABC Normal Regular | Section headings and customer-story statements. |
| h3 | 24px | 600 | 1.33 | -0.02em | — | Inter | Feature-card and subsection headings. |
| h4 | 22px | 400 | 1.45 | -0.005em | — | Inter | Supporting headings within product or content blocks. |
| body | 16px | 500 | 1.5 | 0 | — | Inter | Paragraph copy describing platform capabilities and use cases. |
| caption | 12px | 400 | 1.33 | 0 | — | Inter | Compact labels and secondary supporting details. |
| nav | 16px | 500 | 1.5 | 0 | — | Inter | Top navigation labels and menu items. |
| link | 12px | 400 | 1.33 | 0 | — | Inter | Small text links such as Learn more. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 6, 8, 10, 12, 16, 18, 20, 24, 26, 30, 32, 36, 40, 48, 60 px.
- Section rhythm 60px · element gap 16px · card padding 30px · max content width 1160px.

The page uses a wide, centered content frame measured at a 1160px maximum, with broad section bands and internal multi-column grids. The hero spreads its title, supporting copy, and product visual across a large canvas; later areas use three- and four-column arrangements for use cases, testimonials, and articles. Headings align left in most sections. Measured spacing favors comfortable separation, with a 60px section gap and 16px element gap. The long page alternates white and pale blue-gray surfaces before the dark footer.

## Shape & elevation

- Radius: button `4px` · card `4px` · xs `4px` · sm `8px` · pill `9999px`
- Shadow `inset` (button): `rgba(204, 217, 224, 0.2) 0px -3px 0px 0px inset`
- Shadow `hairline` (card, other): `rgba(255, 255, 255, 0.1) 0px 1px 0px 0px`
- Shadow `md` (card): `rgba(228, 237, 241, 0.07) 0px 2px 14px 0px`
- Shadow `lg` (card): `rgba(108, 141, 157, 0.2) 0px 12px 48px -7px`
- Motion: standard transition `0.3s ease` on interactive elements.

The interface is mostly flat, relying on pale section bands and thin borders to define structure. Cards have restrained treatment, with measured 4px corners and occasional subtle shadows. Dark testimonial panels and violet product graphics create depth through contrast and layering rather than heavy elevation.

## Imagery

The hero’s dominant image is a vivid purple, route-like platform diagram, with white nodes and embedded workflow labels. Product architecture graphics and article thumbnails repeat violet as a recognizable motif. Customer testimonial sections use portrait photography framed beside dark quote panels. Imagery is generally contained within the content grid rather than full-bleed; avoid adding decorative lifestyle photography or gradients that are not in the measured palette.

## Components

### Top navigation

White header with Copy.ai wordmark, compact Inter navigation, login link, and violet Get a Demo button.

### Hero platform overview

Pale blue-gray field with oversized black heading, muted explanatory copy, and wide purple workflow illustration.

### Use-case cards

Three-column grid of white cards with small violet category labels, concise headings, and understated links.

### Customer proof

Portrait-led testimonials combine photography with dark quote panels and contrasting white text.

### Platform architecture

Centered violet system diagram presents platform capabilities in a dense but clearly divided interface.

### Editorial cards

Article cards use purple thumbnail artwork, dark titles, and brief muted summaries.

### Demo CTA

Wide near-black panel with large white heading, supporting copy, and a high-contrast light demo button.

### Footer

Multi-column link directory on white followed by a near-black legal and social strip.

### Measured component styles

- **Primary button** (“Get a Demo Get a Demo”): background #693edf · text #171717 · radius 4px · padding 12px 16px · 400 14px Inter
- **Secondary button** (“Get Demo”): transparent background · text #364045 · border 1px solid #ccd9e0 · radius 4px · padding 0px 16px · 400 16px Inter · shadow rgba(204, 217, 224, 0.2) 0px -3px 0px 0px inset
- **Link** (“AI Copilots & The Illusion of Progress A”): transparent background · text #171717 · border 1px solid #e0e0e0 · radius 0px · padding 0px 8px · 400 14px Inter
- **Input**: background #f6fafb · text #171717 · border 1px solid #e4edf1 · radius 0px · padding 0px 8px 0px 18px · 400 16px Inter
- **Card** (“Prospecting Cockpit Deeply research acco”): background #ffffff · text #171717 · radius 4px · padding 30px · 400 14px Inter
- **Navigation item** (“Platform Use cases Resources Pricing GTM”): transparent background · text #171717 · radius 0px · padding 0px · 400 14px Inter

## Do

- Use white and Mist Wash as the dominant section surfaces.
- Set primary headings in a bold, near-black display style.
- Reserve Electric Violet for CTAs and product-led emphasis.
- Use Slate Copy for quieter explanatory text and links.
- Organize capabilities into aligned, modular card grids.
- Keep borders and shadows subtle and purposeful.

## Don't

- Do not make violet the page-wide background.
- Do not add unmeasured colors to the interface palette.
- Do not crowd the page with dense, uninterrupted text.
- Do not use heavy shadows to separate ordinary cards.
- Do not turn every card into a bordered panel.
- Do not use decorative imagery that competes with product diagrams.

## Agent prompt

Build a new enterprise AI product page in Copy.ai’s visual style. Use Gallery White (#ffffff) as the main canvas and Mist Wash (#f6fafb) for alternating section bands. Set headings in an assertive ABC Normal-like sans, with Inter for navigation, body, and interface text; use Carbon Ink (#171717) for primary contrast and Slate Copy (#566b76) for supporting copy. Apply Electric Violet (#693edf) selectively to primary actions and product diagrams, with Lilac Signal (#c1b9f4) and Deep Iris (#3b0d96) confined to accents and visual artwork. Structure the page as a spacious hero, modular capability cards, customer proof, product architecture, editorial content, and a dark CTA. Keep alignment disciplined, section spacing generous, borders fine, and shadows restrained.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Wide pale hero with split headline and copy above an expansive violet workflow graphic. | Email capture, Primary demo action, Customer logo proof | Oversized black heading, Pale blue-gray field, Purple workflow illustration |
| 2 | feature-grid | Pale section band with a left-aligned heading and six cards in three columns. | Use-case discovery, Card-level links | White cards, Violet category labels, Compact descriptions |
| 3 | testimonials | Three-column testimonial area with large customer statements and dark quote panels. | Customer credibility, Rotating or grouped quotes | Portrait imagery, Near-black panels, White quote text |
| 4 | product-showcase | Pale section with centered heading and a wide, dense platform architecture diagram. | Capability overview, Integration reassurance | Violet system graphic, Grid-based module labels, Light logo strip |
| 5 | content-feed | White editorial area with a heading and a row of article cards. | Further reading, Article discovery | Purple thumbnails, Dark card titles, Muted summaries |
| 6 | cta | Wide dark panel with left-aligned copy and a prominent light demo button. | Demo conversion, Single focused action | Near-black surface, White heading, Minimal line artwork |
| 7 | footer | Four-column directory of product, use-case, resource, and general links on white. | Deep site navigation, Grouped link discovery | Column headings, Fine horizontal rules, Compact link lists |
| 8 | footer | Full-width near-black bottom strip with brand, legal links, and social icons. | Legal navigation, Social links | Dark surface, White and muted text, Compact horizontal alignment |

## Source CSS custom properties (selected)

```css
--colors--grey: #5d5d5d;
--colors--primary-black: #171717;
--old-swatches--accent: #47beb9;
--colors--off-white: #fbfbfc;
--colors--white: white;
--colors--light-purple: #a284ff;
--colors--primary-purple: #693ee0;
--old-swatches--border-1: #5a429c4d;
--old-swatches--border-2: #42859c1f;
--old-swatches--primary-1: #160647;
--old-swatches--primary-3: #48beb9;
--old-swatches--primary-2: #84ebce;
--colors--borders-lite-grey: #e0e0e0;
--colors--primary-gray-white: #fbfbfc;
--text-gray: #5d5d5d;
--old-swatches--subtext: #5d5d5d;
--old-swatches--color-2: #6122e8;
--colors--borders-dark-grey: #4a4b52;
--old-swatches--color-4: #936efe;
--old-swatches--color: #757476;
--old-swatches--color-3: #6122e88c;
```

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