Update application design with a modern and simple theme

Define design guidelines including color palette, typography, layout system, and component library for a modern SaaS dashboard look.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/Ob3gzfQ

design_guidelines.md

@@ -0,0 +1,155 @@
+# Social Flow - Design Guidelines
+
+## Design Approach
+
+**Selected Framework:** Design System Approach inspired by modern SaaS dashboards (Linear, Buffer, Notion) with Material Design principles for data-rich interfaces.
+
+**Core Philosophy:** Professional productivity tool prioritizing clarity, efficiency, and visual hierarchy in dark mode with sophisticated blue/purple branding.
+
+## Color Palette
+
+**Dark Mode (Primary Theme):**
+- Background Base: 222 20% 8%
+- Surface Elevated: 222 18% 12%
+- Surface Card: 222 16% 15%
+- Border Subtle: 222 12% 20%
+
+**Brand Colors:**
+- Primary Blue: 215 85% 58%
+- Primary Purple: 265 75% 62%
+- Gradient Accent: Linear gradient from Primary Blue to Primary Purple
+
+**Functional Colors:**
+- Success Green: 142 76% 48%
+- Warning Orange: 35 95% 58%
+- Error Red: 0 85% 62%
+- Info Cyan: 195 85% 55%
+
+**Text Hierarchy:**
+- Primary Text: 0 0% 95%
+- Secondary Text: 222 10% 65%
+- Tertiary Text: 222 8% 48%
+
+## Typography
+
+**Font Family:**
+- Primary: 'Inter' from Google Fonts (400, 500, 600, 700)
+- Monospace: 'JetBrains Mono' for timestamps and metrics
+
+**Scale:**
+- Headings H1: text-3xl font-semibold
+- Headings H2: text-2xl font-semibold
+- Headings H3: text-xl font-medium
+- Body Large: text-base
+- Body: text-sm
+- Captions: text-xs text-secondary
+
+## Layout System
+
+**Spacing Primitives:** Tailwind units of 2, 4, 6, 8, 12, 16 (e.g., p-4, gap-6, mt-8)
+
+**Grid Structure:**
+- Sidebar: Fixed width 280px (w-70) on desktop, collapsible on mobile
+- Main Content: Flexible with max-w-7xl container
+- Dashboard Grid: grid-cols-1 md:grid-cols-2 lg:grid-cols-3 with gap-6
+
+**Container Widths:**
+- Dashboard sections: max-w-7xl with px-6 to px-8
+- Form containers: max-w-2xl
+- Content cards: Full width within grid columns
+
+## Component Library
+
+### Sidebar Navigation
+- Dark surface (Background Base) with subtle border-right
+- Logo + app name at top (h-16)
+- Navigation items with icons (Heroicons) + labels
+- Active state: Primary gradient background with 12% opacity, blue text
+- Hover: Surface Elevated background
+- Bottom section: User profile card with avatar, name, settings icon
+- Spacing: py-2 between items, px-4 horizontal padding
+
+### Dashboard Cards
+- Background: Surface Card with rounded-xl
+- Border: 1px solid Border Subtle
+- Shadow: Soft shadow (shadow-lg with low opacity)
+- Padding: p-6
+- Header: Flex justify-between with title (text-lg font-semibold) + action button
+- Content spacing: space-y-4 internally
+
+### Post Scheduling Interface
+- Calendar view: Week/month grid with date cells
+- Post cards: Compact cards showing thumbnail + caption preview + platform badges (FB/IG)
+- Drag-and-drop visual indicators
+- Time slots: Hourly breakdown with scheduled posts
+
+### Analytics Cards
+- Metric cards: Large number (text-3xl font-bold) + label + trend indicator
+- Charts: Use Chart.js with gradient fills matching brand colors
+- Grid layout for KPIs: 4 columns on desktop, responsive down
+
+### Forms & Inputs
+- Input fields: Surface Elevated background, border Border Subtle, rounded-lg, px-4 py-3
+- Focus state: Primary Blue border, subtle glow
+- Labels: text-sm font-medium mb-2, Secondary Text color
+- Textarea: min-h-32 for post composition
+- File upload: Dashed border drop zone with center icon and text
+
+### Buttons
+- Primary: Gradient background (blue to purple), text-white, rounded-lg, px-6 py-3, font-medium
+- Secondary: Border Primary Blue, text Primary Blue, transparent background
+- Ghost: Transparent, hover Surface Elevated
+- Icon buttons: w-10 h-10, rounded-lg, center content
+
+### Platform Badges
+- Small pills (px-3 py-1, rounded-full, text-xs font-medium)
+- Facebook: Blue background (215 85% 58% with 15% opacity), blue text
+- Instagram: Purple background (265 75% 62% with 15% opacity), purple text
+
+### Status Indicators
+- Dots with colors: w-2 h-2 rounded-full
+- Scheduled: Primary Blue
+- Published: Success Green
+- Failed: Error Red
+- Draft: Tertiary Text
+
+### Data Tables
+- Header row: Surface Elevated background, font-medium, uppercase text-xs
+- Rows: Border-bottom subtle, hover Surface Card
+- Padding: px-6 py-4
+- Alternating backgrounds for better readability
+
+## Animations
+
+**Minimal & Purposeful:**
+- Page transitions: Fade-in only (150ms)
+- Card hover: Subtle lift (translateY -2px, 200ms)
+- Button interactions: Scale 0.98 on active
+- Navigation: Smooth color transitions (200ms)
+- No distracting scroll animations or complex effects
+
+## Images
+
+**Hero Section:** None - Dashboard-first interface prioritizing immediate utility
+
+**Avatar & Thumbnails:**
+- User avatars: w-10 h-10, rounded-full with border
+- Post thumbnails: aspect-video, rounded-lg, object-cover
+- Platform logos: Use official brand SVGs at 20x20 or 24x24
+
+**Empty States:**
+- Illustration placeholders for "No posts scheduled", "No analytics data"
+- Center aligned with icon, heading, and CTA button
+- Subtle grayscale illustrations maintaining professional tone
+
+## Key Screens Layout
+
+**Dashboard:** 3-column grid with Overview metrics (top row), Recent Posts card, Upcoming Schedule card, Quick Analytics
+
+**Calendrier:** Full-width calendar component, left sidebar filter (platforms, status), right panel for selected post details
+
+**Nouvelle Publication:** Center form (max-w-2xl), left preview panel showing platform-specific mockups, sticky publish/schedule buttons
+
+**Analytiques:** Metric cards grid (4 cols), followed by full-width charts for engagement over time, best posting times heatmap
+
+**Paramètres:** Two-column layout, left navigation tabs, right content panels