Coverdash Editorial Insurtech Landing
Editorial-inspired insurtech design system featuring a high-contrast palette of Coverdash Green (#0ACF83) and Deep Navy (#202847). This style combines premium editorial aesthetics—characterized by large-scale 'Instrument Serif' typography and generous white space—with modern functional UI components using 'Plus Jakarta Sans'. Ideal for fintech, insurance, and professional services looking to balance trust with speed. Layouts utilize asymmetric bento grids, large-scale typography, and sophisticated scroll-triggered transitions using a custom cubic-bezier(0.16, 1, 0.3, 1) curve. Key visual motifs include glassmorphism navigation, 48px-64px corner radii, and ambient background blurs for depth.
Summary
A premium editorial design system for insurtech that prioritizes 'speed' and 'craftsmanship' through bold typography, high-contrast brand colors, and fluid, non-linear micro-interactions.
Style
The design uses 'Instrument Serif' for expressive, large-scale editorial headings (italicized for emphasis) and 'Plus Jakarta Sans' for functional body and UI text. The color system is built on a navy foundation (#202847) with a vibrant emerald primary (#0ACF83) and soft mint accents (#EEFBF4). Containers feature extreme rounding (30px-64px) and subtle depth is achieved through 100px-120px background blurs and glassmorphism headers.
Layout & Structure
Modular, scroll-responsive layout utilizing full-width hero sections, asymmetric bento grids for product showcases, and clear status-oriented UI dashboards.
Global Navigation
Hero Section
Integration Bar
Insurance Product Bento
Who We Insure Grid
Customer Dashboard Preview
Embedded Partner CTA
Components
Animated Quote Simulator
A navy-themed floating browser mockup representing the quote experience.
Rotating Brand Mark
Dynamic, interactive logo container.
Live Coverage Status Badge
Inline status pill with pulse animation.
Special Notes
MUST: Use 'Instrument Serif' exclusively for large headers and italic emphasis to maintain the editorial tone. MUST: Use the cubic-bezier(0.16, 1, 0.3, 1) curve for all entry animations to convey fluidity and speed. MUST: Maintain large corner radii (min 24px) to avoid a 'legacy' feel. DO NOT: Use standard system blues or reds; use #0ACF83 for all success/primary actions. DO NOT: Use sharp corners or thin borders.