PolicyBazaar

name PolicyBazaar

colors background: "#ffffff" foreground: "#2c2c2c" brand: "#0165ff" # Blue Ribbon muted: "#7c7c7c" border: "#f0f0f0" card: "#ffffff" accent: "#ff9900" # PolicyBazaar Orange dark: background: "#0a0a0a" foreground: "#f5f5f5" muted: "#a1a1a1" border: "#2d2d2d" card: "#1a1a1a" accent: "#0165ff"

typography fontFamily: sans: "Inter, system-ui, -apple-system, sans-serif" body: fontSize: "14px" lineHeight: "1.5" heading: fontWeight: "600"

rounded default: "6px" md: "10px" lg: "16px"

Design System: PolicyBazaar

Overview

PolicyBazaar's design system is built for "Trust and Comparison." It uses a professional blue palette with friendly orange accents to simplify the complex world of insurance.

Design Philosophy

• Clarity over Complexity: Designed to make "boring" insurance data easy to compare and understand.

• The "Trusted Advisor" Voice: Uses a professional "Blue Ribbon" color to establish institutional trust.

• Frictionless Comparison: Prioritizes side-by-side tables and clear, feature-based filtering.

• Friendly Guidance: Uses orange accents and approachable iconography to guide users through long forms.

Colors

• Blue Ribbon (#0165FF): The core brand color, representing stability, trust, and digital reliability.

• PolicyBazaar Orange (#FF9900): Used for helpful tips, "Best Value" highlights, and secondary CTAs.

• Clean Grays: Uses a palette of light greys to separate complex plan features without adding visual weight.

Typography

• Inter: Provides the necessary clarity for reading "fine print" and policy details.

• Bold Value Propositions: Key benefits (e.g., "Cover up to 1 Cr") are highlighted in bold blue to ensure they are the primary focal point.

Components

• Plan Comparison Cards: Structured units with integrated checkboxes, prices, and clear "Buy Now" buttons.

• The Filter Sidebar: A high-density area with multi-select chips and sliders for narrowing down insurance options.

• Claim Status Stepper: A clear, vertical or horizontal visualization of the insurance claim process.

Visual Effects

• Highlight Ribbons: Small, diagonal or horizontal banners across cards for "Recommended" or "Lowest Premium."

• Focus Rings: Uses the brand blue to highlight selected plans or active form fields.

• Subtle Row Zebra-Strips: Uses alternating light-grey backgrounds in comparison tables to help the eye scan features.