Flow Docs

design-system-v2

3 min read

Branch: feat/design-system-v2 Status: DEFERRED — decided 2026-06-23. All 5 screens this branch touched were re-designed later in the editorial rollup (auth screens 2026-05-20, profile/wallet icon migration 2026-05-05), so merging would regress newer work. If a specific visual idea is wanted (e.g. gradient profile cover), cherry-pick into a fresh branch. See 2026-06-23-develop-editorial-redesign-handoff. Date: 2026-04-28 (original)

Design Philosophy

Thermal Editorial — white canvas, coral (#FF5E57) as single decisive accent, Inter 900 headlines.

Source: flow-design-system Claude Design export at design/flow-design-system/.

Token Mapping (JSX → Flutter)

CSS / JSXFlutter
#FF5E57AppTheme.electricCoral
#121212AppTheme.inkBlack
#18181B (fg1)AppTheme.textPrimary
#52525B (fg2)AppTheme.textSecondary
#9E9E9E (fg3)AppTheme.textMuted
#E4E4E7 (divLight)AppTheme.dividerLight
borderRadius:14 buttonsAppTheme.radius14
borderRadius:24 hero cardsAppTheme.radius24
fontSize:32/900/-0.04em titlesTextStyle(fontSize:32, fontWeight:w900, letterSpacing:-1.28)

Changes per Screen

EventDiscoveryScreen (lib/features/events/screens/event_discovery_screen.dart)

Editorial headline:

Text('Cosa fai', style: TextStyle(fontSize: 36, fontWeight: w900, color: AppTheme.inkBlack))
Text('stasera?', style: TextStyle(fontSize: 36, fontWeight: w900, color: AppTheme.electricCoral))

Vibe chips — ink active, transparent inactive (NO multicolor):

AnimatedContainer(
  color: active ? AppTheme.inkBlack : Colors.transparent,
  // border: active ? none : 1px dividerLight
)

HeroEventCard — 440px full-bleed:

  • ClipRRect(borderRadius: 24)
  • 4-stop gradient overlay: 0.35 dark → transparent → transparent → 0.85 dark
  • Top row: ”● LIVE STASERA” coral pill + price pill
  • Bottom: UPPERCASE vibe/when label, 32px/900 title, stats row with _HeroStat + _AvatarStack

Private widgets: _HeroEventCard, _SmallEventCard, _CrewCard, _HeroStat, _AvatarStack, _ToggleBtn, _IconBtn

Bug fixes: venueName → location.name, stats.goingCount → stats.attendeeCount

EventDetailScreen (lib/features/events/screens/event_details_screen.dart)

Hero — expanded to 420px:

  • 4-stop gradient overlay
  • Back/share/heart overlay via _HeroIconBtn (42×42, radius:14, white bg)
  • Bottom: ”● LIVE STASERA” + category badge + price pill, 30px/900 title

4-stat strip after hero:

Widget _buildStatsStrip(Event event) // Going / Crew / Hype / Karma
// Uses _DetailStat (fontSize:24/900/-0.04em) + _StatDivider
// Crew value in AppTheme.electricCoral (accent:true)

InfoRow pattern — unified card container:

  • 38×38 grey rounded icon box (Color(0xFFF4F4F5), radius:12)
  • Title: 14px/800, subtitle: 12px/500 gray
  • Dividers between rows (indent: 68 to align with text)

Lineup section:

  • Monospace time column (fontFamily: 'monospace', 54px wide)
  • Headliner name + time in AppTheme.electricCoral
  • “HEADLINER” badge (9px/800, letterSpacing:0.18, coral)

Bottom CTA bar (design-v2):

  • gradient: transparent → white (30% stop) as background
  • Left: “Da” label + price (24px/900)
  • Center: heart/favorite icon button (outline, radius:14)
  • Right: “Entra nel Flow →” coral button (radius:14, boxShadow: coral @ 0.35)

Private widgets added: _HeroIconBtn, _HeroBadge, _DetailStat, _StatDivider, _InfoRowData

ProfileScreen (lib/features/profile/screens/profile_screen.dart)

VibeScore hero block — replaces FlowScoreWidget:

class _VibeScoreBlock extends StatelessWidget {
  // Coral background (AppTheme.electricCoral)
  // Two decorative circles: border: 1.5px white @ 0.18 opacity
  // vibeScore = (karmaScore * 20).clamp(0-100)
  // 96px/900/-0.06em score number
  // 3-stat row: EVENTI / CREW / KARMA (all white on coral)
}

Why replaced: FlowScoreWidget used an XP progress bar which is gamification UI, not editorial/identity UI. The coral block makes the user’s social standing the visual centerpiece.

Architecture Decisions

  1. Private widgets per screen — _HeroEventCard, _VibeScoreBlock etc. are private to their screen files. This avoids breaking other screens that use MinimalEventCard.

  2. No new packages — All design effects use existing Flutter primitives (Stack, ClipRRect, LinearGradient, BoxDecoration).

  3. Backward compatible — All existing functionality (RSVP, ticket section, reviews, attendees list) is preserved. Only visual presentation changed.

  4. Localization preserved — All user-facing strings still use AppLocalizations.of(context)!.*. Design labels that don’t exist as keys (e.g. “LIVE STASERA”, “Going”) are kept in Italian/English inline as per the design spec.

Remaining Work

  • flutter analyze full project (currently passing on all 3 screens)
  • Visual QA at 390px viewport (mobile portrait)
  • Wire crew suggestions to real provider (currently static mock)
  • Consider _VibeScoreBlock extraction to shared/widgets/ if needed in public profile

Graph View