Touch Grass: un design system brutalista open source

Costruire un design system con un’identità visiva propria, token condivisi fra CSS, Tailwind, Figma e JS/TS, test e documentazione pubblica. La direzione visiva ha adottato angoli retti, tipografia in due famiglie (Geist Sans e Geist Mono) e vincoli espliciti per guidare l’implementazione.

Decisioni di design: angoli retti in tutti i componenti, due famiglie tipografiche, Geist Sans per il testo e Geist Mono per numeri, etichette e dati, e caricamento con un blocco di caratteri invece dello spinner. I token nascono da un'unica fonte JSON, e Style Dictionary genera variabili CSS, tema Tailwind, JSON per Figma e costanti JS/TS. La governance sta nel codice, con un test di contratto sul contrasto e un plugin ESLint dedicato. Per l'esecuzione ho usato Claude Code con uno spec breve, un piano per fasi, test prima del componente e revisione da parte di un agente separato. Le decisioni qui sopra sono rimaste mie.

10 componenti di base e 9 pattern composti, 23 file di test e due workflow di CI. Nell'audit automatico del 14/04/2026 con axe-core, le 27 pagine di documentazione hanno avuto 0 violazioni e 687 controlli superati; il risultato vale per quell'esecuzione, in ambiente locale. I pacchetti @touch-grass-ds/react e @touch-grass-ds/tokens sono pubblicati su npm con licenza MIT. Limite: è un progetto personale, senza team che lo usano né metriche di adozione.