# Jasper — Marketing Site Design Spec

> 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).

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Core
| 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 |

### Playful pastel blocks (with deep same-hue 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.

## 3. Typography Rules

- Font stack: `"ABC ROM", Arial, sans-serif`. ABC ROM (Dinamo) is a contemporary grotesque; Jasper runs it at a consistent light-medium weight.
- Body: 16px / 22 / 450 / navy `#00063d`, slight negative tracking (-0.16px).
- **Everything is weight ~450** — display included; size and tracking do the work, not weight.

| 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.

## 4. Component Stylings

### Buttons (square)
- **Primary (coral)**: bg `#fa4028`, white text, radius 0, h48, 16px/450, padding `16px 20px`. Hover: slight darken.
- **Primary (navy)**: bg `#00063d`, white text, radius 0 — used for "Explore the platform"-type CTAs.
- **Secondary / ghost**: transparent, navy text, no radius; underline or hairline on hover.
- **Nav link**: navy `#00063d`, 16px/450.

### Inputs
- White bg, 1px navy/gray hairline, radius 0, navy text, gray `#5e5d5f` placeholder. Focus: coral or navy border.

### Cards / blocks
- Square (radius 0). Neutral cards: white or warm `#fff7f5` with a navy hairline. Pastel blocks: full sky/mint/yellow/peach fill with deep same-hue heading + body, often holding an illustration or product shot.

### Nav
- White/warm, wordmark left, center links (Platform/Solutions/Resources/Company, 16px navy), right: navy "Free Trial" text + coral "Get a Demo" square button.

## 5. Layout Principles

- Nav: ~68px, warm-white, hairline bottom.
- Hero: left or center; 80px/450 navy headline → 24px subhead → dual CTA (coral primary + navy/ghost), with a product screenshot or bold illustration on a pastel panel.
- Body: warm-white with alternating full-bleed pastel color-block sections; big square panels; feature grids; logo wall.
- Wide editorial columns, poster-like composition.
- Spacing: 4px grid; large editorial blocks; generous section rhythm.

## 6. Depth & Elevation

- Radii: **0 everywhere** — buttons, cards, inputs and blocks all use SQUARE corners. This is the signature; the only rounding is on avatars/pills where explicitly circular.
- Control heights: primary button `48px`. Button padding: `16px 20px`.
- Elevation: flat, poster-like; separation via bold color blocks and 1px hairlines, not shadows.

## 7. Motion

- Libraries: **GSAP + Rive** detected (window.gsap live); 20 live WAAPI animations on load.
- Micro-transitions are mixed 50–400ms on plain ease: `all 0.4s ease` (11 els), `opacity 0.1–0.3s ease` (20 els), very fast `all 0.05s ease` (7 els), `background-color/border-color/padding 0.4s ease-out` (5 els).
- Keyframe animations observed: `spin`, `nb-spin`, `jitter`, and a `translateX` marquee at an ultra-slow 69.3s infinite loop.
- Character: editorial and smooth — GSAP-choreographed color blocks and illustrations slide/fade in on scroll; product mockups animate content within static frames. Confident, unfussy.

## 8. Backgrounds, Effects & WebGL

- One full-width 2D canvas (1512×441) in the hero, driven by the **Rive** runtime — the only rendered effect on the page.
- Otherwise flat: zero decorative CSS gradients, zero backdrop-filters, zero box-shadows in the sample. The flat square-cornered editorial look is real — solid color blocks plus the canvas hero, nothing else.

## 9. Do's and Don'ts

### Do
- Set nearly all text in deep navy `#00063d`; keep coral `#fa4028` as the single loud accent (buttons, marks, underlines).
- Give pastel blocks deep same-hue text — navy `#00063d` on sky/yellow, green `#103a00` on mint, magenta `#5a003c` on peach.
- Use radius 0 on buttons, cards, inputs and blocks; reserve rounding for avatars/pills where explicitly circular.
- Keep the whole type scale at one even weight (~450); let size and tight negative tracking do the work.
- Separate sections with bold color blocks and 1px hairlines; keep elevation flat and poster-like.
- Space on a 4px grid with large editorial blocks and generous section rhythm.
- Keep hover/press transitions on plain ease, 50–400ms; reserve rich animation for choreographed hero/scroll moments (GSAP/Rive on the live site).

### Don't
- Don't use bold or light weights — no weight other than ~450 anywhere in the scale.
- Don't put light gray text on pastel blocks — always deep same-hue text.
- Don't round corners on buttons, cards, inputs or blocks.
- Don't use shadows for elevation — the surface stays flat (zero box-shadows on the live site).
- Don't add gradients or backdrop-filter glass — the brand is flat solid color blocks (zero of either captured).
- Don't add a second loud accent — coral `#fa4028` is the only one.

## 10. Responsive Behavior

- Breakpoints (Webflow-style, from the site's media queries): 479–480px, 767–768px, 991px, 1280px, 1440px, 1920px.
- Adaptations (mobile nav pattern, type scale-down, column collapse): not captured.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#ffffff` / `#fff7f5` · Text `#00063d` · Muted `#5e5d5f` · Border 1px navy `#00063d` hairline · Accent `#fa4028`
- Font: `"ABC ROM", Arial, sans-serif` · Body: 16px · Radius: 0/0 (square) · Control height: 48px
- Focus: 1px coral `#fa4028` or navy `#00063d` border · Hover fill: slight darken of base (no hex captured)

<jasper_design_language>
Use the Jasper design language: warm-white canvas (#ffffff / #fff7f5) with deep navy ink #00063d for nearly all text, and one loud coral accent #fa4028 for primary buttons and marks. Type is ABC ROM (contemporary grotesque) at a single even weight ~450 across the WHOLE scale — display is big and tightly tracked (80px, -3%), body plain 16/22; never bold or light. The signature: SQUARE corners everywhere — buttons, cards, inputs and blocks all radius 0. Primary button coral #fa4028 white text 48px, padding 16px 20px; alternate dark navy #00063d. Strictly flat: zero shadows, zero gradients, zero glass — bold color blocks and 1px hairlines separate everything; the only effect is a Rive-driven canvas hero animation. Pastel section blocks (sky #ceebff, mint #e6ffd9, yellow #fff67d, peach #ffe8e2) carry DEEP same-hue text (navy #00063d, green #103a00, magenta #5a003c). Motion 50–400ms plain ease, GSAP-choreographed. Feels: creative-agency, editorial, sharp, optimistic. Avoid: bold or light weights, rounded corners, shadows or gradients, light gray text on pastel blocks, any second loud accent beyond coral.
</jasper_design_language>