Foundations
Design tokens
HSL color tokens defined in index.css. Always reference these via Tailwind classes — never hard-code colors.
--background--foreground--primary--secondary--accent--accent-pale--muted--highlight--success--warm--banner--destructiveFoundations
Typography
H1 · text-5xl font-bold
Care begins with clarity.
H2 · text-4xl font-bold
Section title
H3 · text-2xl font-semibold
Subsection title
Body · text-base
The quick brown fox jumps over the lazy dog. Our default body text uses Open Sans.
Muted · text-sm text-muted-foreground
Supporting copy and captions appear in muted tone.
Primitives
Forms & inputs
Text input
Checkbox
Primitives
Feedback
Alert
Heads up
Progress
Badges
Primitives
Data display
Card
Card title
Short description
Avatar
Section components
Reusable building blocks
Drop-in, prop-driven sections used across marketing pages.
SectionHeader
Standardized eyebrow / title / description block.
Why MediSprout
Care begins with clarity
One platform that connects everyone in the care journey.
HeroBlock
Configurable hero with optional media slot and 1–2 CTAs.
CTABlock
Banner-style CTA. Tones: primary, muted, card.
Ready to simplify your practice?
Join the therapists already using MediSprout.
FeatureGrid
Responsive 2/3/4 column grid of icon + title + description.
Secure
HIPAA-aligned data handling end-to-end.
Fast
Built for speed at every step of care.
Connected
Care teams stay in sync, automatically.
StatCard
Therapists who renew.
TestimonialCard
“MediSprout changed how we deliver care. Everything our team needs lives in one place.”
“Onboarding was effortless. Within a week our intake flow felt brand new.”
PillarCard
Larger emphasis card for product pillars / value props. Tones: primary, secondary, warm, success.
Empathy first
Designed with care teams.
Secure
HIPAA-aligned at every layer.
On time
Smart scheduling built-in.
Effortless
Less admin, more care.