Touch Grass: un design system brutalista open source

Construir un design system con identidad visual propia, tokens compartidos entre CSS, Tailwind, Figma y JS/TS, pruebas y documentación pública. La dirección visual adoptó esquinas rectas, tipografía en dos familias (Geist Sans y Geist Mono) y restricciones explícitas para guiar la implementación.

Decisiones de diseño: esquinas rectas en todos los componentes, dos familias tipográficas, Geist Sans para texto y Geist Mono para números, etiquetas y datos, y carga con bloque de caracteres en lugar de spinner. Los tokens salen de una única fuente en JSON, y Style Dictionary genera variables CSS, tema de Tailwind, JSON para Figma y constantes JS/TS. La gobernanza vive en el código, con un test de contrato de contraste y un plugin de ESLint propio. En la ejecución usé Claude Code con un spec corto, un plan por etapas, tests antes del componente y revisión por un agente separado. Las decisiones de arriba quedaron conmigo.

10 componentes básicos y 9 patrones compuestos, 23 archivos de test y dos flujos de CI. En la auditoría automática del 14/04/2026 con axe-core, las 27 páginas de documentación tuvieron 0 violaciones y 687 verificaciones aprobadas; el resultado vale para esa ejecución, hecha en un entorno local. Los paquetes @touch-grass-ds/react y @touch-grass-ds/tokens están publicados en npm con licencia MIT. Límite: es un proyecto personal, sin equipos que lo consuman ni métricas de adopción.