Design Style Guide

Unified visual system for wellness‑focused care. Built for clarity and accessibility.

Color Palette

Defined in CSS variables for consistent usage

Primary Blue
#0f766e
Secondary Green
#2e7d32
Dark Blue
#0b4f4a
Secondary Teal
#14b8a6
Accent Green
#22c55e
Emergency Red
#b91c1c
Light Blue
#d9f2ee
Light Gray
#f7fafc

Typography

Readable defaults using Inter font family

Headings

Use semantic headings with clear hierarchy.

H1 Heading

H2 Heading

H3 Heading

Body

Base size: 16px. Line height: 1.6. Maintain adequate contrast on all backgrounds.

Muted text for supportive information.

Components

Buttons and cards follow accessible color contrast

Card Title

Card content with readable text and adequate spacing.

Action

Card Title

Another example card using secondary accents.

Action

Hero Components

Layout, typography, and actions for the homepage hero

Trusted Healthcare in La Habra

Expert Healthcare for Your Health & Wellness

Comprehensive medical and wellness services with a patient‑first approach.

Find a Doctor Book Appointment
Care team
Focus state: buttons use visible outlines; hero image scales subtly on hover.

Accessibility

Adheres to WCAG 2.2 AA: keyboard navigation, focus outlines, and minimum contrast ratios. Avoid placing text directly on busy imagery.