Quote Flow Design System
A light, clean, and high-trust aesthetic designed for the booking engine and checkout process. Contrast Forest Green text against soft gray/white backgrounds.
Palette
Surface White
#FFFFFF
Surface Alt
#F5F8F3
Border / Divider
#E8EDE4
Forest Text
#21370b
Action Lime
#11c52f
Typography
Page Title
Check your activities
Clear, legible headings in Forest Green. We use Plus Jakarta Sans throughout the quote journey for readability and consistency.
Labels
Price / Value
Components & Cards
Excess: £150
£45.00
Winter Sports
Cover for skiing and snowboarding on piste.
Primary Actions
Quote Flow Components
Process & NavigationProgress Headers
The sticky header component showing progress through the 4-step quote journey. Note: These are interactive React components.
Step 1: Activity / Quote Form
activeStep=1
Activity Search
The core interaction for the quote engine. Includes a specific dropdown style for results with "Standard" or "Grade" badges.
Personal Details Forms
Clean, segmented form cards with clear iconography and validation states.
Basic Information
Enter your full legal name as it appears on your passport
Contact Details
How we can reach you during your trip
Why we need these details
We use this information to provide you with accurate coverage and contact you in case of emergency.
Checkout & Payment
The final step components: Policy Summary and Secure Payment Fields.
Policy Summary
Secure Checkout
Complete your purchase securely.