Socialflow/design_guidelines.md

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