TL;DR

Per supportare la crescita di Calton abbiamo progettato e costruito un Design System da zero in Figma, partendo da analisi dei requisiti e fondamenta tipografiche e di componenti, prima ancora di “disegnare pagine”. Risultato: interfacce coerenti, tempi di delivery più prevedibili, meno debito di design.

Sul fronte engineering abbiamo inizializzato un nuovo progetto front‑end in TypeScript, rimuovendo librerie UI esterne a favore di componenti headless e approccio atomico, quasi nessuna dependencies, massima velocità di sviluppo.

‍

Contesto & Sfida

Calton è un SaaS che usa l’AI per raccogliere, gestire e analizzare recensioni e sondaggi. Il prodotto cresce, le feature aumentano, i team si allargano. Senza una base condivisa il rischio è incoerenza visiva, tempi più lunghi e costi di manutenzione sempre maggiori.
Obiettivo: creare un sistema coerente e scalabile che consenta di comporre nuove UI ed iterare velocemente, mantenendo qualità e coerenza.

Perché un Design System (adesso)

Un’unica base condivisa porta ordine e velocità. Con un Design System allineiamo tipografia, colori, spaziature e componenti in una fonte di verità che riduce ambiguità e tempi morti, abilita contributi controllati con una governance chiara e getta le basi per l’accessibilità (contrasti e gerarchie tipografiche in linea con WCAG AA). In pratica: meno scelte e codice ripetuto e più tempo per creare feature.

Come abbiamo lavorato
‍

1) Discovery & Requisiti

• Audit UI delle viste esistenti: mappa di pattern, incoerenze, debt.
• Mappatura casi d’uso e priorità: CRUD, tabelle dati, filtri, stati di caricamento/errore, empty states.
• Allineamento con il team: definizione dei domini funzionali e delle dipendenze con il backend.

2) Foundations (prima delle pagine)

• Tipografia: scale tipografiche per Desktop/Mobile, text styles in Figma (display, heading, body, label), baseline 8pt per spaziature.
• Colori & Stati: palette base + semantiche (primary, success, warning, danger, info) con varianti light/dark‑ready e controlli di contrasto.
• Layout: griglie, container, breakpoint, regole di densità.
• Iconografia: set coerente e regole di utilizzo.

3) Componenti (atomic → composable)

• Atomi: Button, IconButton, Badge, Tag, Tooltip, Avatar, Token di input.
• Molecole: Input/TextArea con stati (default/hover/focus/error/disabled), Select, Combobox, Checkbox/Radio, Switch, Slider.
• Organismi: Card, Modal/Drawer, Stepper, Tabs, Table (con sorting/pagination), Data Filters, Toast/Alert.
• Varianti & Stati: uso di Component Properties (boolean, text, instance swap) per evitare esplosioni di varianti; Auto Layout e Constraints per la responsività.

4) Tokens & Variables

• Definizione dei Design Tokens (tipografia, colori, spaziature, radius, shadow) tramite Figma Variables e naming semantico (es. bg/surface/default, text/primary, space/16).
• Mapping documentato per un’integrazione 1:1 lato front‑end.

5) Fondazione tecnica (TypeScript & zero‑dependencies)

In parallelo abbiamo impostato un nuovo progetto TypeScript focalizzato su componenti headless e quasi zero dipendenze esterne. I token di design sono esposti come CSS variables consumate dai componenti; lo styling è minimale e sovrascrivibile, evitando lock‑in su librerie grafiche.

6) Documentazione & Governance

• Guidelines in Figma: pagina dedicata con Do/Don’t, esempi di composizione, anti‑pattern noti.
• Changelog e versioning semplificato delle librerie.
• Processo di contribution: come proporre nuovi componenti o estensioni (template di proposta, criteri di accettazione, QA).

7) Adozione

• Sessioni con i team: onboarding per designer e dev, handoff delle spec, mapping dei componenti UI → implementazione.
• Pilot: rollout su un flusso core (es. analisi sondaggi) per validare tempi e qualità, poi estensione graduale.

‍

Cosa cambia per Calton

Interfacce più coerenti grazie a tipografia, griglie e pattern condivisi; meno ambiguità perché gli stati e le proprietà dei componenti sono standardizzati; scalabilità reale: nuove viste si compongono come blocchi Lego. Inoltre, l’impianto tecnico TS + componenti headless porta performance, controllo e rapidità senza dipendere da framework UI pesanti.

‍