Flow Docs

brand-identity

10 min read

Flow - Brand Identity & Design System

Version: 2.0.0 Last Updated: March 10, 2026 Status: Active Owner: Product & Design Team

Brand Vision

“Vivi il momento. Trova il tuo Flow.”

Live the moment. Find your Flow.

Flow è dove le connessioni autentiche nascono attraverso esperienze condivise. Non siamo solo un’app per eventi—siamo il tessuto sociale che unisce le comunità.

Brand Essence

Flow è quell’energia che senti quando sei completamente presente, connesso, vivo. È quel momento magico quando tutto fluisce naturalmente—le persone giuste, al posto giusto, al momento giusto.

Siamo l’anti-FOMO. Non ti bombardiamo con mille opzioni. Ti aiutiamo a trovare il tuo flow—le esperienze autentiche che risuonano con chi sei veramente.

Brand Personality

Core Attributes

🔥 Autentico

  • Esperienze vere, connessioni genuine
  • Niente metriche false
  • Comunità costruite con cura

⚡ Energico

  • Dinamico, veloce, responsivo
  • Scoperta di eventi emozionante
  • Energia sociale vibrante

🤝 Social-First

  • Le persone prima degli eventi
  • Guidato dalla community
  • Esperienza centrata sugli amici

🎨 Giocoso

  • Divertente, coinvolgente, gamificato
  • Colorato e gioioso
  • Pianificare è facile ed emozionante

🔒 Affidabile

  • Privacy al primo posto
  • Performance costante
  • Trasparenza sui dati

Visual Identity

Color Palette

Primary Color - Electric Coral 🔥

Brand Primary

--primary-brand: #FF5E57

HEX: FF5E57 RGB: 255, 94, 87 Name: Electric Coral

Il battito cardiaco di Flow. Audace, caldo, invitante. Come un tramonto, una risata, una connessione.

Use for:

  • Primary CTAs (“Inizia Ora”, “Partecipa”)
  • Brand moments
  • Energy highlights
  • Event cards (featured)

Hover State

--primary-brand-hover: #FF4757

HEX: FF4757 RGB: 255, 71, 87

Deeper coral for interactive states

Accessible Dark

--primary-brand-dark: #D93636

HEX: D93636 RGB: 217, 54, 54 WCAG: AA Compliant (4.5:1)

For text on light backgrounds

Secondary Colors

Action Blue - Navigation & Trust

--action-blue: #1E90FF

HEX: 1E90FF (Dodger Blue) RGB: 30, 144, 255

Use for:

  • Links and navigation
  • Information badges
  • Social features (messages, friends)
  • Secondary actions

Success Green - Positive Feedback

--success-green: #2ED573

HEX: 2ED573 RGB: 46, 213, 115

Use for:

  • “Sto andando” badges
  • Success confirmations
  • Achievements unlocked
  • Positive notifications

Warning Yellow - Attention

--warning-yellow: #FFA502

HEX: FFA502 RGB: 255, 165, 2

Use for:

  • Time-sensitive alerts
  • Limited capacity
  • Important notices

Surface Colors

Background - Pure White

--background: #FFFFFF

Clean, minimal. Letting content and coral shine.

Card Background - Subtle Gray

--card-bg: #F5F5F7

Soft surface for cards, sections, bento grid.

Foreground Text

--foreground: #374151

Gray-700. Accessible, readable, modern.

Dark Mode

Surface Carbon

--surface-carbon: #121212

Deep, rich background.

Surface Highest

--surface-highest: #2C2C2C

Raised surfaces and cards in dark mode.

Color Philosophy

Bold but not aggressive. Energetic but not exhausting.

Electric Coral è caldo e umano—si sente come un tramonto, una risata, una connessione. Si distingue senza urlare.

Il nostro palette è minimal con un pop di energia. Bianco pulito, grigio sottile, e poi BAM—coral che cattura l’attenzione.

Typography

Primary Font: Inter

Google Fonts: Inter

Why Inter:

  • Pulito, moderno, altamente leggibile
  • Eccellente per elementi UI
  • Variable font per performance
  • Open source

Weights:

font-weight: 400; /* Regular - Body text */
font-weight: 500; /* Medium - Emphasized */
font-weight: 600; /* Semibold - Subheadings */
font-weight: 700; /* Bold - Headings */
font-weight: 800; /* Extrabold - Display titles */

Usage:

  • Headers: 700-800 weight
  • Body text: 400 weight
  • Buttons: 700 weight
  • UI elements: 500-600 weight

Display Font: System Sans

For maximum performance and native feel:

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;

Benefits:

  • Zero download time
  • Native look on each OS
  • Perfect accessibility

Typography Scale

/* Display - Hero sections */
font-size: 4rem;    /* 64px */
line-height: 1.1;
 
/* H1 - Page titles */
font-size: 3rem;    /* 48px */
line-height: 1.2;
 
/* H2 - Section titles */
font-size: 2.25rem; /* 36px */
line-height: 1.3;
 
/* H3 - Card titles */
font-size: 1.5rem;  /* 24px */
line-height: 1.4;
 
/* Body Large */
font-size: 1.25rem; /* 20px */
line-height: 1.6;
 
/* Body */
font-size: 1rem;    /* 16px */
line-height: 1.5;
 
/* Small */
font-size: 0.875rem; /* 14px */
line-height: 1.4;

Logo & Brand Mark

Logo Variations

  1. Full Logo - Coral wordmark “Flow”
  2. Icon Only - Stylized “F” wave
  3. Monochrome - White or black versions

Clear Space

Maintain clear space equal to the height of the logo on all sides.

Minimum Sizes

  • Digital: 24px height (icon), 100px width (full)
  • Print: 0.5 inch height

DO:

  • ✅ Use on white or dark backgrounds
  • ✅ Maintain clear space
  • ✅ Use official files

DON’T:

  • ❌ Stretch or distort
  • ❌ Change colors (except monochrome versions)
  • ❌ Add effects or shadows

Iconography

Style:

  • Rounded corners (4px radius on 24px icons)
  • 2px stroke weight
  • Simple, recognizable
  • Consistent perspective

Icon Library:

  • Heroicons (primary) - Clean, modern
  • Phosphor Icons (alternative) - More variety
  • Custom icons match rounded, friendly style

Icon Sizes:

16px - Inline text icons
20px - Small UI elements
24px - Standard buttons, nav
32px - Feature highlights
48px+ - Hero sections, illustrations

Visual Elements

Cards & Containers

Border Radius:

border-radius: 1rem;   /* 16px - Standard cards */
border-radius: 1.5rem; /* 24px - Large cards */
border-radius: 9999px; /* Full - Buttons, badges */

Shadows:

/* Subtle - Default cards */
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
 
/* Medium - Hover states */
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
 
/* Large - Modals, important elements */
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);

Borders:

border: 1px solid #E5E7EB; /* Gray-200 */

Bento Grid Layout

Our signature layout style (seen on landing page):

┌─────────────┬─────┐
│             │     │
│   Large     │ Tall│
│             │     │
├──────┬──────┤     │
│Small │Small │     │
└──────┴──────┴─────┘

Characteristics:

  • Mixed card sizes
  • Rounded corners (24px)
  • Subtle shadows
  • Hover effects (scale 1.02, shadow lift)
  • Emoji or illustrations as visual anchors

Imagery

Photography Style

Authentic moments over staged perfection:

  • Candid, spontaneous
  • People-focused (faces, emotions)
  • Vibrant but natural colors
  • Good lighting (golden hour vibes)
  • Diverse and inclusive

DON’T:

  • ❌ Stock photos that look fake
  • ❌ Overly filtered or edited
  • ❌ Empty venues without people
  • ❌ Dark, moody, or melancholic

DO:

  • ✅ Real events with real people
  • ✅ Joyful, connected moments
  • ✅ Movement and energy
  • ✅ Authentic smiles and laughter

Emoji Usage 🎉

We use emoji liberally and intentionally:

Feature Cards:

  • 💬 Messaggistica
  • 🏆 Gamification
  • 🎫 Ticket
  • 🎉 Eventi
  • ❓ Solo Mode
  • 📍 Location

Size on cards: text-6xl to text-9xl

Animation:

transform: group-hover:scale-110;
transition: transform 0.3s;

Emoji give personality without illustrations. They’re universal, expressive, and load instantly.

Voice & Tone

Brand Voice

Italiano autentico, moderno, friendly.

We speak like your cool friend who always knows what’s happening—not a corporate robot.

Tone Examples

Landing Page

✅ “Vivi il momento. Trova il tuo Flow.” Direct, emotional, aspirational.

✅ “Tutto il tuo mondo, in un’unica app.” Bold claim, simply stated.

✅ “Pronto a tuffarti?” Playful, inviting, action-oriented.

Features

✅ “Messaggistica in Tempo Reale” Clear, benefit-focused.

✅ “Solo Mode - Riding Solo? Find your crew.” Mix of Italian/English (Gen Z authentic), empathetic.

✅ “Guadagna punti partecipando agli eventi.” Simple, direct explanation.

CTAs (Call to Action)

Primary Actions:

  • “Inizia Ora”
  • “Partecipa”
  • “Scopri di Più”
  • “Contatta il Team”

Secondary Actions:

  • “Scopri di Più”
  • “Vedi Tutti”
  • “Leggi di Più”

Messaging Principles

1. Conversational, not corporate ✅ “Scopri eventi vicino a te” ❌ “Utilizza la nostra piattaforma per identificare opportunità di networking nella tua area geografica”

2. Emotional, not transactional ✅ “Vivi il momento” ❌ “Accedi agli eventi”

3. Simple, not dumbed down ✅ “Messaggistica in tempo reale” ❌ “Chat super veloce wow!”

4. Inclusive, not exclusive ✅ “Riding Solo? Find your crew” ❌ “Join the elite social club”

Bilingual Approach

Primary: Italiano (Italian market) Secondary: English (international expansion)

Mix when it feels natural:

  • “Solo Mode” (English phrase, universally understood)
  • “Trova il tuo Flow” (Italian + English brand name)
  • Feature badges in English (Social, Gamification) for modern tech feel

This code-switching is authentic to how young Italians actually speak.

User Experience Principles

1. Delight in Every Tap

Micro-interactions everywhere:

transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

Examples:

  • Buttons scale slightly on hover (1.02)
  • Cards lift with shadow
  • Emoji rotate or scale on hover
  • Smooth page transitions

2. Bold First Impressions

Hero sections that stop the scroll:

  • Large, bold typography (64px+)
  • Minimal text, maximum impact
  • Eye-catching images
  • Strong CTAs (Electric Coral)

3. Bento Grid Everything

Our signature layout:

  • Mixed card sizes
  • Visual hierarchy through scale
  • Emoji as focal points
  • Hover states that invite exploration

4. Performance is UX

Fast by design:

  • System fonts (zero download)
  • Optimized images (WebP, lazy load)
  • Minimal JavaScript
  • Smooth 60fps animations

Gamification & Engagement

Point System

Guadagna punti:

  • 🎉 Partecipare a eventi: 10 punti
  • ✍️ Creare eventi: 25 punti
  • ⭐ Scrivere recensioni: 15 punti
  • 👥 Invitare amici: 20 punti (quando si uniscono)
  • ⚡ RSVP anticipato: 5 punti bonus

Badge System 🏆

Starter:

  • 🎉 Party Starter - Crea il tuo primo evento
  • 👥 Farfalla Sociale - Connetti con 10 amici
  • 🎯 Cacciatore di Eventi - Partecipa a 5 eventi
  • ⭐ Trendsetter - RSVP prima di 100 persone
  • 📍 Leggenda Locale - Eventi in 5 locali diversi

Advanced:

  • 🔥 In Fiamme - Streak di 10 eventi
  • 💎 VIP - 1000 punti karma
  • 🌟 Influencer - 50+ amici via tuoi inviti
  • 🎊 Animale da Festa - 50 eventi partecipati
  • 🏆 Curatore - 25 eventi creati

Levels & Rewards

Livelli:

  1. Novizio (0-100 punti)
  2. Esploratore (101-500) → Accesso anticipato eventi
  3. Regolare (501-1500) → Eventi privati
  4. VIP (1501-5000) → Featured placement
  5. Leggenda (5000+) → Eventi esclusivi, badge speciale

Viral Growth Mechanics

1. Referral Program

Invita un amico:

  • Chi invita: 20 punti + 1 mese Premium gratis
  • Invitato: 50 punti bonus benvenuto
  • Entrambi: Badge “Amicizia”

2. Shareable Moments

Auto-generate graphics:

  • Check-in agli eventi (custom card)
  • Badge sbloccati (share on Instagram)
  • Recap annuale (Spotify Wrapped style)
  • Foto di gruppo

Share cards include:

  • Flow branding (subtle watermark)
  • Event details
  • “Join me on Flow” CTA
  • Beautiful design (Electric Coral accents)

3. Network Effects

Value increases with friends:

  • Vedi cosa fanno i tuoi amici
  • Pianificazione di gruppo
  • Split dei costi
  • Collaborative wishlist

Accessibility

WCAG 2.1 AA Compliance

Color Contrast:

  • Primary Coral (#D93636) on white: 4.52:1 ✅
  • Body text (#374151) on white: 10.67:1 ✅
  • All interactive elements: minimum 3:1

Keyboard Navigation:

  • Logical tab order
  • Visible focus indicators (Electric Coral outline)
  • Skip links

Screen Readers:

  • Semantic HTML5
  • ARIA labels where needed
  • Alt text for images
  • Emoji with aria-hidden=“true”

Responsive:

  • Supports zoom up to 200%
  • Minimum 16px font size
  • Touch targets minimum 44x44px

Platform-Specific

Mobile App (Flutter)

Material Design 3:

  • Dynamic color from Electric Coral
  • Rounded corners everywhere
  • Smooth transitions (300ms)
  • Bottom nav (not top)

iOS vs Android:

  • Respect platform conventions
  • Native feel (SF Pro on iOS, Roboto/Inter on Android)
  • Platform-appropriate gestures

Web (Admin Portal)

Modern Web:

  • Tailwind CSS 4
  • Next.js 16 (App Router)
  • Responsive (mobile-first)
  • Fast load (<2s)

Quick Reference Card

Do’s ✅

  • Use Electric Coral boldly for CTAs
  • Round corners (16-24px)
  • Smooth animations (200-300ms)
  • Mix Italian/English naturally
  • Use emoji liberally
  • Make it fast
  • Be authentic

Don’ts ❌

  • Don’t use gradients (we’re flat + coral)
  • Don’t be corporate or stiff
  • Don’t spam notifications
  • Don’t use stock photos
  • Don’t sacrifice speed
  • Don’t copy other apps

Color Quick Ref

/* Primary */
--primary-brand: #FF5E57;       /* Electric Coral */
--primary-brand-hover: #FF4757;  /* Deeper Coral */
--primary-brand-dark: #D93636;   /* Accessible */
 
/* Secondary */
--action-blue: #1E90FF;          /* Navigation */
--success-green: #2ED573;        /* Success */
--warning-yellow: #FFA502;       /* Alerts */
 
/* Surfaces */
--background: #FFFFFF;           /* Base */
--card-bg: #F5F5F7;             /* Cards */
--foreground: #374151;           /* Text */

Resources

Design Files:

  • Landing page: /admin-portal/app/page.tsx
  • Global styles: /admin-portal/app/globals.css
  • Components: /admin-portal/components/landing/

Fonts:

Icons:

Next Review: June 10, 2026 Maintained by: Product & Design Team

“Vivi il momento. Trova il tuo Flow.” 🔥

Graph View

Backlinks