InsureShield

InsureShield mockup preview
Click to expand

Protective, reassuring, clear -- coverage you can actually understand. It uses a trustworthy blue paired with action-oriented orange and affirming green to guide users through complex policy decisions with confidence. The system prioritizes plain language, step-by-step guidance, and comparison-friendly layouts. Every component is designed to demystify insurance and make users feel protected, not confused.

Primary#2563EB
Secondary#EA580C
Tertiary#059669
Neutral#64748B
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

DisplayBitter · 34px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

HeadlineBitter · 26px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

SubheadOpen Sans · 20px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Body LargeOpen Sans · 18px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

BodyOpen Sans · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Body SmallOpen Sans · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

CaptionOpen Sans · 12px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

OverlineOpen Sans · 11px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

CodeFira Code · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 8px

Protective, reassuring, clear -- coverage you can actually understand. It uses a trustworthy blue paired with action-oriented orange and affirming green to guide users through complex policy decisions with confidence. The system prioritizes plain language, step-by-step guidance, and comparison-friendly layouts. Every component is designed to demystify insurance and make users feel protected, not confused.

Components

Buttons

Inputs

Please enter a valid email

Chips

DefaultActiveActivePendingLapsed

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

List Item

Default

Selected

Checkbox

Default

Checked

Indeterminate

Tooltip

Default

Elevation & Depth

Subtle
Medium
Large
Overlay

Do's & Don'ts

Do

use plain, jargon-free language -- 'What you pay each month' instead of 'premium.'
structure complex processes as step-by-step wizards with a visible progress bar.
provide side-by-side coverage comparisons with clearly highlighted differences.
include contextual help tooltips on insurance-specific terms the user might not understand.
summarize policy coverage in clear, scannable bullet points rather than dense paragraphs.
use the Orange secondary color for important calls to action like 'Get a Quote' and 'File a Claim.'

Don't

bury critical policy details in footnotes or collapsed sections; surface key terms upfront.
use urgency-driven dark patterns ('Only 2 left!') to pressure quote completion.
auto-select coverage add-ons; let users opt in deliberately to build trust.
require account creation before showing a quote; reduce friction to build confidence.
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 6.4 KB
Downloads 0
clean finance fintech light saas

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/insureshield and implement it in my code

Don't have the MCP? Install it here