Jasper Design System

Overview

Jasper's marketing site inverts the enterprise-AI convention. Editorial serif voltage: where Anthropic and OpenAI sign themselves with weight-700 sans-serif on near-black canvases and Cohere leans on a violet-indigo gradient mesh, Jasper paints itself on pure white with deep-navy ink ({colors.ink} — #00063d) and runs the Feature serif at 80px in weight 450 for the hero h1 — a register that reads closer to a print magazine spread than to an AI platform. The headline "Put AI agents to work for marketing" sits in this navy serif against the white canvas, with a saturated flame-orange ({colors.primary} — #fa4028) "Start Free Trial" pill paired with an ink-bordered "Get a Demo" secondary. No enterprise-AI peer in the directory signs itself with a serif.

Ink-as-voltage: the deep-navy #00063d isn't a text color in the conventional sense — it's the dominant brand-layer hex, occurring 1478 times across the captured page as 741 text + 732 border + 5 background. The system uses it as the load-bearing ink for every paragraph, every heading, every button border, every top-nav link, and every hairline beneath the fold. The flame-orange CTA, by contrast, carries just 18 occurrences and lives entirely on the primary button. Where Cloudflare paints its hero with a single saturated orange and Spline holds one cobalt in reserve, Jasper inverts the figure-ground: the ink is the brand voltage; the orange is the action voltage.

The below-fold rhythm is pastel jewel-tones as flat fills. Feature cards render in soft mint ({colors.surface-mint} — #e6ffd9), sky-blue ({colors.surface-sky} — #ceebff), butter-yellow ({colors.surface-butter} — #fffdd9), pink ({colors.surface-pink} — #ffe8e2), and lavender ({colors.surface-lavender} — #e7e3f7), each as a flat background fill — never as a gradient, never with a border, always with the navy ink as the text-on-card color. The pastels differentiate cards by category-color rather than by ladder; the effect reads as magazine-spread editorial layout rather than as SaaS feature-grid.

Key Characteristics:

• Ink-as-voltage: {colors.ink} (#00063d) carries 1478 occurrences as both text (741) and border (732), the load-bearing brand color.
• Single flame-orange CTA: {colors.primary} (#fa4028) lives entirely on the primary button — 18 captured occurrences, never elsewhere in the chrome.
• Editorial Feature serif at the hero: 80px / 450 weight / -2.4px tracking. No enterprise-AI peer uses a serif at this scale.
• Weight 450 across the system: both Feature display and ABC ROM body run at the unusual 450 step, half a notch between regular and medium.
• Pastel jewel-tone feature cards as flat fills: mint, sky, butter, pink, lavender — each a single background color, no gradient, no border.
• Tight radius scale: 4px (12 occurrences) and 2px (6 occurrences) only. There is no middle or large radius tier; cards read as sharp-cornered editorial panels.
• Webflow 12-column container with --site--width: 90rem and clamp-based responsive site margins driving every grid.
• Custom ABC ROM Mono carries the small label tier (6 captured occurrences) — used inside category-marker chips and inline-code samples.

Colors

Brand

• Jasper Ink ({colors.ink} — #00063d): frequency 1478. Used as text (741), border (732), background (5). Wired as --_theme---text, --swatch--blue-800, --swatch--brand-text, and the border-default for the entire system. The load-bearing brand-layer color — carries every heading, paragraph, nav link, button border, and hairline. The hex is dark enough to read as black at a glance but contains enough cobalt-blue (#06 R / #06 G / #3d B) to register as navy when viewed against a saturated swatch.
• Jasper Ink Hover ({colors.ink-hover} — #0011a7): wired as --swatch--blue-700, --_theme---button-tertiary--border-hover. The hover state for the tertiary button variant — a deeper saturated blue.
• Flame Orange ({colors.primary} — #fa4028): frequency 18. Used as background (4), text (5), border (9). Wired as --_theme---button-primary--background, --swatch--flame-600, --_theme---selection--background. The single action voltage — lives entirely on the primary CTA pill and the text-selection highlight. Saturated coral-red leaning slightly orange.
• Flame Hover ({colors.primary-hover} — #801a10): frequency 1. Wired as --_theme---button-primary--background-hover, --swatch--flame-700. The deep burgundy press-state for the primary CTA — a major drop in lightness rather than a saturation shift.
• Flame Soft ({colors.primary-soft} — #fa7560): frequency 12. Wired as --swatch--flame-500. A coral-peach softer step used inside illustration accents below the fold.
• Flame Tint ({colors.primary-tint} — #ffe8e2): the lightest flame step, used as a pale-coral background tint on a small subset of card surfaces.

Surface

• Canvas ({colors.canvas} — #ffffff): frequency 485. Used as text (235), border (229), background (21). Wired as --_theme---background, --swatch--light-100. The page floor — pure white, not a cream tint.
• Surface Soft ({colors.surface-soft} — #f2f2f3): wired as --swatch--light-200, --swatch--dark-100, --_theme---background-secondary. A barely-perceptible warm-grey tint used on alternate-band backgrounds.

Pastel Card Surfaces

• Surface Mint ({colors.surface-mint} — #e6ffd9): frequency 7 — backgrounds only. Wired as --swatch--green-300. The soft-mint feature-card fill.
• Surface Mint Deep ({colors.surface-mint-deep} — #d2ffc1): wired as --swatch--green-400. A deeper-mint variant for emphasis cards.
• Surface Sky ({colors.surface-sky} — #ceebff): frequency 6 — backgrounds only. Wired as --swatch--blue-300. The soft-sky feature-card fill.
• Surface Butter ({colors.surface-butter} — #fffdd9): frequency 2 — backgrounds only. Wired as --swatch--yellow-400. The pale-butter feature-card fill.
• Surface Butter Deep ({colors.surface-butter-deep} — #fffbb7): wired as --swatch--yellow-500. A deeper-butter variant.
• Surface Pink ({colors.surface-pink} — #ffe8e2): frequency 15. Wired as --swatch--flame-300, --swatch--pink-400, --swatch--dark-150. The pale-pink/coral feature-card fill.
• Surface Lavender ({colors.surface-lavender} — #e7e3f7): frequency 3. Wired as --swatch--violet-400. The pale-lavender feature-card fill.

Accent

• Accent Green ({colors.accent-green} — #45ff00): frequency 13. Used as text (5), background (3), border (5). Wired as --swatch--green-600. A saturated electric green used inside illustrations and one inline highlight chip.
• Accent Green Deep ({colors.accent-green-deep} — #103a00): frequency 58. Used as text (29), border (29). Wired as --swatch--green-800. The deep-emerald counterpart used as ink-on-mint when text sits on the {colors.surface-mint} card surface.
• Accent Pink Deep ({colors.accent-pink-deep} — #5a003c): frequency 21. Used as text (10), border (10), background (1). Wired as --swatch--pink-800. The deep-magenta counterpart used as ink-on-pink when text sits on {colors.surface-pink}.

Typography

Font Families

The system runs three custom families with a strict role split. Feature (Georgia, serif fallback) is an editorial serif wired as --_typography---font--secondary-family, carrying every display heading from 24px through 80px at weight 450. ABC ROM (Arial fallback) is a custom sans wired as --_typography---font--primary-family, carrying every body paragraph, nav link, and button label at 14-18px weight 450. ABC ROM Mono carries small uppercase labels and inline category markers. Fallback stacks walk to Georgia, sans-serif for the serif tier (the sans-serif last-resort is unusual for a serif fallback — most systems fall back to serif), and Arial, sans-serif for ABC ROM.

The Feature-plus-ABC-ROM pairing is the distinguishing move. Editorial serif display in an enterprise-AI category dominated by sans-serif systems is the one move no peer attempts; it gives every Jasper page a magazine-spread register that the body and nav extend in sans.

Hierarchy

Principles

Weight 450 is the system's single voice. Both the Feature display tier and the ABC ROM body tier run at this half-step between regular (400) and medium (500), wired explicitly as --_typography---font--primary-regular: 450 and --_typography---font--secondary-regular: 450. The choice gives the serif Feature at 80px enough typographic muscle without crossing into the heaviness of 500, and gives the ABC ROM body a slightly more substantial reading register than 400.

Tracking is uniformly negative across the display tier: -2.4px on the 80px hero, -1.62px on the 54px h2, -0.76px on the 38px h3, -0.56px on the 28px sub-heading. The tighter-than-typical tracking is part of the editorial-magazine register — display headlines pull inward rather than letting the letterforms breathe.

Note on Font Substitutes

Feature is licensed; Source Serif Pro at the same display sizes is a free open substitute, or PT Serif for a slightly different x-height. ABC ROM is also licensed; Inter at weight 500 (the closest standard step to 450) is the closest open substitute. For ABC ROM Mono, IBM Plex Mono at weight 500 transfers cleanly. The weight-450 step is non-standard — most substitute typefaces will need to round to 500 or interpolate via a variable font.

Layout

Spacing System

• Base unit: 8px — the dominant module on the page.
• Tokens: {spacing.xs} 4px · {spacing.sm} 6px · {spacing.base} 8px · {spacing.md} 10px · {spacing.lg} 12px · {spacing.xl} 16px · {spacing.2xl} 24px · {spacing.3xl} 32px · {spacing.4xl} 40px.
• Section padding (vertical): ~80-128px between major sections (the --_spacing---section-space--page-top: clamp(6.25rem, 8.75rem) and --_spacing---section-space--large: clamp(7rem, 11.25rem) set the rhythm).
• Card internal padding: {spacing.3xl} (32px) on {component.card-mint}, {component.card-sky}, {component.card-butter}, {component.card-pink}, {component.card-soft}; {spacing.2xl} (24px) on the testimonial card.
• Site margin: clamp(1rem, 2.5rem) wired as --site--margin — fluid-responsive from mobile to desktop.

Grid & Container

• Max content width: --site--width: 90rem (1440px) with --container--main reducing it by twice the site-margin.
• Column count: 12 (wired as --site--column-count), gutter 1rem, with --column-width--1 through --column-width--12 plus matching --column-margin--N variables — a Webflow column-grid driving every below-fold layout.
• Hero: centered text + sub-paragraph + 2 CTAs stack, max-width ~720px.
• Logo wall: 9-column monochrome row (Wayfair, Bose, Orange.eg, Bowes Group, INSP, Visa Cabra, Royal Caffles, Prudential, GE, Bare).
• Feature card row: 3-column 1/3 split holding the pastel {component.card-mint} / {component.card-pink} / {component.card-sky} cards.

Rhythm

The page rhythm alternates between white editorial bands (hero, logo wall, full-width display sections) and pastel-card grids (the 3-up feature rows). Each pastel grid uses three different jewel-tone fills side-by-side so adjacent cards differ by category-color rather than by ladder-step. Section transitions are marked by uppercase Feature serif h2s rather than by background shifts, which keeps the page reading as one continuous editorial layout.

Elevation

The system has essentially no shadow tier. The captured page shows zero shadow occurrences in the structural color set — elevation is handled by tonal background fills and ink-only borders.

• Flat (no shadow): hero, logo wall, body bands, pastel cards, footer — 99% of surfaces.
• Pastel lift: the jewel-tone cards ({colors.surface-mint}, {colors.surface-sky}, {colors.surface-butter}, {colors.surface-pink}, {colors.surface-lavender}) sit on the white canvas with no border or shadow — the tint itself does the elevation work.
• Ink hairline outlines: {colors.ink} (#00063d) carries 732 of the captured border occurrences — the dominant outline tone on the testimonial card and the secondary button. No grey hairlines anywhere; the system commits to ink borders.

Shapes

The radius scale is tight and binary: 2px or 4px, with one full-pill outlier.

• {rounded.none} 0px — used on hero-section edges, the testimonial-card outline where the corner sits flush.
• {rounded.xs} 2px (6 occurrences) — the inset detail on card edges, used as a subtle "card-within-card" indicator.
• {rounded.sm} 4px (12 occurrences) — the dominant radius. Every primary button, secondary button, and feature card sits here.
• {rounded.lg} 8px — wired as --radius--small: .5rem but rare in the captured render.
• {rounded.full} 9999px — wired as --radius--round: 100vw but reserved for a small number of decorative chips; the dominant feel is sharp-cornered editorial.

There is no 12 / 16 / 20px middle radius tier. The system reads as editorial-magazine rather than as friendly-SaaS because feature cards never soften into rounded plumpness; the 4px radius is just enough to register as intentional rounding without abandoning the sharp-cornered editorial register.

Components

button-primary — The signature CTA. Flame-orange {colors.primary} (#fa4028) fill, white text, {rounded.sm} 4px radius, 12x24 padding, 44px height. "Start Free Trial" is the canonical instance. The flame-orange border matches the fill, so the button reads as a saturated block rather than as a stroked pill.

button-primary-hover — Background flips to deep burgundy {colors.primary-hover} (#801a10) — a major lightness drop rather than a saturation shift, with white text staying.

button-secondary — Transparent fill, ink {colors.ink} text, 1px ink border, {rounded.sm} 4px radius, 12x24 padding, 44px height. "Get a Demo" is the canonical instance, sitting beside the flame primary on the hero.

button-secondary-hover — Background fills to ink {colors.ink} with white text — the inverse of the resting state.

top-nav — White {colors.canvas} surface, 64px height. Jasper wordmark flush left, product-nav links (Platform, Solutions, Resources, Company, Pricing) center, "Log In / Free Trial / Get a Demo" cluster flush right.

nav-link — Transparent background, ink {colors.ink} text in {typography.body-md} (16px / 450 ABC ROM), 8x12 padding.

hero-heading — Ink {colors.ink} text, Feature 80px / 450 / -2.4px tracking. The editorial serif moment — the single largest typographic statement on the page.

section-heading — Ink text, Feature {typography.display-lg} (54px / 450 / -1.62px tracking). Used for "The execution platform for intelligent marketing", "Marketing runs on content. Jasper automates how it's made.", "Proven strategies, real results", "Enterprise-grade security, quality outputs".

body-paragraph — Default ABC ROM {typography.body-md} (16px / 450) in {colors.ink}. The workhorse paragraph style.

card-mint — Mint {colors.surface-mint} (#e6ffd9) fill, ink text, {rounded.xs} 2px radius, 32px padding. The mint feature card — holds the "Agents" use-case tile with ink-on-mint body copy.

card-sky — Sky {colors.surface-sky} (#ceebff) fill, ink text, same radius and padding. The sky-blue feature card — holds the "Jasper IQ" use-case tile.

card-butter — Butter {colors.surface-butter} (#fffdd9) fill, ink text, same dimensions. The pale-yellow feature card.

card-pink — Pink {colors.surface-pink} (#ffe8e2) fill, ink text, same dimensions. The coral feature card — holds the "Content Pipelines" tile.

card-soft — {colors.surface-soft} (#f2f2f3) fill, ink text, same radius and padding. The neutral-tint feature card used when the pastel-jewel row needs a quieter card.

testimonial-card — White {colors.canvas} fill, ink text, 1px ink border, {rounded.xs} 2px radius, 24px padding. Holds the customer quote rows ("What teams are saying" band) — four ink-outlined cards in a 2x2 grid.

logo-chip — Transparent fill, ink monochrome logo at uniform size. The customer-logo wall renders every mark in {colors.ink} at 40px height regardless of source brand color.

footer — Ink {colors.ink} fill, white text, 40x24 padding. The footer is the only band on the page that uses ink as a background fill rather than as text/border — a deliberate inversion that bookends the white body.

Do's and Don'ts

Do treat ink {colors.ink} (#00063d) as the brand voltage, not as a soft text color. The deep navy carries 1478 of the captured page's occurrences — pulling it back to a softer charcoal or rendering it as neutral grey strips the brand voltage out of every paragraph, every border, and every nav link.

Do reserve flame {colors.primary} (#fa4028) for the primary action. The system has exactly one rendered application of the flame — on the primary CTA pill. Multiplying it into nav-bar accents, inline-link colors, or card emphasis blocks dilutes the only chromatic action signal on the page.

Do use the pastel jewel-tone cards as flat fills with ink text — no gradient, no border, no shadow. The pastel surfaces are designed to read as magazine-spread feature pages; adding a gradient or a 1px outline turns each card into a SaaS-feature box and loses the editorial register.

Do run both display Feature and body ABC ROM at the same weight 450. The single-weight register is the system's typographic confidence move — mixing 400 body with 500 display (or vice versa) introduces a step the system explicitly avoids.

Don't swap the Feature display tier for a sans-serif. The serif at 80px is the single move that distinguishes Jasper from every other enterprise-AI marketing site; replacing it with Inter or General Sans at weight 700 turns the page into a generic SaaS hero and erases the brand's editorial register.

Don't use any of the deep jewel-tone hexes ({colors.accent-green-deep} #103a00, {colors.accent-pink-deep} #5a003c) as a primary CTA color or as a body-text color. These are designed as ink-on-pastel pairings — the deep emerald sits as text on the mint card, the deep magenta sits as text on the pink card. Using them as standalone brand voltages would compete with the flame.

Don't introduce a 12 / 16 / 24px middle radius tier. The system runs 12 captured 4px occurrences and 6 captured 2px occurrences with no middle step. Adding a softer card radius (8 or 12px) turns the pastel feature cards into friendly-SaaS boxes and loses the sharp-cornered editorial register.

Don't render the canvas as a warm cream or off-white. The system commits to pure {colors.canvas} (#ffffff) — the warm-cream variant that other brands lean on would muddy the contrast between the white canvas and the pastel jewel-tone cards. The whiteness is what makes the pastels read as deliberate category-color rather than as wash.

Known Gaps

• Hover and focus states: documented for {component.button-primary-hover} and {component.button-secondary-hover} only; full state matrix (focus rings, disabled tints, error styling) is not captured from the marketing surface.
• Form input states: the marketing site does not expose a rendered input field in the captured render; text-input chrome lives in the Jasper app at app.jasper.ai.
• Dark mode: the captured marketing surface is light-only. The Jasper product app exposes a dark variant in its preference panel but it is not represented in this spec.
• Motion: the hero block, the pastel feature-card grid, and the testimonial row all carry scroll-into-view animations and subtle hover transitions, but the spec captures end-state values only. Easing curves and timing live in the Webflow runtime.
• Product surfaces: this DESIGN.md captures the marketing site only. The Jasper agent workspace (the "Studio" surface), the content-editor view, the brand-voice configuration, and the analytics dashboard carry their own token sets that are not represented here.
• Webflow grid math: the column-width / column-margin system uses calc() expressions clamping against --site--width and --site--margin to produce a fluid-responsive 12-column grid. The expressions are too complex to translate cleanly to a Tailwind config — the spec captures the named tokens rather than the calc strings.
• Extended pastel palette: beyond the five rendered pastels (mint, sky, butter, pink, lavender), the system declares --swatch--green-400, --swatch--yellow-500, --swatch--blue-400, --swatch--pink-500, --swatch--pink-600, --swatch--violet-500, --swatch--violet-600 as additional pastel + deeper steps; most appear in 1-3 captured occurrences only and are reserved for illustration accents rather than card backgrounds.