Webeet — Design System v1.0

Ogni prodotto digitale che costruiamo inizia con lo stesso problema: come garantire coerenza visiva nel tempo, su componenti scritti in momenti diversi, da persone diverse, su prodotti che evolvono? La risposta non è un file di stili: è un sistema. Il Webeet Design System v1.0 è la risposta che abbiamo costruito per noi stessi, e che ora alimenta questo sito.

Il punto di partenza è stato il design del nuovo webeet.it: un sito che doveva comunicare identità di studio, non template. Volevamo qualcosa di riconoscibile, con una personalità tipografica forte, un sistema di colori coerente e animazioni che avessero logica, non solo effetto. Prima di scrivere un componente, abbiamo definito le regole.

Il sistema è organizzato in tre livelli. Il primo sono i token: oltre 60 variabili CSS che definiscono tutto, colori in dark e light mode, scala tipografica (da micro a display), spaziatura (da s-1 a s-12), border radius, easing per le animazioni, durate (fast / base / slow / cinema). Niente valori hardcoded nel codice: se cambia un colore brand, cambia dappertutto, in un solo punto.

Il secondo livello sono i componenti: 12 elementi documentati tra cui Button, Badge, Tag, Card, Container, Reveal, SplitText, Marquee, Nav, Footer e le sezioni principali. Ogni componente è costruito come Server Component di default in Next.js 15, con use client solo dove necessario. Il terzo livello è la documentazione: un file HTML standalone che mostra tutti i token in uso, gli stati dei componenti e le linee guida motion. Apribile nel browser, senza build.

Lo stack: Next.js 15 con App Router, Tailwind CSS v4 con mapping 1:1 dei token su CSS variables, TypeScript strict mode, GSAP per le animazioni scroll-linked e le timeline cinematografiche, Lenis per lo smooth scroll. Font self-hosted via next/font: Unbounded per i display, Geist per il body, JetBrains Mono per i label tecnici.

Il risultato è un sito che funziona anche come manifesto tecnico: ogni elemento ha un perché, ogni animazione rispetta prefers-reduced-motion, ogni pagina raggiunge Lighthouse 95+ su mobile. Il design system v1.0 è la fondazione. I prodotti successivi non ripartiranno da zero.