CareExpandStyle Guide

CareExpand

The operating system for continuity of care. CareExpand is a SaaS healthcare platform built on clean minimalism, professional trust, and systematic design — delivering a clinical yet approachable experience for providers and patients alike.

Brand Name

CareExpand

Tagline

"The operating system for continuity of care"

Tone of Voice

Clean • Professional • Trustworthy • Clinical but approachable

Design Foundation

Built on the shadcn/ui design system. Tokens over hardcoded values. Components over custom layouts.


Color Palette

A soft, approachable palette built on true tones with a distinctive accent. Inspired by CareExpand's clean healthcare aesthetic.

Primary Palette

Primary Blue

#4B90FF

Accent Blue

#4D65FF

Background

#FAFAFA

White

#FFFFFF

Muted

#727273

Neutral Scale

#080404

#373757

#404040

#757373

#A3A3A3

#D4D4D4

#E3E3E3

#F5F5F5

#FAFAFA

Semantic & Accent Colors

Primary Blue

#4D65FF — Info, interactive

Success

#56A34A — Confirmed, active

Warning

#EAB508 — Caution, pending

Destructive

#FF4D4D — Errors, critical

Color Token Reference

TokenHexUsage
--color-primary
#4B90FFMain interactive elements, links, active states
--color-accent
#4D65FFHighlights, CTAs, accent backgrounds
--color-background
#FAFAFAApp background
--color-white
#FFFFFFCard surfaces, modals
--color-muted
#727273Subdued text, disabled states
--color-success
#56A34AConfirmed, active, positive
--color-warning
#EAB508Caution, pending states
--color-destructive
#FF4D4DErrors, deletions, critical alerts

Type System

Inter serves as the primary typeface — clean, geometric, and highly legible across all sizes. JetBrains Mono provides a technical monospaced counterpart for data, codes, and labels.

Display Large48px / Bold
Tracking: 1px
Heading 136px / Semibold
Tracking: -0.5px
Heading 224px / Semibold
24px / Semibold
Heading 318px / Semibold
18px / Semibold

Body text provides readable content at comfortable sizes for long-form reading and interface descriptions.

16px / Regular
Line height: 1.5
Caption and helper text for supplementary information13px / Regular
13px / Regular

Section Label — None 469

Tracking: 2px / uppercase

11px / Semibold
Tracking: 2px

Monospace — JetBrains Mono

PT-2026-04221Patient ID
STMT-2024-002Statement Number
#4B90FFColor Token
12/31/1979 (46y)Date of Birth

Spacing & Radius

A base-4 spacing system ensures consistent rhythm across all components. Corner radius tokens define the visual softness of each element type.

Spacing Scale

4px — Tight--space-tight
8px — Small--space-small
12px — Base--space-base
16px — Medium--space-medium
24px — Large--space-large
32px — XL--space-xl
48px — XXL--space-xxl

Corner Radius Scale

None0px

Tables, strict containers

Small4px

Small badges, chips

Base6px

Buttons, inputs

Medium8px

Cards, modals

Large16px

Dialogs, grid

Full9999px

Avatars, circular elements


Buttons

Core button variants styled with the CareExpand palette. All variants support default and small sizes, with icon + label patterns.

Default Size — Solid Variants

Small Size

Contextual Action Buttons (from Data Table)


Form Inputs

All inputs use 6px border radius, subtle border (#D4D4D4), and a Primary Blue focus state. Labels appear above inputs in Primary Blue.

Please enter a valid email address


Badges & Tags

Pill-shaped badges with 16px border radius for status indicators, category labels, and count displays.

Outlined Variants

DefaultSuccessWarningDestructiveMuted

Solid Variants (Status Badges)

ConfirmedPendingClosedExpiredActive

Count Badges

Citas2
Notifications5
Superbills12

Cards

Card components for displaying metrics, content, and patient information. All cards use 8px border radius and white background.

Stat Cards

Total Payments

6

Total Paid

$23,800

Total Billed

$28,600

Claims Count

24

+7%

Content Cards

Active Rovers

1,280

72%

Solar Efficiency Pack

Boosts rover endurance by optimizing solar panel alignment.

Patient Card (Complex)

SJ

Sarah Johnson

PT-2026-04221

Active

120/80

Blood Pressure

72 bpm

Heart Rate

98.6°F

Temperature

Upcoming Appointments

Next 7 days

10:30 AM — Dr. Michael Chen

Annual Checkup · Mar 15

Confirmed

2:30 PM — Dr. Sarah Williams

Lab Review · Mar 17

Pending

Controls

Interactive form controls including toggles, radios, checkboxes, and sliders — all using the Primary Blue accent color.

Toggle Switches

Radio Buttons

Checkboxes

Slider / Range Input

065%100

Dialogs & Modals

Confirmation dialogs and modal overlays for critical user actions. Use modals sparingly for focused tasks.

Confirm Appointment

Are you sure you want to schedule this appointment for March 15, 2026 at 10:00 AM?

Patient Transfer

Transfer patient records to another provider. This action requires authorization.

Secure your account with an additional verification step.




Alerts & Feedback

Contextual feedback components for informing users of status, warnings, and important messages.

Appointment Confirmed

Your appointment with Dr. Chen has been scheduled for March 15 at 10:00 AM.

Insurance Expired

Patient insurance coverage expired on Feb 1, 2026. Please update before next visit.

Progress Indicators

Onboarding Progress75%
Records Uploaded42%

Pagination

Accordion FAQ

Navigate to the Appointments tab, click 'New Appointment', select the patient and provider, then choose an available time slot.


Data Tables — Appointments

Appointments data table with status badges, action icons, and patient information. Includes header search, column sorting, and pagination.

Citas2
TiempoPacienteTipo de citaUbicaciónPre-VisitaEstado
Feb 19 11:30 AM

Alderwick Rowan

12/31/1979 (46y)

First ConsultationTeleconsultationCerradoPendiente
Feb 19 1:20 PM

Isabelo Moreno

10/09/1980 (45y)

Follow-up ConsultationTeleconsultationCerradoPendiente
Notas

No hay notas para este paciente


Advanced Tables & UI

Superbills, payments, patient balances, statements, notifications, and profile components for the CareExpand healthcare platform.

Payments — Incoming ERAs

Payments

TOTAL PAYMENTS

6

TOTAL PAID

$23,800.00

TOTAL BILLED

$28,600.00

CLAIMS COUNT

24

PAYERPAYMENT DATETOTAL PAIDCLAIMSSTATUSACTIONS
— BlueCross05/20/2024$9,000.005NewView Details
— Aetna05/18/2024$3,500.003PostedView Details
— UnitedHealth05/18/2024$4,200.006Needs ReviewView Details
— Cigna05/17/2024$2,800.002ReviewView Details
— Medicare05/16/2024$8,500.008NewView Details
Page 1 of 1

Patient Balances

Patient Balances

TOTAL INCOMING

$8,933.00

% patients

ACTIVE BALANCE

6

Current accounts

IN COLLECTION

1

Requires attention

AGING BREAKDOWN

$3,131.50 / $5,801.50

Current / Total

PATIENTTOTAL BALANCEAGING BREAKDOWNSTATUSLAST STATEMENTACTIONS

Robert Johnson

PT-1

$2,100.00
Sent To Collection11/25/2025

David Lee

PT-1

$1,005.00
Active2/15/2026

Maria Garcia

PT-1

$480.00
Payment Plan2/19/2026

Michael Brown

PT-1

$0.00
Closed1/24/2026

Patient Statements

Patient Statements3
STATEMENT #PATIENTAMOUNT DUESTATUSDELIVERYCREATEDDUE DATEACTIONS
STMT-2024-002Emily Davis$325.00PaidPORTAL3/18/20243/02/2026
STMT-2024-001Sarah Johnson$850.00OverduePORTAL2/28/20263/02/2026
STMT-2024-002Michael Brown$1,260.00SentEMAIL1/3/20243/02/2026

Notifications & Profile

Notifications3
💬

New message Received

Philip Bacon · Feb 19, 2026 · 04:51

💬

New message Received

Philip Bacon · Feb 19, 2026 · 04:51

📋

New order created

The new order for patient Alderwick Rowan was created. · Feb 19, 2026 · 04:51

JV

Jaume Vinals

[email protected]

👤Configuración de perfil
⚙️Settings
🌐Global sidebar

Authentication Forms

Sign in and sign up forms with validation states, input fields, and call-to-action buttons for the CareExpand platform.

Sign in to Careexpand

Don't have an account? Create one for free here

Please enter a valid email address

Forgot your password?

Create your account

Already have an account? Sign in here

or continue with


Design Principles

Four guiding principles that define the CareExpand design system — from visual philosophy to accessibility standards.

Clean Minimalism

High contrast black and white foundation. Every element earns its place. Generous whitespace lets content breathe.

Professional Trust

Healthcare demands reliability. Restrained color, precise spacing, and systematic typography build confidence.

AA
WCAG 2.1

Accessibility First

Clear focus states, sufficient contrast ratios, and readable type sizes. The blue accent (#4B90FF) meets WCAG AA standards.

--color-primary
--space-medium
--radius-base

Systematic Consistency

Tokens over hardcoded values. Components over custom layouts. A design system that scales with your product.