What is Copy.ai's primary brand color?

Copy.ai's brand voltage is a saturated primary purple wired into CSS as --colors--primary-purple. It is held in reserve almost entirely — appearing inside the hero gradient slab on the right two-thirds of the above-fold band and as the fill on the primary CTA. The dominant chromatic moment on the page is the gradient itself, which runs from a near-black indigo at the top through deep purple to a mid-lavender at the bottom of the panel. Below the fold the purple disappears completely; the page returns to a graphite ink ladder on near-white surfaces. The other declared purples in the CSS belong to an older Webflow theme and don't appear in the captured render.

What typefaces does Copy.ai use, and what should I use as substitutes?

Copy.ai runs a two-family split. ABC Normal carries every display tier — 88px / weight 600 at the hero h1, 56px / 500 at section h2s, 48px / 600 at split-panel statements, 24-26px / 500-600 at h3 and h4 labels. Inter handles every body, label, and nav surface at 12-16px in weights 400-700. The closest open-source substitute for ABC Normal is Geist Bold or Bricolage Grotesque at the same weights; Inter is already open-source and ships in the font stack as-is. The display-versus-body split is the system's structural typographic move.

Why does Copy.ai use a gradient panel instead of a flat hero?

The gradient is a contained architectural slab, not an atmospheric overlay. It occupies the right two-thirds of the above-fold band, holds a screenshot of the product UI in shadow, and terminates at the section boundary rather than fading into the page below. Where most AI marketing brands paint the entire hero in gradient atmosphere — purple shifting to magenta across the whole viewport — Copy.ai treats the gradient as a containment device that sits beside the editorial white half, with the headline in graphite reading against pure white instead of fighting a saturated background. This is closer to a magazine spread than to a typical SaaS hero.

What is Copy.ai's corner-radius philosophy?

The radius scale is tight. 4px appears 14 times across the captured surfaces — buttons, cards, the input field, dropdown menu surfaces. 8px appears once. 50% appears twice as the rendering of two avatar circles in the testimonial strip. There is no 12 / 16 / 24px ladder; the system is binary — 4px on every UI surface except the two avatar circles, which round fully. The result is a tighter visual identity than the soft 16-24px corners typical of consumer AI brands. Copy.ai reads closer to a business-software aesthetic than a consumer chatbot.

Can I use this DESIGN.md to build my own AI-platform marketing site?

Yes — the file is structured for ingestion by Claude, Cursor, or any AI tool that reads design tokens. The agent reproduces Copy.ai's specific moves: the 88px ABC Normal hero on a near-white left half, a deep indigo-to-purple gradient panel as the right structural slab, tight 4px corners across UI surfaces, and Inter body in graphite. You can also paste the tokens directly into Tailwind config — every hex, font, radius, and spacing value is quoted scalar. The diagonal split hero is the move worth borrowing only if you have a long anchor headline; on short hero copy the white half collapses and the gradient takes over.

Copy.ai Design System

Copy.ai's marketing site pairs an 88px ABC Normal hero with a deep purple gradient panel that breaks across the top half.

About Copy.ai DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source copy.ai

AI & LLM Platforms
Marketing & CRM

Copy.ai's marketing site stages its hero as a split between two surfaces — an editorial white slab on the left carrying an 88px ABC Normal display headline in graphite, and a deep indigo-to-mid-purple gradient slab on the right that holds a screenshot of the product UI in shadow. The two halves meet at a sharp diagonal rather than a soft fade. Where most AI platforms paint the entire hero as either flat-white or a gradient atmosphere, Copy.ai treats the gradient as a contained architectural panel that breaks across the top band and stops at the section boundary. The remaining page returns to near-white and runs in disciplined typography.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 17 color tokens organized into a graphite text ladder (near-black at 720 occurrences, dim graphite at 22 occurrences, mid-gray-blue at 21), a single primary purple held in reserve for the CTA and the gradient stops, plus a small set of pastel structural tints inherited from the older Webflow theme. Typography is split into two voices — ABC Normal in weights 500 and 600 at sizes 24, 26, 48, 56, and 88px for every display tier, and Inter in weights 400-700 at 12, 14, and 16px for every body, nav, and label. Radii sit almost entirely at 4px across 14 of 17 captured corners; the only exceptions are two 50% avatars.

Feed this file to Claude or Cursor and it reproduces Copy.ai's specific moves: the 88px ABC Normal hero in graphite, the diagonal gradient panel running primary purple to deep indigo, the tight 4px corners, and the Inter body-paragraph tier at 14px in dim graphite. The token references resolve cleanly — the brand purple for the CTA fill, the graphite ink for headlines and body, the structural hairlines for dividers. One caveat: the gradient hero only works if you have a long marketing display sentence to anchor the white left half — applied to a short headline it leaves the gradient feeling decorative rather than structural.

What makes it distinct

Gradient slab herothe right two-thirds of the above-fold band is a deep indigo to mid-purple gradient running from near-black to lavender, used as a structural container rather than an accent
Two-typeface splitABC Normal at 24-88px in weights 500-600 carries every display tier, Inter at 12-16px in weights 400-500 carries every body, label, and nav surface
Tight 4px cornersthe dominant radius is 4px across buttons, cards, and inputs; 50% appears only on the two avatar circles in the testimonial strip
Editorial white below the foldonce past the gradient hero, every section returns to a near-white surface with graphite ink text and hairline gray dividers
Purple held in reservethe saturated brand purple lives inside the hero gradient and the primary CTA fill, then disappears entirely below the fold

Live at copy.ai

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

copy.ai

Explore Copy.ai

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Copy.ai design system FAQ

Common questions about Copy.ai's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Copy.ai — official site

Copy.ai's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.