Voltage Violet
#693edfViolet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Copy
copy.aiWebsite preview
The design language
Copy.ai operates as a sunlit enterprise platform: white canvas, crisp black text, and a single vivid violet that acts as electric punctuation across an otherwise quiet monochrome interface. The design language is assertive but restrained — heavy display weights in a custom grotesque deliver headlines with presence, while a universal 4px radius keeps every surface sharp and architectural rather than soft. Depth comes from a violet gradient hero band and inset hairline shadows on buttons, not from drop shadows or skeuomorphism. Components are flat, dense with information, and grid-aligned, with cards sitting on white rather than tinted surfaces to maintain contrast discipline.
Color palette
brand
Deep Iris
#4f1bb7Mid-gradient stop in hero band and platform diagram backgrounds. Bridges Voltage Violet to darker violet depths
Plum Voltage
#4514a6Deeper gradient stop, card-on-violet backgrounds in platform architecture diagram
Royal Purple
#3b0d96Even deeper gradient stop; used in platform diagram cells and hero band lower section
Indigo Abyss
#29007aDeepest gradient stop; anchors the bottom of the hero band and provides shadow depth in violet illustrations
accent
Lavender Mist
#c1b9f4Soft violet tint — decorative washes, subtle highlights on violet illustrations, muted violet borders on light backgrounds
Cobalt Vein
#7249f1Slightly lighter violet stroke for illustration linework and decorative connectors in hero graphics
neutral
Ink
#000b0fPrimary text color on light backgrounds; near-black with a barely perceptible cool cast. Used for body copy and headings
Obsidian
#171717Dominant text and icon color across the entire interface. The workhorse neutral for headings, body, nav, and icon fills
Graphite
#222222Secondary heading weight and nav text; darker than mid-gray but lighter than Obsidian
Slate
#364045Muted heading and button text on light surfaces; cool gray with blue undertone
Iron
#566b76Body text secondary level, descriptive paragraphs, and muted helper text. Highest frequency gray
Steel
#5d5d5dUtility text and less-prominent body content; neutral mid-gray with no color cast
Fog
#878787Icon strokes and decorative linework in illustrations
Ash
#a6a6a6Light decorative strokes and illustration linework
Mist
#ccd9e0Button borders on light surfaces; cool pale gray with slight blue cast
Cloud
#e2e8ebDividers, subtle borders, and box-shadow base color; the universal hairline gray
Ice
#e4edf1Input borders and card edge dividers; slightly cooler than Cloud
Snow
#f6fafbPage canvas background; off-white with the faintest cool tint to soften the page without going gray
Paper
#ffffffCard surfaces, button text on dark fills, and nav background; pure white for maximum contrast
Midnight Steel
#1d2130Dark surface accent borders; used as outline color on dark elements
Charcoal
#333333Nav and UI utility text; near-black neutral
Jet
#535866Stroke color for illustrations and decorative SVG linework; cool dark gray
Typography
Type scale
Minor Third (1.2) · 16px basedisplay-lg
88px · 600 · 1 · -1.76px trackingThe quick brown fox jumps
display
56px · 500 · 1 · -1.12px trackingThe quick brown fox jumps
heading-lg
48px · 600 · 1.18 · -0.96px trackingThe quick brown fox jumps
heading
32px · 500 · 1.4 · -0.64px trackingThe quick brown fox jumps
heading-sm
28px · 500 · 1.31 · -0.56px trackingThe quick brown fox jumps
text-26
26px · 400 · 1.31The quick brown fox jumps
subheading
24px · 600 · 1.31 · 0.12px trackingThe quick brown fox jumps
text-22
22px · 400 · 1.45The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Inter
- Weights
- 400, 500, 600, 700
- Sizes
- 12px, 14px, 16px, 22px, 24px
- Line height
- 1.17, 1.33, 1.43, 1.45, 1.50, 1.57, 1.69, 2.00
- Letter spacing
- -0.02em at 12-14px, -0.005em at 16-24px
- Fallback
- system-ui, -apple-system, Segoe UI, Roboto
- Features
- "cv11", "ss01" on for brand-aligned character variants
Universal UI and body typeface. Handles navigation, body copy, button labels, badges, card descriptions, and all interface text. Weight 400 for body, 500 for emphasized text and labels, 600 for buttons and nav, 700 for high-emphasis callouts. The tight -0.005em tracking at body sizes keeps dense text crisp without feeling mechanical.
Additional typeface
ABC Normal
- Weights
- 500, 600
- Sizes
- 24px, 26px, 28px, 32px, 48px, 56px, 88px
- Line height
- 1.00, 1.18, 1.31, 1.40, 1.42, 1.50
- Letter spacing
- -0.02em at 48px and above, 0.005em to 0.01em at 24-32px
- Features
- "ss01" on (if available), tabular numerals for metric displays
Display and heading typeface. Custom geometric grotesque with tight tracking (-0.02em) and aggressive sizing from 24px subheadings up to 88px hero display. Weight 600 for maximum impact headlines, 500 for sub-headings. The negative letter-spacing and sharp geometric forms give the brand its architectural, almost engineering-drawing feel. Substitute: Space Grotesk, then Plus Jakarta Sans.
Additional typeface
ABC Normal Regular
- Weights
- 400
- Sizes
- 26px
- Line height
- 1.31
- Letter spacing
- 0.01
ABC Normal Regular — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 24px
- Element gap
- 24px
Border radius
cards
4pxbadges
4pximages
4pxinputs
4pxbuttons
4pxSpacing scale
1px5px6px8px10px12px16px18px20px24px26px28px30px32px34px36px40px42px48px50px52px60px64px69px70px74px80px84px93px100px109px111px124pxGuidelines
Do
- Use ABC Normal for all headings 24px and above; never substitute with Inter for display sizes
- Set all border-radii to 4px — buttons, cards, inputs, badges, images all share the same sharp architectural corner
- Use the violet gradient (#693edf → #29007a) only for full-width hero bands and product diagram cells, never for buttons or small elements
- Apply the inset top shadow (rgba(204, 217, 224, 0.2) 0px -3px 0px inset) to all interactive button variants for consistent pressed-edge treatment
- Set body text in Inter 400 at 16px with -0.005em letter-spacing; never use ABC Normal for body copy
- Use Voltage Violet (#693edf) as the sole accent color for CTAs, active states, and category badges — never introduce additional brand hues
- Maintain white card surfaces on Snow (#f6fafb) page canvas with whitespace separation; avoid drop shadows on cards
Don’t
- Do not use drop shadows for card elevation — this system separates layers by background color contrast alone
- Do not use border-radii larger than 4px anywhere in the interface; soft/rounded shapes break the architectural language
- Do not place body text below 14px or above 16px in the Inter scale
- Do not apply the violet gradient to small UI elements like tags, icons, or hover states — it is reserved for hero-scale surfaces
- Do not use multiple accent colors; the palette is deliberately monochrome with one violet voltage point
- Do not use italic or decorative typefaces; both ABC Normal and Inter are set in upright weights only
- Do not center-align body paragraphs or feature card descriptions — left-align with tight 1.4-1.5 line-height
Components
Primary CTA Button
Hero and nav-level call-to-action across the platform.Filled violet button with Voltage Violet (#693edf) background, white text in Inter 600 at 14-16px, 4px border-radius, 16px vertical / 24px horizontal padding. Inset top shadow (rgba(204, 217, 224, 0.2) 0px -3px 0px 0px inset) creates a pressed-in edge that is signature to this system — the button looks slightly recessed rather than raised. Text is Paper (#ffffff).
Ghost/Text Link Button
Secondary actions and inline navigation links.Transparent background with Iron (#566b76) text in Inter 500 at 14-14px, no border, 4px radius. Sits inline with Primary CTAs as a secondary action (e.g., 'Learn more' next to 'Get Demo').
Outlined Ghost Button
Low-emphasis interactive elements.Transparent background with Mist (#ccd9e0) 1px border, Obsidian (#171717) text in Inter 500 at 14px, 4px radius, 16px/20px padding. Same inset shadow treatment as primary button for consistency.
Hero Gradient Band
Full-width violet band serving as the dominant visual anchor on the homepage.A full-bleed horizontal band with a linear gradient flowing from Voltage Violet (#693edf) at top through Deep Iris (#4f1bb7), Plum Voltage (#4514a6), Royal Purple (#3b0d96), down to Indigo Abyss (#29007a). White text in ABC Normal sits on the gradient. Contains 4 white dot-pipeline connectors (Create Content, Generate Pipeline, Execute Campaigns, Close Deals) and a floating white email-capture card with a dark CTA.
Feature Card (Playbook Grid)
Grid card presenting an AI playbook/use-case.White (#ffffff) card on the Snow (#f6fafb) page background. 4px border-radius, 24px internal padding, no drop shadow, separated by whitespace alone. Contains two small violet-tinted category tags (SALES, MARKETING, OPERATIONS) at top, ABC Normal heading at 24-28px, body description in Inter 14-16px, and inline ghost/primary button pair at the bottom.
Category Tag Badge
Small labels atop feature cards and section headers.Lavender Mist (#c1b9f4) background with deeper violet text, or outlined variant with Cobalt Vein (#7249f1) border. Inter 600 at 12px, uppercase tracking, 4px radius, 4px/8px padding. Functions as taxonomic color-coding across the playbook grid.
Email Capture Input
Hero band lead-capture form.White (#ffffff) background, 1px Ice (#e4edf1) border, 4px radius, 16px padding. Inter 400 placeholder text at 16px in a muted gray. Pairs with a dark filled submit button inside the same card container.
Platform Architecture Diagram
Visual representation of the GTM AI Platform product layers.A multi-cell diagram on a violet gradient background (Deep Iris → Royal Purple). Each cell has a white heading (ABC Normal, 24px), a description in Inter 14px, and sits on semi-transparent darker violet panels with 4px radius. No drop shadows — depth comes purely from the gradient color shift between cells.
Navigation Bar
Top-of-page persistent navigation.White (#ffffff) background, 64-72px height, horizontal layout with logo left, centered menu items (Platform, Use cases, Resources, Pricing, GTM AI) with dropdown chevrons, and right-aligned Login link + Primary CTA button. Nav text in Inter 500 at 14-16px, Iron color. No visible bottom border — separation is by background contrast alone.
Announcement Banner
Top-of-page promotional strip.Dark background (Obsidian #171717 or similar dark) with white text in Inter 500 at 13-14px, white CTA button on the right. Full-width, ~40px height. Used for product launches and report releases.
Section Header Block
Standardized heading + subheading at the top of content sections.Left-aligned ABC Normal heading at 48-56px in Ink (#000b0f), with a Inter 400 subheading in Iron (#566b76) at 16-18px below. Tight 24-32px gap between heading and subtext. No decorative elements — relies on type contrast alone.
Integration Logo Strip
Horizontal row of partner/integration logos.A single row of desaturated or grayscale logos (Salesforce, HubSpot, Gong, Zapier, Outreach, etc.) on white or violet background. No borders or cards — logos sit freely with 24-32px column gaps.
Trusted By Counter
Social proof line beneath the hero.Single line of Inter 400 text in Iron color, 14px, with the number '17 million' bolded in Obsidian. Left-aligned, no decorative iconography.
Footer
Bottom-of-page site map and legal links.Dark or white background depending on page, multi-column link grid, Inter 400 at 14px in Iron. Column headers in Inter 600 at 14px in Obsidian.
Surfaces & elevation
Level 1
Page Canvas
#f6fafbBase page background; off-white with subtle cool tint to soften without going gray
Level 2
Card Surface
#ffffffFeature cards, navigation bar, input fields, and all raised content layers
Level 3
Hero Gradient Band
#693edfFull-width hero section gradient surface; the only chromatic surface in the system
Level 4
Platform Diagram Cells
#4f1bb7Darker violet cell backgrounds for product architecture visualization
Level 5
Dark Announcement Strip
#171717Top promotional banner; dark accent surface for time-sensitive content
This system deliberately avoids drop shadows as an elevation mechanism. Instead, it relies on three signature depth strategies: (1) background color contrast — white cards on Snow canvas, violet hero on white, dark announcement on white; (2) the signature inset top shadow on buttons that creates a pressed/recessed edge rather than a raised one; and (3) gradient color shifts within hero bands to imply layered panels. The result is a flat, architectural aesthetic where every layer is defined by its own background, not by casting a shadow on what lies beneath.
Primary CTA Button
inset 0 -3px 0 0 rgba(204, 217, 224, 0.2)
Outlined Ghost Button
inset 0 -3px 0 0 rgba(204, 217, 224, 0.2)
Layout & imagery
Layout
Page model is max-width 1200px centered on a Snow (#f6fafb) canvas, with full-bleed sections (hero gradient band, announcement strip) breaking out to the viewport edges. The hero pattern is a split composition: left column carries bold ABC Normal display text (88px headline), right column carries a descriptive paragraph and floating email-capture card, all overlaid on a full-bleed violet gradient band. Section rhythm alternates between white and the off-white canvas with no visible dividers — separation is by whitespace and 80px section gaps. Content arrangement is consistently left-aligned with 2-column text+diagram blocks and a 3-column card grid for the 'Design Your GTM AI Playbook' section. Navigation is a minimal top bar with dropdown menus and a right-aligned CTA.
Imagery
The site uses a hybrid visual language: abstract geometric illustration in the hero (angular violet ribbon shapes with white dot-pipeline connectors and circuit-like nodes) and product/diagram screenshots in the platform section (multi-cell architecture grids on violet backgrounds). All illustration linework uses a restricted palette of violet shades (#693edf, #7249f1, #c1b9f4) and dark neutrals (#535866, #000000), creating a cohesive 'engineering blueprint' aesthetic. Partner logos (Salesforce, HubSpot, OpenAI, Anthropic) appear as flat grayscale marks. There is no photography — the visual system is entirely illustration + UI, which reinforces the technical/infrastructure positioning of the product.
Design notes
Agent Guide
**Quick Color Reference** - Text: #171717 (Obsidian) for primary, #566b76 (Iron) for body, #000b0f (Ink) for headings - Background: #ffffff (Paper) for cards, #f6fafb (Snow) for page canvas - Border: #e2e8eb (Cloud) for dividers, #e4edf1 (Ice) for input borders, #ccd9e0 (Mist) for button outlines - Accent: #693edf (Voltage Violet) for CTAs, active states, and category badges - primary action: no distinct CTA color **3-5 Example Component Prompts** 1. **Hero section**: Full-bleed gradient band from #693edf to #29007a (top to bottom). ABC Normal display headline at 56-88px weight 600, #ffffff, letter-spacing -1.12px to -1.76px. Subtext at 18px Inter 400, #ffffff at 80% opacity. White email-capture card (24px padding, 4px radius) with a light input field and dark submit button. 2. **Feature card grid (3-column)**: White (#ffffff) card on Snow (#f6fafb) page. 4px radius, 24px padding, no shadow. Top: two badges with #c1b9f4 background and #693edf text, Inter 600 12px uppercase. Heading: ABC Normal 24px weight 500, #000b0f. Body: Inter 400 14px, #566b76. Bottom: ghost link 'Learn more' (#566b76) beside a small outlined 'Get Demo' button. No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. 4. **Section header**: ABC Normal 48px weight 600 in #000b0f, letter-spacing -0.96px. Below it, Inter 400 18px in #566b76, max-width 640px. 80px margin-top from previous section, 40px gap between heading and subtext. 5. **Platform architecture diagram cell**: Background #4f1bb7 (violet cell), 4px radius, 24px padding. Heading in ABC Normal 24px weight 500, white. Description in Inter 400 14px, white at 85% opacity. Arranged in a 3x2 or 4x2 grid with 8px gaps between cells.
Gradient System
The gradient is a fixed 5-stop linear progression used exclusively for the hero band and platform architecture diagrams: linear-gradient(180deg, #693edf 0%, #4f1bb7 25%, #4514a6 50%, #3b0d96 75%, #29007a 100%) This is not a decorative flourish — it is a structural element that defines the product's visual identity. The gradient always flows top-to-bottom (not diagonal) and the stops are evenly distributed. Never truncate, skew, or recolor this gradient. It should only appear on full-bleed horizontal bands, not on cards, buttons, or small surfaces.
Similar brands
Linear
Same custom geometric grotesque for display type, flat white card surfaces, and absence of drop shadows in favor of background contrast for elevation
Vercel
Identical monochrome-with-single-accent strategy, ultra-clean navigation, and high-contrast black-on-white type hierarchy with negative letter-spacing on headlines
Retool
Same architectural product-platform aesthetic with grid-based feature cards, inset button shadows, and a 4px universal border-radius system
Grafana
Similar dark-on-light contrast discipline with violet/purple accent system, and the use of full-bleed gradient bands as primary visual anchors
Resend
Matches the sharp 4px radius system, bold display headlines, and the 'engineering blueprint' visual treatment with geometric illustration accents
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
