Copy.ai Design System

Overview

Copy.ai's marketing site stages its above-fold band as a split surface. Gradient slab hero. The left two-fifths is a pure-white editorial half carrying an 88px ABC Normal display headline in graphite ({colors.ink} — #171717); the right three-fifths is a deep indigo-to-mid-purple gradient slab anchored at {colors.primary-deeper} (#29007a) at the top, running through {colors.primary-mid} (#4514a6) in the body, ending near {colors.primary} (#693edf) at the bottom. The two halves meet at a sharp diagonal rather than a soft fade, and the gradient holds a product-UI screenshot in shadow. Where Jasper paints the entire hero with a flat purple wash and Writer sits on white-on-white with a single CTA accent, Copy.ai treats the gradient as a contained architectural panel that breaks across the top band and stops at the section boundary. Below the fold the page returns to near-white surfaces and the brand purple disappears.

The two-typeface split is the second structural move. ABC Normal — a contemporary grotesk that ships only on the marketing site — carries every display tier from 24px up to 88px in weights 500 and 600. Inter handles every body, label, eyebrow, and nav surface at 12-16px in weights 400-700. There is no overlap; ABC Normal never drops below 24px and Inter never climbs above 16px (the 22px and 24px Inter entries that appear in the extraction are isolated single-element renders). The display family does the magazine work; Inter does the running-text work.

The radius scale is binary-tight. 14 of 17 captured corners sit at 4px ({rounded.sm}) — buttons, cards, dropdown surfaces, the input field. The remaining three are split between an 8px outlier ({rounded.md}) and two 50% avatar circles ({rounded.circle}). There is no soft 12-16-24px middle tier the way consumer AI brands like Anthropic or ChatGPT use; Copy.ai reads closer to a business-software aesthetic.

Key Characteristics:

• Brand voltage {colors.primary} (#693edf) is held in reserve almost entirely — appearing inside the hero gradient stops and as the CTA fill, then absent from the rest of the page.
• Two-typeface split: ABC Normal at 24-88px in weights 500-600 for display, Inter at 12-16px in weights 400-700 for body and labels.
• Tight 4px ({rounded.sm}) radius across 14 of 17 captured UI corners; 50% ({rounded.circle}) only on avatar surfaces.
• Hero gradient runs from {colors.primary-deeper} (#29007a) through {colors.primary-mid} (#4514a6) to {colors.primary} (#693edf) — three stops, contained inside a single architectural panel.
• Graphite ink ladder: {colors.ink} (#171717) at 720 occurrences for primary text, {colors.muted-blue} (#566b76) at 42 for body paragraphs, {colors.muted} (#5d5d5d) at 44 for secondary labels.
• Editorial white canvas ({colors.canvas}) below the fold — every section after the hero returns to pure white with hairline {colors.hairline} (#e0e0e0) dividers between cards.
• Testimonial strip uses a near-black {colors.ink-soft} (#222222) card with a graphite-frame photo on the left — the only dark-canvas moment outside the hero gradient.

Colors

Brand

• Primary Purple ({colors.primary} — #693edf): frequency 2. Used as background (2). Wired in CSS as --colors--primary-purple. The brand voltage — fills the CTA "Get a Demo" button and serves as the light end-stop of the hero gradient. Rare on the captured page; the gradient does almost all the brand-purple work.
• Primary Dark ({colors.primary-dark} — #3b0d96): frequency 2 as background. A mid-stop in the hero gradient between the near-black indigo top and the mid-purple body.
• Primary Deeper ({colors.primary-deeper} — #29007a): frequency 1 as background. The top stop of the hero gradient — almost indigo, deep enough to anchor a near-black product screenshot in shadow.
• Primary Mid ({colors.primary-mid} — #4514a6): frequency 2 as background. A mid-stop in the gradient between deep and primary purple.
• Primary Light ({colors.primary-light} — #4f1bb7): frequency 2 as background. The lightest gradient stop before the brand voltage — a saturated mid-violet.

Text

• Ink ({colors.ink} — #171717): frequency 720 — 361 as text, 350 as border, 9 as background. Wired as --colors--primary-black. The dominant text color across the entire page — display headlines, body paragraphs, button labels. Not pure black; a near-black graphite that softens the contrast slightly.
• Ink Soft ({colors.ink-soft} — #222222): frequency 31. The testimonial-card surface fill and a secondary text tone — slightly lighter than {colors.ink}.
• Ink Graphite ({colors.ink-graphite} — #364045): frequency 34 — 20 as text, 14 as border. A cool-toned graphite for tertiary text and divider strokes.
• Muted Blue ({colors.muted-blue} — #566b76): frequency 42 — 21 as text, 21 as border. The dominant body-paragraph color rendered by <p> elements at 14px / 400. Cool-toned, slightly desaturated.
• Muted ({colors.muted} — #5d5d5d): frequency 44 — 22 as text, 22 as border. Wired as --colors--grey, --old-swatches--subtext, --text-gray. Secondary label and caption text.
• Nav Link ({colors.nav-link} — #333333): frequency 4. The dedicated graphite for top-nav link labels — slightly lighter than {colors.ink} to read as secondary against the white nav surface.

Surface

• Canvas ({colors.canvas} — #ffffff): frequency 112 — 37 as text, 40 as background, 33 as border. Wired as --colors--white, --colors--off-white, --colors--primary-gray-white. The dominant body surface; every section below the fold sits on it.
• Surface Input ({colors.surface-input} — #f6fafb): a near-white tint used as the text-input field fill, providing a barely-perceptible lift from the canvas.

Hairline

• Hairline ({colors.hairline} — #e0e0e0): frequency 11 — 2 as text, 9 as border. Wired as --colors--borders-lite-grey. The dominant border tone for feature-card outlines and divider strokes.
• Hairline Soft ({colors.hairline-soft} — #ccd9e0): frequency 12 — 6 as border, 6 as shadow. A slightly cool-toned hairline used on the rare elevated dropdown surfaces.
• Hairline Cool ({colors.hairline-cool} — #e4edf1): frequency 3 — 2 as border, 1 as shadow. Wired as --old-swatches--light-blue. The input-field outline tone.

Typography

Font Families

The system runs a two-family split: ABC Normal for every display tier (24px and up) and Inter for every body, label, nav, and button surface (12-16px). ABC Normal is a contemporary grotesk that ships only on the marketing site; Inter is the open-source workhorse. Fallbacks walk to sans-serif on ABC Normal and inherit Inter's standard system stack.

The split is the distinguishing typographic move. Where competitors like Jasper run a single sans across all tiers and Writer leans on Söhne for display plus Inter for body, Copy.ai keeps the two voices strictly separated by size — ABC Normal owns 24px and up, Inter owns 16px and down, with no crossover.

Hierarchy

Principles

Display weight tops out at 600 — the 88px hero h1 in ABC Normal at weight 600 is the loudest typographic moment on the page. Section h2s drop one weight step to 500 at 56px. Body and labels in Inter sit at weight 400; the uppercase eyebrow labels above feature cells use weight 500 to lift them above the running 400-weight body. There is no 800 or black weight anywhere in the system. The split-statement at 48px / 600 has 0.25px letter-spacing — a barely-perceptible loosening to compensate for the heavier weight at the smaller display size.

Note on Font Substitutes

ABC Normal is licensed and ships only on the marketing site. The closest open-source substitutes are Geist at weight 600 (Vercel's open-source sans) or Bricolage Grotesque at the same weights — both transfer cleanly at the 88px display tier. Inter is already open-source and is referenced as-is in the system stack; no substitute needed.

Layout

Spacing System

• Base unit: 4px, with 8px as the dominant module on smaller gaps and 20-32px on the larger ones.
• Tokens: {spacing.xs} 6px · {spacing.sm} 10px · {spacing.base} 16px · {spacing.md} 20px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.2xl} 48px · {spacing.3xl} 60px.
• Section padding (vertical): ~60-80px between major sections on the white canvas.
• Card internal padding: {spacing.lg} (24px) on testimonial and feature cards; {spacing.md} (20px) on the smaller feature cells in the playbook grid.
• Hero padding: ~60px vertical on the gradient panel; the white half holds the headline with minimal horizontal padding because the display sentence does the work.

Grid & Container

• Max content width: ~1280px on the hero, ~1080px on the feature grid and editorial sections below the fold.
• Hero: asymmetric split at roughly 40/60 — the editorial white half on the left holds the 88px headline plus a 14px body lead and the primary CTA pair; the gradient panel on the right holds the product-UI screenshot.
• "Design Your GTM AI Playbook" grid: 3-column grid of feature cells with eyebrow labels, headings, and short body paragraphs, each separated by hairline rules.
• Testimonial strip: asymmetric 2-column split — a graphite-frame photo of a customer on the left and a near-black testimonial card on the right.
• "Anti-point solution platform": a single 1080px-wide card containing the gradient panel reproduced at smaller scale with a flat product UI overlay.

Rhythm

The page alternates between gradient hero and editorial body rather than holding a single tempo. The above-fold band is dense — gradient slab, product screenshot, headline, sub-paragraph, CTA pair. Section 2 (the playbook grid) is generous — three roomy cells with eyebrow labels and short paragraphs. The testimonial strip is dense again — photo plus dark card. The closing section is the most generous — a single split panel anchoring the brand voice in one card.

Elevation

The system has essentially no shadow tier. The captured page has a single pure-black shadow occurrence and 6 occurrences of {colors.hairline-soft} as shadow — almost all confined to barely-perceptible dropdown elevations. Hairline borders ({colors.hairline} and {colors.hairline-cool}) carry the work that shadows would carry on a typical SaaS page; depth comes from surface contrast (gradient over white, near-black testimonial card over white) rather than from layered elevation.

• Flat (no shadow): hero body, feature cells, testimonial cards, footer — 99% of surfaces.
• Gradient panel: the only surface with meaningful depth — three purple stops running from near-indigo at the top to mid-violet at the bottom inside a contained slab.
• Hairline outlines: {colors.hairline} (#e0e0e0) marks card edges and dividers — the structural tone that does most of the elevation work.

Shapes

The radius scale is binary-tight: 4px everywhere except the avatar circles.

• {rounded.none} 0px — only on the input field and the gradient panel edge.
• {rounded.sm} 4px — the dominant radius, on buttons, feature cards, testimonial cards, dropdown surfaces. 14 captured occurrences.
• {rounded.md} 8px — a single outlier on one minor surface.
• {rounded.full} 9999px — declared but not rendered on the marketing surface.
• {rounded.circle} 50% — the two avatar circles in the testimonial strip; renders as a full circle on square avatar elements.

There is no 12 / 16 / 20px middle tier. The system commits to tight 4px corners across UI surfaces, which gives Copy.ai a business-software identity rather than the soft consumer-AI feel of brands using 16-24px radii. The pair of avatar circles is the only place the system goes round.

Components

hero-section — White canvas surface on the left half, gradient panel on the right. 60×32px padding. The structural container for the above-fold band.

hero-heading — Graphite {colors.ink} text on the white left half, ABC Normal 88px / 600. "GTM Platform" is the canonical instance — the loudest typographic moment on the page.

section-heading — Same graphite ink, ABC Normal 56px / 500. Used for "Design Your GTM AI Playbook", "The anti-point solution platform", "Reimagine your everyday work with AI".

split-statement — ABC Normal 48px / 600 with 0.25px tracking. Reserved for short editorial statements anchored to a single card.

body-paragraph — Inter 14px / 400, color {colors.muted-blue} (#566b76). The workhorse body paragraph rendered by <p> elements. Cool-toned graphite that reads softer than the headline ink.

body-paragraph-strong — Inter 16px / 700, graphite ink. Used for emphasis inside body copy and for short callout statements.

label-eyebrow — Inter 12px / 500 uppercase, graphite ink. The eyebrow label above feature cells ("STREAMLINE WORKFLOWS"). The only uppercase treatment in the system.

button-primary — The signature CTA. {colors.primary} (#693edf) fill, graphite text, {rounded.sm} 4px radius, 12×16px padding, 47px height. "Get a Demo" is the canonical instance. The brand purple lives almost exclusively here and in the hero gradient stops.

button-secondary — White {colors.canvas} fill, graphite text, 1px {colors.hairline} border, {rounded.sm} 4px radius, 12×16px padding, 47px height. Used for the secondary "Watch Demo" CTA paired beside the primary purple button.

top-nav — White surface, 64px height, with the wordmark flush left, product-nav links (Product, Customers, Resources, Pricing) center, and the right-aligned Login plus Get Demo cluster.

nav-link — Graphite {colors.nav-link} (#333333) text in {typography.nav-link} (Inter 14px / 400). No hover background visible on the captured surface.

gradient-panel — The right-half slab of the hero. Three stops running from {colors.primary-deeper} (#29007a) at the top through {colors.primary-dark} (#3b0d96) and {colors.primary-mid} (#4514a6) to {colors.primary} (#693edf) near the bottom. Holds a product-UI screenshot in shadow. 32px internal padding around the screenshot frame.

feature-card — White surface, 1px {colors.hairline} border, {rounded.sm} 4px radius, 20×24px padding. Holds the playbook grid cells — eyebrow label, h3 title, short body paragraph.

testimonial-card — Near-black {colors.ink-soft} (#222222) fill, white text, {rounded.sm} 4px radius, 24px padding. Sits beside the graphite-frame customer photo; the only dark-canvas moment outside the hero gradient.

avatar-circle — {rounded.circle} 50% radius, 40px height. The only round surface in the system; appears as the customer-photo crop in the testimonial strip.

text-input — {colors.surface-input} (#f6fafb) fill, graphite text, 1px {colors.hairline-cool} (#e4edf1) border, 0px radius (square corners), 42px height. The "Email" capture field in the hero CTA stack.

Do's and Don'ts

Do treat the gradient as a contained architectural slab. The hero gradient lives inside a single panel that breaks across the top band and stops at the section boundary — extending the gradient into a full-bleed atmospheric wash would lose the editorial-white left half that anchors the system.

Do keep ABC Normal above 24px and Inter at 16px and below. The two-typeface split is the structural typographic move; using Inter for an h2 or ABC Normal for body copy collapses the system into a single sans and destroys the magazine-versus-running-text distinction.

Do use {colors.muted-blue} (#566b76) for body paragraphs rendered by <p> elements. The dedicated cool-toned graphite is the workhorse body tone — 21 occurrences as text — and reads softer against the white canvas than the headline {colors.ink} would.

Do hold the brand purple in reserve. The {colors.primary} voltage fills only the CTA and the gradient end-stop; multiplying it into secondary accents (link text, icon fills, divider strokes) destroys the gradient-versus-graphite contrast that defines the page.

Don't use a {rounded.md} 8px or larger radius across UI surfaces. The system is committed to 4px ({rounded.sm}) on 14 of 17 captured corners; introducing a 12-16-24px middle tier softens the business-software identity into a consumer-AI feel.

Don't swap the hero gradient for a flat purple block. The three-stop gradient running from {colors.primary-deeper} (#29007a) through {colors.primary-mid} (#4514a6) to {colors.primary} (#693edf) is the brand's depth signal — flattening it to a single fill loses the architectural-slab quality and reads as a generic SaaS accent.

Don't use the brand purple {colors.primary} for body text or link color. Below the fold the purple disappears entirely; rendering inline links or paragraph emphasis in purple breaks the "voltage held in reserve" discipline and dilutes the CTA fill.

Don't introduce a third typeface tier. The ABC Normal + Inter split owns every text surface; adding a serif for pull quotes or a mono for code blocks would break the two-voice discipline that makes the magazine-versus-running-text contrast read.

Known Gaps

• Hover and focus states: the captured marketing surfaces show resting states only. The full hover, active, focus, and disabled matrix for the primary CTA and feature cards is not exposed.
• Form input error states: the email-capture {component.text-input} carries the resting state; validation and error styling lives in the gated demo flow and is not captured.
• Motion: the hero gradient appears static in the screenshot but may animate (gradient drift, parallax on scroll) in the live page; the spec captures end-state values only.
• Mobile layout: the captured surface is desktop-only at 1440px. The asymmetric 40/60 hero split likely stacks into a vertical pattern at narrower viewports, but the breakpoint values are not exposed in the marketing CSS.
• Old Webflow palette: the CSS still exposes --old-swatches--* tokens — a light-sea-green primary, a teal accent, and a violet color-4 — from a previous theme; these are declared but never render on the captured page and are not included as primary tokens.
• Product surfaces: this DESIGN.md captures the marketing site only. The Copy.ai workflow editor (app.copy.ai) carries a separate token set for canvas, node, and connector styling that is not represented here.