Filosofia — Flowing Concrete
Flow vive su una contraddizione programmata: una curva liquida che scorre dentro un sistema costruito in cemento. La S-curva del logo non è un ornamento — è l’asse gravitazionale intorno al quale tutto il resto si organizza. Tipografia monumentale, blocchi di colore scolpiti, griglie che non tremano mai. Ma in mezzo a quella rigidità passa sempre una linea che fluisce: divisori a onda, gradienti che shiftano, un accento corallo che non sta mai fermo.
La tensione è il punto. Senza cemento la curva diventa puro decorativo; senza curva il cemento diventa istituzionale. Flow è la terza cosa: precisione che respira. Come un disco di Ryuichi Sakamoto suonato in una chiesa brutalista.
Ogni lavoro di design deve sembrare passato sotto mille mani, rifinito al millimetro, ossessionato dal dettaglio del micro-pixel e dal ritmo del macro-layout. Non ci sono scorciatoie. Non ci sono effetti “gratis”. Tutto ciò che appare deve avere una ragione per essere lì, e quella ragione deve essere difendibile a voce alta in una stanza di art director.
Tre regole non negoziabili:
- La curva è sacra. Il bezier
M 60 340 C 310 10, 700 590, 940 230è l’unica forma brand. Non si deforma, non si specchia senza motivo, non si sostituisce con “qualcosa di simile”. - Il corallo non sta mai fermo. Quando usato come accento, il corallo vibra — via shimmer, via glow, via transizione. È il segnale biologico del brand: se pulsa, è Flow.
- Il nero è ink, non assenza. Il nero di Flow (
#0D0D0D) è materico, profondo, mai piatto. Sulle superfici ink va sempre un glow radiale subtle per rompere la bi-dimensionalità.
Il Mark
Anatomia
- Bezier
M 60 340 C 310 10, 700 590, 940 230- Stroke
- 102px · linecap round
- ViewBox
- 1000 × 600 (aspect ~1.67)
- Colore
- Electric Coral
#FF5E57
Area di rispetto
Il mark ha un’area di rispetto pari all’altezza dello stroke (102 unit in viewBox, ~1× l’altezza del punto terminale in pixel reali). Nessun elemento grafico o testuale deve entrare in quell’area — nemmeno il testo di un lockup.
Usi vietati
- ❌ Ruotare la curva
- ❌ Specchiarla verticalmente (diventa “U”, non più “S”)
- ❌ Applicare outline, ombre, gradienti lungo il path
- ❌ Ridisegnare la curva “a mano” — sempre usare il bezier locked
- ❌ Usare il mark dentro paragrafi di testo come carattere decorativo
Palette
Primari
Stato
Gradient signature
Il gradient corallo→violet è la firma cromatica del brand. Usato solo su elementi che devono “cantare”: parole hero, sfondi Pro card, glow ambient nelle superfici ink.
Lockup
Versioni
Spacing
Il mark e il wordmark sono separati da uno spazio pari a ~60% dell’altezza del mark. Il wordmark è allineato alla baseline ottica della curva (non alla bbox geometrica).
Tipografia
Scala display
Body
Voce
Flow parla in italiano informale ma preciso. Evita l’inglese gratuito (usiamo “evento” non “event”, “onboarding” solo quando non c’è alternativa). Evita il corporate speak. Evita l’esclamazione facile.
"Porta l'ambiente su in 10 minuti."
Concreto, verbo d'azione, timebox chiaro."Discover a seamless onboarding journey!"
Vuoto, inglesismo, esclamazione."Dalla creazione al check-in, senza sbatti."
Parlato, leggero, zero retorica."Un'esperienza utente ottimizzata per la massima efficienza."
Generico, freddo, dice nulla.Superfici
Tre superfici canoniche. Ogni pagina appartiene a una (o le alterna in sezioni scandite):
| Superficie | Background | Usata per |
|---|---|---|
| Warm Canvas | #FBF7F0 | Marketing principale, contenuto editoriale, card con ombra calda |
| Ink | #0D0D0D con glow radial | Hero drammatici, footer, repo strip, auth surfaces |
| Paper | #FFFFFF | Card su warm canvas, modal, form interni |
Il passaggio tra Warm Canvas e Ink non è mai una linea retta — è sempre il bezier del mark che taglia le due zone (vedi WaveDivider). Questa è la regola che rende il brand riconoscibile anche quando il logo non è in frame.
Riferimenti
- Brand Identity completa (v2.0) — attributi, voice extended, gamification tone
- Vision & Mission
- Implementazione web:
flow_backend/web/components/marketing/WaveDivider.tsx - Implementazione mobile:
flow_mobile/lib/ui/branding/flow_mark.dart
Un pensiero di congedo
Tutto quello che è qui dentro si può copiare in un’ora. Quello che non si copia è la disciplina con cui lo si applica. Ogni volta che uno screen di Flow viene disegnato, la domanda non è “è bello?” ma “è Flow?“. Se la risposta non è un sì immediato e fisico, allora il lavoro non è finito.