Touch Grass: design system brutalista open source

Construir um design system com identidade visual própria, tokens compartilhados entre CSS, Tailwind, Figma e JS/TS, testes e documentação pública. A direção visual adotou cantos retos, tipografia em duas famílias (Geist Sans e Geist Mono) e restrições explícitas para guiar a implementação.

Decisões de design: cantos retos em todos os componentes, duas famílias tipográficas, Geist Sans para texto e Geist Mono para números, rótulos e dados, e carregamento com bloco de caractere em vez de spinner. Os tokens saem de uma fonte única em JSON, e o Style Dictionary gera variáveis CSS, tema Tailwind, JSON para o Figma e constantes JS/TS. A governança fica no código, com um teste de contrato de contraste e um plugin de ESLint próprio. Na execução, usei Claude Code com especificação curta, plano em etapas, testes escritos antes dos componentes e revisão por um agente separado. As decisões de design acima foram minhas.

10 componentes básicos e 9 padrões compostos, 23 arquivos de teste e dois fluxos de CI. Na auditoria automática de 14/04/2026 com axe-core, as 27 páginas de documentação tiveram 0 violações e 687 verificações aprovadas; o resultado vale para aquela execução, feita em ambiente local. Os pacotes @touch-grass-ds/react e @touch-grass-ds/tokens estão publicados no npm com licença MIT. Limite: é um projeto autoral, sem equipes usando o sistema nem métrica de adoção.