Design System Audit

jasper.ai
Visual Language

Complete design system extracted from www.jasper.ai — every token, component, interaction pattern, and accessibility note, all from real values.

7Color tokens
9Type styles
1Case studies
ABCPrimary font
01 — Foundations

Color Palette

All color values extracted from the live stylesheet. Contrast ratios per WCAG 2.1.

white

#ffffff

Dominant — background, text

1.00:1 on page bg #ffffff · fails AA

ink-deepest

#00063d

Dominant — text

19.21:1 on page bg #ffffff · AAA ✓

black

#000000

Accent — text

21.00:1 on page bg #ffffff · AAA ✓

canvas-soft

#f2f2f3

Accent — background

18.77:1 on black · AAA ✓

accent

#fa4028

Accent — background

5.83:1 on black · AA ✓

canvas

#e6ffd9

Accent — background

19.67:1 on black · AAA ✓

primary

#103a00

Accent — text

12.91:1 on page bg #ffffff · AAA ✓
02 — Foundations

Typography

Body: ABC ROM · Display: Feature. Font files loaded by the site: nb-widget-icons (400) · ABC ROM (400, 500, 600, 700) · ABC ROM Mono (400) · Feature (100 900).

RoleSpecsSampleUsed on
Body
ABC ROM
16px / 450
lh 1.50
New!Optimize your brand for AI search with our GEO Agent. Learn moreNew reportNew report
BODY element · 16 uses · real site copy
Body
ABC ROM
16px / 450
lh 1.00
New!Optimize your brand for AI search with our GEO Agent. Learn moreNew reportNew report
DIV element · 3 uses · real site copy
Body
ABC ROM
16px / 400
Select marketing team size
HTML element · 2 uses · real site copy
Body
ABC ROM
16px / 500
lh 1.00
Business Email*
DIV element · 2 uses · real site copy
Body
ABC ROM
77px / 450
lh 1.00
The quick brown fox jumps over the lazy dog
DIV element · 2 uses
Body
ABC ROM
18px / 450
lh 1.22
Purpose-built AI agents that execute real marketing work.
DIV element · 2 uses · real site copy
Body
ABC ROM
16px / 500
lh 1.00
Business Email*
P element · 1 uses · real site copy
UI Label
ABC ROM
16px / 700
lh 1.00
The quick brown fox jumps over the lazy dog
STRONG element · 1 uses
Body
ABC ROM
18px / 500
lh 1.00
Start Free Trial
DIV element · 1 uses · real site copy
03 — Components

Navigation

Nav demo using extracted colors, font, real link labels and the site's real logo.

nav · demo using extracted tokens & real links
jasper.ai
New reportStart Free TrialGet A DemoExplore the platformExplore Agents
Extracted nav tokens
Background#1a1a1a
Text color#ffffff
Font familyABC ROM
Links (extracted)New report · Start Free Trial · Get A Demo · Explore the platform · Explore Agents

Layout values (height, padding, link states) are demo styling — not extracted from the site.

04 — Components

Button Variants

Color and radius tokens extracted from the scrape; variants are representative demos. Border-radius: 4px · fill type: solid · padding density: normal.

btn-primary · token demo

bg #103a00 · color #ffffff · radius: 4px

btn-secondary · outlined demo

Demo variant — outlined treatment of the extracted primary color #103a00.

btn-ghost · text-only demo

Demo variant — text-only treatment of the extracted primary color.

btn-disabled · demo state

Generic disabled-state demo — not extracted from the site.

05 — Components

Cards & Surfaces

Flat design system — no box-shadows. Depth is communicated through background contrast and borders.

section surface

bg #ffffff · text #000000

page canvas

bg #ffffff · text #00063d

card surface

bg #f2f2f3 · text #00063d

06 — Components

Project Cards

Real case studies found on the scraped site — titles and URLs extracted from live links.

CASE STUDIES - CUS

Case Studies - Cushman & Wakefield

/case-studies/cushman-wakefield

07 — Components

Form Elements

Representative form patterns styled with extracted color and radius tokens. Input border-radius: not detected in scrape.

Contact form — site-styled demo

jasper.ai
Get in Touch

Input states
input · default

radius: not detected · demo border/background styling

input · focus state demo

Demo focus treatment using extracted primary color #103a00.

select · dropdown
08 — Foundations

Spacing Scale

Spacing values observed in the live layout. Values extracted from stylesheet padding, margin, and gap declarations.

4px
xs
8px
sm
16px
base
39px
2xl
09 — Foundations

Border Radius

No border-radius tokens detected in the scraped styles.

10 — Foundations

Elevation & Depth

Fully flat design — zero box-shadow usage. Depth communicated through background-color contrast and 1px borders.

Level 0 — Page Canvas

bg #ffffff — the outermost layer. Everything sits on top of this.

Level 1 — Card Surface

bg #ffffff with 1px border. No shadow — white lift creates elevation via contrast.

Dark Section

bg #1a1a1a — depth through color contrast, no shadows.

11 — Interactions

Motion

Transition and animation values extracted from the scraped stylesheets, with real occurrence counts.

hover demo · using extracted tokens

Demo transitions use the fastest extracted duration (0.15s ease).

idle vs hover · frozen demo states

Demo hover treatment — fill with extracted primary color. Real hover styles are not scraped.

Motion tokens (extracted)
TokenValueOccurrences
duration-fast0.15s5× in stylesheet
duration-base0.2s22× in stylesheet
duration-slow0.3s20× in stylesheet
duration-slower0.4s33× in stylesheet
duration-slowest0.5s10× in stylesheet
easing-1ease24× in stylesheet
easing-2linear11× in stylesheet
easing-3ease-out10× in stylesheet
12 — Responsive

Responsive Behavior

Breakpoint boundaries detected in the scraped stylesheet media queries, with real rule counts.

BreakpointBoundaryUsage
Mobile401px2 @media rules
Mobile-2480px9 @media rules
Tablet768px6 @media rules
Desktop992px8 @media rules
Wide1440px2 @media rules
401px
480px
768px
992px
1440px

Extracted from https://www.jasper.ai/ stylesheets.

13 — Assets

Iconography & Brand Assets

Assets and links extracted from the scraped pages.

Brand mark — extracted (inline SVG)

Logo extracted as inline SVG from the page markup.

Brand asset — 2d549165fe4b43347afc07dff02f9ba3 Stories Logo Cushman
2d549165fe4b43347afc07df

https://cdn.prod.website-files.com/6807ee8d73c233fb82842313/68434c30ee3bba5948be8367_2d549165fe4b43347afc07dff02f9ba3_Stories%20Logo%20-%20Cushman.svg

Brand asset — 708a1d462a2988199822e30817c9baa3 Stories Logo Opella
708a1d462a2988199822e308

https://cdn.prod.website-files.com/6807ee8d73c233fb82842313/68434c30e8251447fe0c87f0_708a1d462a2988199822e30817c9baa3_Stories%20Logo%20-%20Opella.svg

Icon system

No icon library (Phosphor, Feather, Heroicons, Font Awesome…) detected in the scraped pages.