Design System • /designs Showcase

Ivy Financial UI & Glassmorphism System

A reusable component architecture built on the 9-step Deep Twilight to Light Cyan palette with subtle translucent Glassmorphism surfaces, perceptual Oklab gradients, and accessible form/modal primitives.

Back to Portal Home

1. Theme Color Range

All 9 shades from the brand specification are registered as CSS custom properties and Tailwind v4 theme tokens (from deep-twilight / ivy-900 to light-cyan / ivy-100).

ivy-900#03045E

Deep Twilight

Primary headings, deep glass surfaces, high-contrast brand anchor

--color-deep-twilight

ivy-800#023E8A

French Blue

Primary buttons, executive banners, active navigation states

--color-french-blue

ivy-700#0077B6

Bright Teal Blue

Interactive links, primary CTA gradients, icon highlights

--color-bright-teal

ivy-600#0096C7

Blue Green

Secondary buttons, hover accents, data visualization series

--color-blue-green

ivy-500#00B4D8

Turquoise Surf

Focus rings, progress indicators, active badges & highlights

--color-turquoise-surf

ivy-400#48CAE4

Sky Aqua

Luminous glass borders, decorative orbs, chart accents

--color-sky-aqua

ivy-300#90E0EF

Frosted Blue

Soft badge fills, glass card highlights, subtle dividers

--color-frosted-blue

ivy-200#ADE8F4

Frosted Blue Light

Tinted glass surfaces, hover backgrounds, ambient gradients

--color-frosted-light

ivy-100#CAF0F8

Light Cyan

Page backdrop washes, subtle section backgrounds, pill surfaces

--color-light-cyan

2. Glassmorphism Surfaces & KPI Cards

Total Protected Estate

$2,500,000+12.4% YoY

Combined Term Life, Participating Whole Life, and Living Benefits coverage.

Retirement Plan Assets

$1,145,000On Track

Projected to reach $2.80M target by 2042 with tax-free policy dividends.

Advisor Response SLA

< 2 HoursIMAP / SMTP

Two-way synchronization with me@ivyfinancialplanning.com.

.glass-card (Default)

Standard Frosted Surface

72% translucent white with 14px backdrop blur, luminous Frosted Blue border, and soft layered elevation shadows.

.glass-card-tinted

Cyan Tinted Glass Surface

Interpolates Light Cyan (#CAF0F8) to translucent white in Oklab color space for featured callouts and educational modules.

.glass-card-dark

Deep Twilight Executive Glass

Rich Deep Twilight (#03045E) and French Blue (#023E8A) gradient surface for high-contrast financial summaries.

3. Buttons, CTAs & Status Badges

Button Variants

Button Sizes

Badges & Pills

Policy ActiveDividend CreditedAnnual Review DueDraft PlanExecutive Tier

4. Form Controls & Post-Interaction Validation

Client Full NameAs shown on your life insurance policy contract

Please enter the policy owner's full name.

Client Email AddressFormat: you@example.com (validates after interaction)

Please enter a valid email address.

Insurance Product InterestChoose the primary coverage structure to model

Portal Security Password (Try typing & blurring)

At least 8 characters
One uppercase & one lowercase letter
One number & one special character

Password must meet all security complexity requirements above.

Financial Planning Objectives & Family NotesDescribe your target retirement age, estate goals, or questions for your advisor

Please share a brief note so your advisor can prepare.

5. Alerts & Status Banners

2026 Annual Policy Statement Ready

Your Participating Whole Life cash value and dividend statement is available for review with your advisor.

Beneficiary Designation Confirmed

Your primary beneficiary update for Policy #IVY-TL-2026-8841 has been verified and recorded.

Critical Illness Rider Review Scheduled

Your return-of-premium window approaches in 45 days. Book a 15-minute check-in to lock in your rate.

Action Needed: Signature Pending

Please complete the electronic signature on your Estate Trust liquidity addendum.

6. Financial & Policy Data Table

Policy Number	Policy Holder / Beneficiary	Coverage Type	Coverage Benefit	Monthly Premium	Status
IVY-TL-2026-8841	Eleanor Vance	20-Year Term Life	$1,500,000	$142.50 / mo	ACTIVE
IVY-WL-2026-3092	Vance Family Trust	Participating Whole Life	$750,000	$485.00 / mo	ACTIVE
IVY-CI-2026-1120	Eleanor Vance	Critical Illness Shield	$250,000	$98.00 / mo	REVIEW