Screenshot of Jasper

Jasper

www.jasper.ai

The reference for AI-marketing brands with editorial-magazine-cutout aesthetic — ABC ROM serif at 80px, coral CTAs, photographic collage imagery on cream.

Marketing Platform Ai Content Platform strong

Design tokens

creamPink
white
navyDark
black
coral
green
blue
pastelPeach
pastelBlue
pastelMint
muteGrey
display
'ABC ROM', Arial, sans-serif (paid Dinamo foundry serif)
displayAlt
Feature, Georgia, sans-serif (paid display)
body
'ABC ROM', Arial, sans-serif
mono
'ABC ROM Mono', Arial, sans-serif

Do / Don't

Reference it for

  • ABC ROM serif at 80px for hero H1 — paid Dinamo foundry, distinctive serif display
  • Cream-pink #fff7f5 page background (4% pinker than typical cream — print-magazine feeling)
  • Coral-red #fa7560 primary CTA pill — bold, warm, distinctive
  • Three-colour bright accent palette: green #45ff00 + cyan #0095ff + coral #fa7560 (each 48 hits)
  • Three pastel surfaces: peach #ffe8e2 + light blue #ceebff + mint #e6ffd9
  • Photographic collage hero imagery — magazine-cutout style portraits + halftone textures + geometric green grid blocks
  • 6-marketer-persona section with bubble callouts — circular avatar photos positioned at angles
  • Sharp-corner discipline: only 2px and 4px radii — no medium radii

Do not copy

  • The ABC ROM and Feature font licences (paid Dinamo and a similarly paid display foundry)
  • The specific photographic-collage hero imagery — bespoke commissions
  • The "Put AI agents to work" copy phrasing
  • The coral-red #fa7560 exact hue
  • The Jasper-specific marketer portraits and persona labels

Signature moves

editorial-magazine-cutout collage hero

photographic magazine-cutout portraits, halftone textures and geometric green grid blocks build a collage hero with depth from layering (0 box-shadows), plus a persona section of circular avatars positioned at angles.

serif-display on pinker cream with bright accents

an 80px serif display H1 on a cream-pink #fff7f5 ground, a coral #fa7560 CTA pill, three bright accents (green #45ff00, cyan #0095ff, coral) and three pastel surfaces give a print-magazine feel with sharp 2/4px radii only.

JS-heavy CSS-minimal motion balance

GSAP + ScrollTrigger + Swiper drive motion with only 4 keyframes, including a subtle jitter vibration for new-feature attention, plus announcement and dual-CTA hero patterns.

Related references

Screenshot of Mailchimp

Mailchimp

flagship

Marketing Platform

a post-Intuit-acquisition Mailchimp site where the iconic Cavendish-yellow `#ffe01b`, the dark-teal `#004e56`, and the Freddie chimp mascot all survive intact - now paired with Graphik Web for body, Means Web for serif accents, and a springy overshoot cubic-bezier (`0.5, 2.5, 0.7, 0.7`) at 0.3s that gives every interaction its characteristic bounce.
Screenshot of Mintlify

Mintlify

strong

Marketing Platform

The reference for AI-documentation platform — cloud-gradient sky hero, mint-green CTA, modern lab()/oklab() colour science, real docs mockup with AI assistant chat.
Screenshot of Stripe

Stripe

flagship

Fintech

the clarity benchmark - extreme product complexity made to feel calm, premium and effortless through a fully tokenised design system and restrained, confident CSS motion.
Screenshot of Adaline

Adaline

strong

Developer Tool

an AI-infra product site that swaps the genre's default dark-neon for a hand-built 3D Japanese-garden world, then runs warm earth tones, a grotesque/mono type pair and patient scroll-reveal motion over the top so a developer tool feels like a calm place.