Jasper

Overview

Jasper is an AI orchestration platform designed for modern marketing teams who demand speed, control, and measurable outcomes. The brand embodies 'Intelligent Minimalism'—a design philosophy that strips away unnecessary complexity while preserving the power and sophistication of enterprise-grade AI infrastructure. The visual identity combines a clean, light-dominant canvas (pure white #ffffff backgrounds, dark navy #00063d text) with a bold, energetic accent in Flame Red (#fa4028), creating a sense of urgency and action without sacrificing clarity. The emotional response is one of confidence: users feel they are working with a tool built by experts, not a generic chatbot.

Jasper's voice is direct, precise, and outcome-focused. The brand speaks in concrete terms—'orchestrate intelligent agents,' 'run end-to-end marketing workflows,' 'deliver measurable impact'—avoiding hype and vague abstractions. Vocabulary leans technical but remains accessible: 'agents,' 'pipelines,' 'context hub,' 'brand IQ.' The tone is authoritative yet approachable, as if explaining a complex system to a peer who respects efficiency. Example sentence in Jasper's voice: 'Deploy 100+ specialized agents to execute your entire marketing workflow—from research to personalization—without context loss.'

Colors

Jasper's color system is built on a foundation of high contrast and purposeful restraint. The primary surface is pure white (#ffffff), creating an uncluttered canvas that emphasizes content and data. Text defaults to a deep navy (#00063d), ensuring 7:1+ contrast ratio for accessibility and readability across all body copy and UI labels. The primary accent color is Flame Red (#fa4028)—a vibrant, action-oriented hue reserved exclusively for call-to-action buttons, primary navigation highlights, and interactive focus states. This red appears nowhere else in the system, making it instantly recognizable as the 'do this now' signal. Secondary accent colors include a sophisticated purple (#9146ff) for secondary actions and highlights, and a vivid lime green (#45ff00) for success states and positi

Typography

The type system balances serif headlines with sans-serif body text, creating visual hierarchy and personality. Display and headline levels use 'Feature' (a serif typeface from Georgia fallback stack) at sizes 73px, 48px, and 32px respectively, with tight line-heights (82px, 56px, 40px) and negative letter-spacing (-0.02em to -0.01em) to create a premium, editorial feel. Body text and labels use 'ABC ROM' (Arial fallback) at 16px–18px for body copy and 12px–14px for labels, with a consistent font-weight of 450 (medium) for body and 600 for labels. The label-md component (14px, 600 weight, 0.01em letter-spacing) is applied to all button text and form labels, ensuring consistency across interactive elements. On small labels over busy backgrounds or within dense data tables, apply text-shadow:

Layout

Jasper uses a 12-column fluid grid system with a maximum container width of 1280px, allowing the design to breathe on large displays while maintaining focus on content. The page rhythm is governed by a semantic spacing scale: md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. Gutters between grid columns are set to 24px, providing consistent breathing room. The hero section uses centered, large typography (display at 73px) with ample white space above and below, creating a moment of pause before the user encounters product information. Cards and content blocks are separated by lg spacing (40px), while internal card padding uses md spacing (24px). The container-max-width of 1280px ensures that on ultra-wide displays,

Elevation & Depth

Depth in Jasper is achieved through subtle shadows and layering, not through color darkness. The elevation system uses three distinct shadow levels: sm (0 1px 4px rgba(0, 0, 0, 0.3)) for small interactive elements like buttons and badges, md (0 4px 12px rgba(0, 0, 0, 0.08)) for cards and modals, and lg (0 5px 15px -5px rgba(0, 0, 0, 0.5)) for floating panels and popovers. The sm shadow is applied to primary buttons on hover to signal interactivity without changing the button's background color. Cards use the md shadow by default, transitioning to lg on hover to indicate elevation. Modals and o

Shapes

Jasper employs 'Architectural Sharpness'—a shape philosophy that favors minimal border-radius and clean, technical geometry. The default border-radius is 0.5rem (8px), applied to buttons, input fields, and small cards. Larger containers and modals use 0.75rem (12px) to create subtle visual distinction without softening the overall aesthetic. Badges and pill-shaped elements use full (9999px) border-radius for their distinctive rounded appearance. Notably, the primary CTA button uses 0rem (no border-radius), maintaining a sharp, rectangular form that signals precision and action. This sharp-edge

Components

Action Elements Primary buttons use Flame Red (#fa4028) background with white text, 16px font-size, 600 font-weight, and 16px vertical padding with 20px horizontal padding (total height 48px). No border-radius is applied—the button maintains sharp corners to emphasize action and precision. On hover, the background transitions to primary-fixed-dim (#fa7560) over 200ms. Secondary buttons are transparent with a 2px border in on-surface (#00063d) and matching text color; on hover, the background fills with surface-container-high (#e0e0e1). Both button variants use label-md typography (14px, 600 weight) and apply a 150ms ease-in-out transition on all state changes.

Containers & Surfaces Cards use a white background (#ffffff) with a 1px border in outline-variant (#cccccc) and md shadow

Do's and Don'ts

**Do**

• Do use Flame Red (#fa4028) exclusively for primary CTAs and interactive focus states—it is the brand's signature accent and must remain distinctive.
• Do maintain sharp corners (0rem border-radius) on primary buttons to reinforce the technical, precision-focused brand personality.
• Do apply the md shadow (0 4px 12px rgba(0, 0, 0, 0.08)) to all cards and containers to create subtle depth without visual clutter.
• Do use the serif 'Feature' typeface for all display and headline text (73px–32px) to create editorial authority and visual hierarchy.
• Do apply 24px (md) spacing between major content sections and 40px (lg) spacing between hero and body content to maintain breathing room.
• Do use the full 12-column grid system with 1280px max-width to ensure content remains scannable and focused on large displays.

**Don't**

• Don't apply border-radius to primary buttons—keep them sharp and rectangular to maintain the technical aesthetic.
• Don't use Flame Red (#fa4028) for secondary elements, badges, or decorative accents—reserve it exclusively for primary actions.
• Don't apply blur effects, glassmorphism, or transparency overlays to cards and containers—maintain clean, opaque surfaces.
• Don't use the sans-serif 'ABC ROM' typeface for headlines or display text—headlines must use the serif 'Feature' typeface to establish hierarchy.
• Don't reduce spacing below md (24px) for section separation on desktop—the minimalist aesthetic depends on generous white space.
• Don't apply shadows stronger than lg (0 5px 15px -5px rgba(0, 0, 0, 0.5)) to any element—keep shadows subtle and restrained.