Essential Life

Design system preview

Slice 2 base components — mobile-first spacing, soft blues, and a calm rhythm. Resize the viewport to verify touch targets and layout.

Buttons

Text input

Age

With validation message

This field is required for the demo state.

Select

State of residence

Tile select (single)

One choice from several options — full-width tiles, not a dropdown. Good for income bands, coverage types, or any compact list of choices.

Annual income (preview)

Under $50,000$50,000 – $100,000$100,000 – $200,000Over $200,000

Tile select (multi)

Multiple selections allowed — same tile pattern with checkboxes. Preview for goals or “select all that apply” steps.

Current situation (preview)

Supporting family or dependentsPartner, children, or others who rely on your income.Carrying a mortgage or large debtsBusiness owner or self-employedFocused on long-term savings and retirement

Card

Recommended next step

Cards stay soft and minimal — light border, restrained shadow, generous padding on larger screens.

Progress indicator

Step 3 of 7

Color tokens

brand

brand-soft

brand-tint

surface

foreground (navy)

border

muted copy