GG'APP Service Provider Dashboard
A professional healthcare service provider dashboard with a focus on emerald and sky blue aesthetics. It features a clean, data-driven layout with high-readability typography, suitable for medical practices, fintech dashboards, or SaaS admin panels. Key elements include a sticky glassmorphism header, highly rounded bento-style cards, and a sophisticated sidebar navigation with status indicators.
Summary
A clean, modern healthcare provider dashboard utilizing an emerald (#059669) and sky blue (#0284c7) color palette. The interface balances high-density data (payments, schedules, patient records) with airy whitespace and smooth micro-interactions like vertical card translations on hover. It uses high border-radii (up to 32px) and a dual-font system (General Sans and Satoshi) to convey professional authority and modern accessibility.
Style
The design follows a professional 'Med-Tech' aesthetic. It pairs 'General Sans' for headings/numbers with 'Satoshi' for body copy. Primary colors are Emerald 600 (#059669) for success and verification, and Sky Blue 600 (#0284c7) for secondary emphasis. The background is a crisp Slate-50 (#F8FAFC). Components feature 32px corner radii, 1px slate-200 borders, and subtle shadow-sm. Transitions are smooth (0.3s ease) with slight lift-up effects on interactive elements.
Layout & Structure
A classic two-column dashboard layout featuring a fixed 256px sidebar and a fluid main content area with a 1280px max-width container. The content is organized into a top-row stats grid followed by a two-column main section (70/30 split) for list-based data and widgets.
Sidebar Navigation
Sticky Header
Stats Grid
Data Lists & Tables
Side Widgets
Components
Status-Timeline Item
A specialized list item for schedules with color-coded vertical markers.
Glassmorphism Header
Sticky top navigation with blur effect.
Bento Stat Card
Information card with high corner radius and internal decorative elements.
Special Notes
Must use 'General Sans' for all numerical values to ensure high legibility. Ensure all interactive cards have the 4px vertical lift on hover. Do not use border-radius less than 12px for any button or 32px for any main container. Use 'emerald-600' strictly for success/verified states and 'sky-600' for informational/new states.