What is Jasper's primary brand color?

Jasper has two brand voltages with separate roles. The deep-navy ink #00063d carries 1478 occurrences — 741 as text, 732 as border, 5 as background — making it the dominant brand-layer color and the system's load-bearing ink. It's wired into CSS as `--_theme---text`, `--swatch--blue-800`, `--swatch--brand-text`, and the border-default. The flame-orange #fa4028 carries 18 occurrences — 4 as background, 5 as text, 9 as border — and lives entirely on the primary button (`--_theme---button-primary--background`, `--_button-style---background`) and the text-selection highlight. The navy is the body voltage; the flame is the action voltage.

What typefaces does Jasper use, and what should I substitute?

Jasper runs three custom families with a strict role split. Feature (Georgia, sans-serif fallback) is an editorial serif wired as `--_typography---font--secondary-family`, carrying every display heading from 24px through 80px at the unusual weight 450 with tight -2.4px tracking on the 80px hero. ABC ROM (Arial fallback) is a custom sans wired as `--_typography---font--primary-family`, carrying every body paragraph and nav link at 14-18px weight 450. ABC ROM Mono carries small labels. Closest open substitutes: Source Serif Pro or PT Serif for Feature; Inter at weight 500 for ABC ROM; IBM Plex Mono for ABC ROM Mono. The Feature serif at weight 450 is the signature — most enterprise AI sites avoid serifs entirely.

Why does Jasper use the unusual weight 450?

Both the Feature display tier and the ABC ROM body tier run at weight 450 — half a step between the conventional 400 (regular) and 500 (medium). The system wires it explicitly as `--_typography---font--primary-regular: 450` and `--_typography---font--secondary-regular: 450`. The non-standard weight gives the page a single typographic register that reads as more substantial than 400 without crossing into the heaviness of 500 — Jasper's serif Feature at 80px would feel anemic at 400 and almost shouted at 500, so the 450 step is the editorial-confidence compromise. For developers working from this spec, the closest standard substitute is 500 for substitute typefaces that lack a 450 variant.

Why does Jasper use pastel jewel-tone backgrounds on feature cards?

Below the fold, Jasper's feature cards render in flat pastel fills — soft mint #e6ffd9 (`--swatch--green-300`), soft sky #ceebff (`--swatch--blue-300`), butter #fffdd9 (`--swatch--yellow-400`), pink #ffe8e2 (`--swatch--flame-300`), and lavender #e7e3f7 (`--swatch--violet-400`). The choice is editorial: each pastel card holds a single use-case or feature category, and the soft tints differentiate cards by category-color rather than by a chrome ladder. The fills are flat (no gradient), the text inside stays in navy ink, and the cards have no border because the tint itself does the boundary work. The effect is closer to a magazine-spread feature page than to a SaaS feature grid.

Can I use this DESIGN.md to build my own marketing-AI site?

Yes — the file is designed for Claude, Cursor, Copilot, or any AI tool that reads structured design tokens. The agent will reproduce Jasper's specific moves: ink-as-voltage with deep navy #00063d doing the text and border work, single flame-orange CTA reserved for the primary action, Feature serif at 80px weight 450 for the hero, ABC ROM body at the same weight 450, and pastel jewel-tone feature-card backgrounds as flat fills rather than gradients. The one move worth borrowing only if your product is editorial-content-adjacent is the Feature serif display — on a pure-developer surface it would read as marketing-magazine rather than as software.

Jasper Design System

Jasper's marketing system pairs a serif Feature 80px hero with deep navy text and borders, a saturated flame-orange CTA, and pastel jewel-tone feature cards.

About Jasper DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source jasper.ai

AI & LLM Platforms
Marketing & CRM

Jasper's marketing site inverts the AI-platform aesthetic that Anthropic, OpenAI, and Cohere converged on. Where those brands lean on near-black canvases with violet or indigo accents and weight-700 sans-serif headlines, Jasper paints itself on white with a deep-navy ink (#00063d), commits to the Feature serif at 80px weight 450 for the hero h1, and reserves a single saturated flame-orange (#fa4028) for the primary CTA pill. The headline "Put AI agents to work for marketing" sits in the navy serif against the white canvas, and beneath it sit two CTAs — flame-orange "Start Free Trial" and ink-bordered "Get a Demo." The serif display is the move: no enterprise-AI peer signs itself this way.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 18 color tokens — the navy `--_theme---text` ink wired as both `--swatch--blue-800` and `--swatch--brand-text`, the flame-orange CTA color wired as `--_theme---button-primary--background`, the white canvas, and a pastel jewel-tone tier (mint `--swatch--green-300`, sky `--swatch--blue-300`, butter `--swatch--yellow-400`, pink `--swatch--flame-300`) used for flat-background feature cards below the fold; 12 typography tokens running Feature (a Georgia-related editorial serif wired as `--_typography---font--secondary-family`) for display and ABC ROM (wired as `--_typography---font--primary-family`) for body, both at the unusual weight 450; a 4px-or-2px radius scale; and 17 component definitions covering the flame CTA, the ink-outlined secondary, the pastel feature card, the dark-text testimonial card, and the Webflow 12-column container.

Feed this file to Claude, Cursor, or Copilot and it reproduces Jasper's specific moves: editorial serif Feature at the hero rather than weight-700 sans, ink-as-voltage where deep navy #00063d does the text and border work (and nothing else does), a single flame-orange CTA reserved for one primary action, and the pastel jewel-tone card backgrounds used as flat fills rather than gradients. The one move worth borrowing only if your product is genuinely editorial-content-adjacent is the Feature serif display — on a pure-developer-tools surface it would read as marketing-magazine rather than as software.

What makes it distinct

Editorial serif heroFeature (a Georgia-related serif) at 80px / 450 with -2.4px tracking carries the display tier; no enterprise AI peer signs itself with a serif
Ink-as-voltagedeep navy #00063d appears 1478 times as text (741) and border (732), the dominant brand-layer color, not a soft secondary
Flame-orange CTA scarcity#fa4028 lives entirely on the primary button (18 occurrences, 4 bg + 5 text + 9 border) and nowhere else in the chrome
Pastel feature cardssoft jewel-tones (mint #e6ffd9, sky #ceebff, butter #fffdd9, pink #ffe8e2) used as flat background fills rather than gradients
Weight 450 across the boardboth Feature display and ABC ROM body run at the unusual 450 step, half a notch between regular and medium

Live at jasper.ai

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

jasper.ai

Explore Jasper

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Jasper design system FAQ

Common questions about Jasper's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Jasper — official site

Jasper's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.