Selected System: Linear-inspired productivity design with Material Design data components
- Rationale: Professional planning tool requiring clean information hierarchy, efficient workflows, and data-dense displays
- Key Principles: Clarity over decoration, purposeful density, workflow efficiency, subtle depth
Font Stack: Inter (via Google Fonts CDN)
- Headings: 600 weight, tight letter-spacing (-0.02em)
- Body: 400 weight, relaxed line-height (1.6)
- Labels/Meta: 500 weight, 14px, uppercase tracking (0.05em)
- Code/Data: 'JetBrains Mono' for subreddit names, query strings
Scale:
- Page titles: text-3xl (30px)
- Section headers: text-xl (20px)
- Card titles: text-base (16px)
- Body text: text-sm (14px)
- Metadata: text-xs (12px)
Spacing Primitives: Consistent use of 2, 4, 6, 8, 12, 16, 20 units
- Component padding: p-4, p-6
- Section spacing: space-y-8, gap-6
- Card spacing: p-6
- Tight groupings: gap-2, gap-3
Container Strategy:
- App shell: Full viewport with fixed sidebar (w-64)
- Main content: max-w-7xl mx-auto px-6
- Modals/Drawers: max-w-2xl
- Forms: max-w-3xl
Navigation:
- Fixed left sidebar (256px) with company switcher at top
- Main sections: Dashboard, Calendar, Setup, Settings
- Active state: subtle left border accent (border-l-2)
- Icons: Heroicons (24px, stroke-width: 1.5)
Calendar Views:
Week Grid (Default):
- 7-column grid with equal widths
- Day headers: sticky top with date + day name
- Post cards: rounded-lg, border, p-4, min-h-32
- Card content: subreddit badge (top), persona avatar + name, post type tag, truncated title
- Hover: subtle elevation (shadow-md transition)
Kanban:
- 4 columns (Planned, Needs Review, Approved, Posted) with equal flex
- Column headers: uppercase, semibold, with count badge
- Draggable cards: same styling as grid, with drag handle icon
- Drop zones: dashed border on drag-over
Timeline:
- Vertical timeline with left date axis
- Post events: rounded cards with connecting line
- Comment sub-events: indented, smaller cards, dotted connector
- Time indicators: absolute positioned, text-xs
Detail Drawer:
- Slide from right, w-2/3 viewport, shadow-2xl
- Header: sticky with title, close button, action buttons
- Sections: bordered separator (border-b), py-6 spacing
- "Why this?" rationale: bg-muted rounded-lg p-4 with bullet points
- Comment timeline: nested flex with time offsets, avatar stack
Tables (Setup pages):
- Clean bordered table with hover row highlight
- Header: bg-muted, uppercase labels, text-xs
- Actions column: right-aligned icon buttons
- Empty states: centered with illustration placeholder + CTA
Forms:
- Label above input pattern, mb-6 spacing
- Input groups: space-y-4
- Multi-step forms: progress indicator at top
- Field arrays (personas, queries): card-based with add/remove buttons
- Validation: inline error text-sm below field
Badges/Tags:
- Pill shape: rounded-full px-3 py-1
- Persona badges: avatar thumbnail + name
- Subreddit: monospace font
- Post type: outlined variant
- Status: filled with appropriate semantic styling
Buttons:
- Primary: filled, medium height (h-10), px-6
- Secondary: outlined
- Ghost: text-only for tertiary actions
- Icon buttons: square (h-10 w-10), ghost variant
- Button groups: flex gap-2
Quality Score: Circular progress ring (0-100) with score in center Constraint Status: Icon + text list with checkmark/warning icons Week Overview: Compact stat cards showing posts/subreddits/personas distribution
Filters:
- Horizontal pill buttons for quick filters (persona, subreddit, type)
- Active state: filled background
- Search: full-width input with magnifying glass icon
Modals:
- Centered overlay with backdrop blur
- max-w-lg for confirmations, max-w-3xl for forms
- Smooth enter/exit transitions
Loading States:
- Skeleton screens for calendar generation
- Spinner for form submissions
- Progressive loading for timeline events
Login: Centered card (max-w-md), minimal with logo, email input, magic link button
Dashboard: Grid of company cards (3 columns on desktop), each showing recent activity preview
Setup Pages: Tabbed interface (Company Info, Personas, Subreddits, Queries) with tab content in consistent max-w-4xl container
Calendar: Full-height layout with view switcher (segmented control) top-right, filters below, calendar fills remaining height
- Desktop-first for this productivity tool
- Tablet (md): Sidebar collapses to icon-only
- Mobile: Hidden sidebar with hamburger menu, single column layouts, stack Kanban columns
- Focus rings: 2px offset ring
- Skip to content link
- ARIA labels on icon-only buttons
- Keyboard shortcuts for calendar navigation (document in tooltip)