jasper.ai — Design System

1. Visual Theme & Atmosphere

Jasper.ai is one of the more typographically ambitious AI-product sites: it pairs a custom serif Feature (headings) with a custom grotesque ABC ROM (body), both at font-weight 450 — a non-standard value between Regular and Medium. Built on Webflow with GSAP animations, the design avoids the dark-mode arms race of its competitors entirely, opting for a white-primary palette with a deep navy rgb(0, 6, 61) as the brand ink and an assertive coral-orange rgb(250, 64, 40) as the action color. The atmosphere is authoritative and warm — editorial in the mode of a considered brand magazine, with a candy-bright supporting palette of pastels used as section accents.

2. Color Palette & Roles

Foundation

• rgb(255, 255, 255) — primary canvas
• rgb(0, 6, 61) — brand text and ink color; deep navy with a hint of indigo

Action / Brand

• rgb(250, 64, 40) — primary CTA; coral-orange; links; buttons
• rgb(0, 17, 167) — secondary action background; pure electric blue for dark sections
• rgb(0, 11, 61) — alt dark CTA button background

Pastel section accents (section background swatches)

• rgb(230, 255, 217) — mint green section
• rgb(255, 232, 226) — blush pink section
• rgb(255, 247, 245) — near-white warm wash
• rgb(255, 251, 183) — pale yellow (eyebrow labels)

Navigation menu accents (pill backgrounds)

• rgb(206, 235, 255) — light blue
• rgb(255, 179, 163) — light salmon
• rgb(210, 255, 193) — light mint
• rgb(255, 179, 222) — light pink
• rgb(255, 246, 125) — light yellow

Button secondaries

• rgb(129, 203, 255) — light blue secondary button
• rgb(150, 255, 111) — bright green secondary button

3. Typography Rules

Feature serif for all display and Feature-family heading roles; ABC ROM grotesque for all UI, body, and interactive text. Both at the non-standard weight 450 — softer than medium, firmer than regular.

The 73.83px H1 with a 1:1 line-height echoes the tight editorial headlines of magazine culture. Feature’s serif character at display scale conveys gravitas; ABC ROM keeps the UI readable and contemporary.

4. Component Stylings

Primary CTA buttons — Coral-orange rgb(250, 64, 40) fill with white text. Alt: deep navy rgb(0, 6, 61) fill with white text. Border radius: 0.5rem (8px) for small, 1rem (16px) for standard, 100vw for pill/round variants.

Secondary buttons — Light blue rgb(129, 203, 255) or green rgb(150, 255, 111) — pastel-toned, high contrast on white.

Navigation pills — Pastel-colored menu category pills (each category gets its own pastel: blue for one product area, salmon for another, etc.).

Section backgrounds — Full-bleed pastel washes per section (mint, blush, yellow) create a color-coded content architecture.

Eyebrow labels — Yellow rgb(255, 251, 183) background pill with navy text introduces each section category.

No shadows on structural elements. Minimal decoration — the color architecture carries all the hierarchy.

5. Layout Principles

Rich responsive system: 11 breakpoints from 360px to 1920px. This is a fully fluid Webflow layout with named spacing tokens using clamp(): --_spacing---section-space--main scales from 4rem at narrow to 7rem at wide. Column margin system (--column-margin--5, --column-margin--6) suggests a named grid layer. Small radii 2px and 4px suggest a tight micro-spacing system for inline elements.

Custom properties use a Webflow variable naming convention (--_theme---, --_typography---, --_spacing---).

6. Depth & Elevation

Extremely flat. No shadows detected. Depth is created entirely through:

• Color contrast: navy text on white, coral on white
• Section color bands: pastel sections stack as visual layers
• Typography scale: Feature serif at 73px vs ABC ROM at 16px creates hierarchy through presence

The border-radius: 100vw pill shape on CTAs creates a visual softness that implies accessibility and approachability rather than depth.

7. Do’s and Don’ts

Do

• Use Feature serif for all headings; the serif/grotesque split is the brand’s typographic identity
• Apply font-weight 450 throughout — it’s non-standard and must be explicitly declared
• Color-code navigation categories with distinct pastels
• Use pastel section backgrounds as a visual rhythm tool — each section earns its own hue

Don’t

• Switch to a dark background — Jasper.ai is explicitly white-primary, unlike its AI contemporaries
• Round CTAs beyond 100vw pill or 1rem standard; the radius system has three specific stops
• Use the coral rgb(250, 64, 40) for anything other than primary actions and links
• Apply Feature serif to body text — it belongs only at heading scale

8. Responsive Behavior

11 breakpoints from 360px to 1920px. The clamp-based spacing system ensures smooth transitions. Feature serif headlines likely scale down with the typography clamp system. Pastel section backgrounds remain full-bleed at all widths. The navigation pill system likely collapses to a hamburger below 768px. The 1920px upper breakpoint means the layout has a maximum-width container that doesn’t expand beyond large monitor sizes.

9. Agent Prompt Guide

Build a white-primary AI marketing site in the style of jasper.ai. Deep navy rgb(0, 6, 61) as brand text color. Feature serif at 73px/450 weight with 1:1 line-height for hero; ABC ROM at 16px/450 for body. Coral CTA buttons rgb(250, 64, 40) with border-radius: 1rem. Section backgrounds in pastels: mint rgb(230, 255, 217), blush rgb(255, 232, 226), yellow wash rgb(255, 251, 183). Navigation uses colored pill menus, each category with its own pastel. No shadows. Webflow-style clamp spacing tokens. 11 breakpoints from 360px to 1920px.

Generated by Sparkbites — extracted from live CSS analysis