Jasper

<!-- Generated by ExtractVibe — https://extractvibe.com/brand/jasper.ai -->
<!-- Extracted: 2026-10-07T03:38:56.830Z | Schema: v1 | Quality: 65/100 -->
---
version: alpha
name: "Jasper"
description: "Put AI agents to work for marketing | Jasper presents a professional web presence."
colors:
  neutral: "#fa4028"
  surface: "#ffffff"
  on-surface: "#00063d"
  on-surface-secondary: "#fa4028"
  border: "#e7e3f7"
  link: "#fa4028"
typography:
  display-lg:
    fontFamily: "Feature"
    fontSize: "80px"
    fontWeight: "450"
    lineHeight: "80px"
    letterSpacing: "-2.4px"
  headline-lg:
    fontFamily: "Feature"
    fontSize: "24px"
    fontWeight: "450"
    lineHeight: "26.4px"
  headline-md:
    fontFamily: "Feature"
    fontSize: "38px"
    fontWeight: "450"
    lineHeight: "38px"
    letterSpacing: "-0.76px"
  body-md:
    fontFamily: "ABC ROM"
    fontSize: "16px"
    fontWeight: "450"
    lineHeight: "22.4px"
    letterSpacing: "-0.16px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
---

# Jasper — Design System

## Overview

Put AI agents to work for marketing | Jasper presents a professional web presence.

Key characteristics: professional.

**Key characteristics:**

- Vibe — professional
- Design era — contemporary
- Emotional tone — professional
- Target audience — general audience
- Visual energy — 5/10 (moderate)

## Colors

The palette draws on 53 distinct colors observed across the site, organized into semantic roles below.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| surface | `#ffffff` | White |
| background | `#ffffff` | White |
| text | `#00063d` | Near-Black |
| secondary text | `#fa4028` | Orange Red |
| border | `#e7e3f7` | Lavender |
| link | `#fa4028` | Orange Red |
| muted | `#fa4028` | Orange Red |

## Typography

Type is set in ABC ROM, Feature, ABC ROM Mono, with hierarchy expressed through size and weight contrast rather than family-switching.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| ABC ROM | body | self-hosted | 450 |
| Feature | heading | self-hosted | 450 |
| ABC ROM Mono | body | self-hosted | 450 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Feature | 80px | 450 | 80px | -2.4px |
| Heading 2 | Feature | 24px | 450 | 26.4px | — |
| Heading 3 | Feature | 38px | 450 | 38px | -0.76px |
| Body | ABC ROM | 16px | 450 | 22.4px | -0.16px |

### Conventions

- Heading case — sentence-case
- Body line-height — 22.4px

## Layout

- Base spacing unit — `2px`

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 5/10 | balanced |
| Playful ↔ Serious | 5/10 | balanced |
| Enthusiastic ↔ Matter-of-fact | 5/10 | balanced |
| Respectful ↔ Irreverent | 3/10 | respectful |
| Technical ↔ Accessible | 5/10 | balanced |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — moderate
- Jargon — some
- CTA style — direct

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/jasper.ai) | 100% |
| favicon | — | ico | [link](brands/jasper.ai/logo-0.ico) | 95% |
| favicon | — | png | [link](brands/jasper.ai/logo-1.png) | 95% |
| primary | color | webp | [link](brands/jasper.ai/logo-2.webp) | 85% |
| primary | color | webp | [link](brands/jasper.ai/logo-3.webp) | 85% |
| primary | color | webp | [link](brands/jasper.ai/logo-4.webp) | 85% |
| primary | color | webp | [link](brands/jasper.ai/logo-5.webp) | 85% |
| primary | color | webp | [link](brands/jasper.ai/logo-6.webp) | 85% |
| primary | color | webp | [link](brands/jasper.ai/logo-7.webp) | 85% |
| logomark | — | svg | [link](brands/jasper.ai/logo-svg-8.svg) | 90% |
| logomark | — | svg | [link](brands/jasper.ai/logo-svg-9.svg) | 90% |
| logomark | — | svg | [link](brands/jasper.ai/logo-svg-10.svg) | 90% |

## Sources

- Official brand guidelines — https://jasper.ai/brand
- Live brand page — https://extractvibe.com/brand/jasper.ai
- Raw JSON — https://extractvibe.com/api/brand/jasper.ai
- DESIGN.md (this file) — https://extractvibe.com/api/brand/jasper.ai/design.md
- Extracted — 2026-10-07T03:38:56.830Z
- Generator — ExtractVibe vv1
- Quality score — 65/100

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md