CardioSync AI - Heart Health Chatbot
A modern health-tech and AI dashboard style featuring a warm red and orange color palette, 'Plus Jakarta Sans' typography, and a soft, clean glassmorphism-inspired aesthetic. The design uses rounded containers (up to 40px), subtle gradients, and a clear sidebar-to-content hierarchy. Suitable for medical SaaS, fitness tracking, fintech, and personalized AI assistants where trust and clarity are paramount. Highlights include bento-grid suggested actions, a pill-shaped bottom-anchored input bar, and high-contrast status tags.
Summary
CardioSync is a heart-health focused chatbot interface utilizing a soft-red primary theme with a sidebar-based layout, floating action cards, and a robust input area designed for desktop and mobile accessibility.
Style
The style is characterized by a mix of 'Plus Jakarta Sans' (weights 300-700), a primary red-to-orange gradient (#ef4444 to #f97316), and a background of soft off-white gradients. It employs rounded corners (40px for main containers, 28px for inputs), 10px backdrop blurs (glassmorphism), and subtle 1px borders with 20% opacity. Animations are gentle, primarily using a 0.6s fadeIn with a 10px vertical shift.
Layout & Structure
A classic dashboard layout with a fixed-width sidebar (288px) and a fluid main content area. The main area is divided into a top utility header, a central conversational display (max-width 3xl), and a bottom-anchored input field (max-width 4xl).
Sidebar
Top Header
Hero Chat Section
Input Footer
Components
Suggested Action Cards
Interactive cards that highlight primary user actions with distinct color themes.
Pro Upgrade Widget
Sidebar promotional component with a high-contrast badge.
Special Notes
MUST use Plus Jakarta Sans for all text to maintain the clean look. MUST NOT use hard black (#000000); use Slate-800 (#1e293b) for text. All interactive elements MUST have a transition duration of at least 200ms. Corner radii MUST be consistent (40px for large, 12px for small).