Editorial marketing-AI: warm white, deep navy ink, one coral accent, ABC ROM at a single weight, and square corners everywhere.
Browse Jasper in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: jasper.ai (live DOM, computed styles + color census), 2026-07-06; motion/effects/responsive pass 2026-07-07. Coverage: marketing site. Product (marketing AI app): needs-dashboard (login required).
Modern editorial with a confident, creative-agency voice. A warm-white canvas carries deep navy ink for nearly all text, one hot coral accent, and playful pastel blocks that punctuate the page. Big light-weight grotesque headlines and crisp SQUARE corners (radius 0 everywhere) give it a print/poster feel — bold but grown-up. Elevation is flat and poster-like: bold color blocks and hairlines do the separating, never shadows. Feels: creative, editorial, sharp, optimistic.
| Token | Hex | Role / usage |
|---|---|---|
| ink | #00063d | Primary text, dark buttons (deep navy) |
| coral | #fa4028 | Brand accent — primary buttons, highlights |
| white | #ffffff | Page bg, text on ink/coral |
| warm-50 | #fff7f5 | Soft warm-white section bg |
| peach | #ffe8e2 | Warm tint block |
| gray | #5e5d5f | Secondary / muted text |
| Token | Hex | Paired dark text |
|---|---|---|
| sky | #ceebff (bright #81cbff) | navy #00063d |
| mint | #e6ffd9 (bright #d2ffc1) | green #103a00 |
| yellow | #fff67d | navy #00063d |
| peach | #ffe8e2 | magenta #5a003c |
Rule: text is deep navy #00063d almost everywhere; coral #fa4028 is the single loud accent (buttons, marks, underlines). Pastel blocks carry a deep same-hue text (navy/green/magenta), never light gray — keeping the poster-like contrast.
"ABC ROM", Arial, sans-serif. ABC ROM (Dinamo) is a contemporary grotesque; Jasper runs it at a consistent light-medium weight.#00063d, slight negative tracking (-0.16px).| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero (h1) | 80 / 80 | 450 | -2.4px (-3%) |
| Display (h2) | 54 | 450 | -3% |
| Section (h3) | 38 | 450 | -2% |
| Subhead | 24 | 450 | 0 |
| Body | 16 / 22 | 450 | -0.16px |
| UI / nav | 16 | 450 | 0 |
Pattern: one confident weight (450) across the whole scale; big headings lean on tight negative tracking. No bold, no light — a single even voice.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.