Da Zero a Sistema: Come Abbiamo Costruito l'Identità Visiva e il Sito di Sintelops

Quando iniziai a lavorare su Sintelops, c'era un brief chiaro: costruire la presenza digitale di una società di intelligenza artificiale che doveva sembrare credibile a livello enterprise, ma non fredda. Tecnica, ma non distante. Ambiziosa, ma non arrogante.

Il risultato è un design system completo e un sito multilingua live su sintelops.vercel.app.

Il punto di partenza: perché Stripe come riferimento

La prima decisione — quella che ha condizionato tutto il resto — è stata scegliere Stripe come riferimento visivo, non come copia.

Stripe ha risolto un problema che chiunque lavori nel tech B2B conosce: come fare sembrare qualcosa di complesso e tecnico anche accessibile e premium. Il loro sistema usa un viola saturo (#533afd) che non è il viola enterprise — non è il viola di una presentazione PowerPoint aziendale. È un viola che legge come fiducia e velocità allo stesso tempo.

Ho preso questa intuizione e l'ho portata in un contesto differente. Per Sintelops, lo stesso viola diventa l'ancora del sistema cromatico: gli accent, i bordi interattivi, i gradienti nei componenti hero. Su sfondo scuro profondo (#030318), diventa quasi luminescente.

Il typography system

La scelta del font ha richiesto più tempo della palette.

Il problema con la maggior parte dei siti tech è che usano font che sembrano font da sito tech — Roboto, Inter, il solito sans-serif geometrico che non dice nulla. Volevo qualcosa con più personalità ma abbastanza neutro da non interferire con i contenuti.

Ho scelto DM Sans a peso 300 come firma del sistema. È una scelta controcorrente: la maggior parte dei designer userebbe 400 o 500 per i body text, e Bold per i titoli. Qui tutto vive nel sottile. I titoli grandi a weight 300 con letter-spacing negativo creano quella sensazione di autorità silenziosa — non devono urlare perché sanno di avere ragione.

Letter-spacing: -3.5px sui display, progressivamente rilassato verso i body text. Tabular numerals per i dati. La stessa logica di sistema che Stripe usa con il suo sohne-var, applicata a un font open source.

L'architettura del sito

Il sito è strutturato in sezioni chiave:

Homepage — Hero con headline animata, marquee dei servizi, sezioni di valore con gradient mesh sullo sfondo. L'obiettivo era creare profondità senza distrarre.

Servizi — Quattro aree di intervento presentate come card con hover state, ognuna con il suo contesto e le sue applicazioni pratiche.

Insights/Blog — Contenuto tecnico che posiziona Sintelops come thought leader nel campo AI. Ogni articolo ha il suo artwork generato specificamente per il progetto.

Chi siamo e Contatti — Tono più diretto, meno corporate. Il copy lavora sulla differenza tra "consultancy generica" e "team specializzato".

Multilingua — Il sito è disponibile in italiano e inglese con un sistema di routing custom (lang-router.js) che gestisce la navigazione tra versioni senza ricaricare la pagina.

Il sistema delle animazioni

Una cosa che volevo evitare erano le animazioni da portfolio designer: elementi che volano da ogni direzione, transizioni esagerate, effetti che guardano a sé stessi.

Il sistema di reveal si basa su IntersectionObserver: gli elementi entrano con una transizione di opacità e traslazione verticale minima (24px). Il timing è sfalsato con classi delay-* per creare un senso di progressione naturale. La homepage ha un orb gradient animato in background — non è un elemento decorativo casuale, è ciò che dà profondità e scala alla sezione hero senza richiedere immagini pesanti.

Cosa ho imparato

Due cose principali.

La prima: il design system viene prima del sito. Ho passato più tempo a definire token, variabili CSS, componenti riutilizzabili che a costruire le pagine effettive. Questo ha reso il progetto molto più veloce nella fase di sviluppo — ogni nuova sezione era già la somma di pezzi che funzionavano.

La seconda: il copy è design. La parte più difficile del progetto non è stata scrivere il CSS o costruire i componenti. È stata trovare il tono giusto — tecnico senza essere freddo, ambizioso senza sembrare irrealistico. Il design può attrarre, ma è il copy che convince.

Il risultato

Il sito è live, indicizzato, con versione italiana e inglese. Il design system è documentato e può essere esteso facilmente per nuove sezioni o prodotti.

La cosa che mi soddisfa di più guardandolo oggi non è la singola pagina o il singolo componente — è la coerenza. Dal font al colore al tono di voce, tutto racconta la stessa storia.

Puoi vederlo su sintelops.vercel.app.