DESIGN.md · explainx registry
PolicyBazaar
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 System#design#ui#ux#template
DESIGN.md (markdown body)
| 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.
Usage
- Copy DESIGN.md into your project or paste it into your IDE agent chat.
- Ask your assistant to follow the tokens for color, typography, spacing, and component styling.
- When collaborating, share the file directly—or tap “Copy page link” below so teammates open the same snapshot.
Common questions
- What is PolicyBazaar on explainx.ai?
- 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. Listed under category “Design System”. Explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.
- What is DESIGN.md?
- DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).
- How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?
- Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.
- Where is the source repo?
- Maintainers link to github.com/whyashthakker/design-md-templates-skills. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.
- How current is this DESIGN.md?
- Explainx snapshots the file at import time. Recorded last update on this listing: May 8, 2026.
- Need a fresh DESIGN.md from scratch?
- Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.
Still exploring the format? Browse the full DESIGN.md registry or draft a new system with our DESIGN.md generator.
Community listing for AI design workflows—not necessarily affiliated with any brand referenced in the name or summary. For context on the format, see Google Stitch.
List Your Design.md
Share your design system with AI agents worldwide