Misty Wellness Features
A calming, organic feature grid for wellness and healthcare platforms.
Features
- Cream & sage palette — Light #faf9f6 background with #6b8f71 sage green accents
- Serif typography — Lora font for warm, approachable headings
- 6 feature cards — Icon, category badge, title, and description
- Gentle hover effects — Subtle shadow and border transitions
- Dark mode — Zinc-950 bg with emerald-700 accents for nighttime viewing
- Staggered animation — Cards fade in with sequential delays
- Responsive — 1-col mobile, 2-col tablet, 3-col desktop
Dependencies
@/components/vue-ui/badge — Category tags@/components/vue-ui/card — Feature card composition@/components/vue-ui/separator — Decorative dividerslucide-vue-next — Wellness-themed icons
Customization
- Features: Edit the
features array for your product capabilities
- Colors: Swap sage green (#6b8f71) for your brand accent
- Icons: Replace lucide icons with domain-specific alternatives
- Typography: Change Lora to another serif for different warmth
