Design System

MealPal uses an Oura-inspired glassmorphism design system — frosted glass surfaces, subtle gradients, and soft shadows.

Core Principles

• Frosted glass — semi-transparent backgrounds with backdrop blur
• Warm neutrals — earth-toned palette centered on #4A4238
• Soft depth — layered surfaces with subtle shadows
• Smooth motion — gentle transitions and micro-animations

CSS Variables

All design tokens are defined in frontend/src/index.css:

--glass-bg: rgba(255, 255, 255, 0.7);
--glass-border: rgba(255, 255, 255, 0.3);
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
--backdrop-blur: blur(20px);

Component Patterns

Glass Card

background: var(--glass-bg);
backdrop-filter: var(--backdrop-blur);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
border-radius: var(--radius-lg);

Chat Messages

• User messages — right-aligned with accent gradient background
• Assistant messages — left-aligned with white glass background
• Streaming — animated typing cursor with thinking indicator