Files

Deploy to Production / Build and Deploy (push) Successful in 12s

Details

feat: design system overhaul — sidebar, AI chats, settings, brainstorm, color cleanup

- Sidebar: dynamic brand-accent colors, brainstorm section restyled
- AI chat general: popup panel with expand/collapse, hides when contextual AI open
- AI chat contextual: tabs reordered (Actions first), X close button, height fix
- Settings: all tabs restyled, 6 new color presets (sage, terracotta, iron, etc.)
- Global color cleanup: emerald/orange hardcoded → brand-accent dynamic
- Brainstorm page: orange → brand-accent throughout
- PageEntry animation component added to key pages
- Floating AI button: bg-brand-accent instead of hardcoded black
- i18n: all 15 locales updated with new AI/billing keys
- Billing: freemium quota tracking, BYOK, stripe subscription scaffolding
- Admin: integrated into new design
- AGENTS.md + CLAUDE.md project rules added

2026-05-16 12:59:30 +00:00

2.2 KiB

Raw Blame History

Benefits of Three-Tier Architecture

Why this approach works

1. Prevents Overwhelming Specs

Before:

800-line monolithic file
Everything mixed together
Hard to find anything

After:

3 focused files (100-200 lines each)
Clear separation
Easy to navigate

2. Clean Handoffs

Visual Designer receives:

Components/ folder only
Clear visual specifications
Creates Figma components

Developer receives:

Features/ folder only
Clear business logic
Implements functionality

You maintain:

Pages/ folder
Design system integrity
Page-specific content

3. Nothing Gets Missed

Problem: Prototype missing leaderboard, week view wrong

Cause: Monolithic spec, developer overwhelmed

Solution:

Component file lists ALL visual elements
Feature file lists ALL interactions
Storyboard shows ALL states
Nothing gets missed

4. Easy to Update

Change request: "Add countdown timers"

Before (Code):

Regenerate code
Previous features break
2+ hours fixing

After (Spec):

Update Feature file (15 minutes)
Regenerate with full context
Everything works

5. Reusability

Same component, different pages:

Pages/02-calendar-page.md ──┐
Pages/05-dashboard.md ──────┼→ Components/calendar-widget.component.md
Pages/08-mobile-view.md ────┘         ↓
                                Features/calendar-logic.feature.md

Update Component or Feature once, all pages benefit.

6. Team Collaboration

UX Designers → Focus on Components/ (Figma specs)
Developers → Focus on Features/ (logic implementation)
Content Writers → Focus on Pages/ (translations)
Product Managers → Focus on Features/ (business rules)

Everyone works in parallel, no conflicts.

7. Design System Integrity

Page files reference components:

**Component:** button-primary.component.md

Ensures consistency across pages.

Easy to update design system globally.

ROI

Time saved per feature: 2 hours
Over 10 features: 20 hours
Over product lifecycle: 100+ hours

Quality improvement:

Zero missing features
Consistent design
Maintainable codebase

2.2 KiB Raw Blame History