Leímos 150 repos de shadcn/ui. Lo uniforme no es violeta.
Análisis, primera entrega. Los proyectos de shadcn/ui más populares usan dos tipografías y un color principal gris. El degradado violeta viene de otro sitio.
En esta página
Quien construye con IA reconoce el aspecto: una tipografía, un degradado violeta y las mismas tarjetas suaves. Se suele culpar a shadcn/ui porque está detrás de muchas de esas aplicaciones. Así que dejé de suponer y leí el código.
Qué medí
Tomé los 150 repositorios de GitHub con más estrellas y la etiqueta shadcn-ui, a 25 de septiembre de 2026. En cada uno leí los archivos que deciden el aspecto de la aplicación: la distribución raíz, la configuración de Tailwind y la hoja de estilos global. Registré dos cosas.
- La tipografía, a partir de las importaciones de
next/font, los enlaces de Google Fonts y las declaraciones defont-family. - El color principal, a partir del primer valor de color principal de la hoja de estilos, clasificado por tono en neutro, azul, violeta y otros.
Cuando no se podía leer una señal, se registraba como ilegible. No se adivinaba. Quedaron 67 repositorios con tipografía legible y 87 con color principal legible.
Una de dos tipografías
59 de los 67 repositorios con tipografía legible usan Geist o Inter. Es el 88 por ciento. Geist aparece en 34, Inter en 28 y algunos cargan ambas. Solo 8 eligieron otra, entre DM Sans, Manrope, Sora, Montserrat y unas pocas más.
Esa es la uniformidad real. No es una mala elección, Geist e Inter son excelentes tipografías de pantalla, pero significa que lo primero que ve el lector es lo mismo en casi todos estos productos.
Un color principal gris
65 de los 87 colores principales legibles son neutros: casi negros o grises, tomados directamente de las paletas base de shadcn. Es el 75 por ciento. El azul aparece en 11, un 13 por ciento. El violeta en 5, un 6 por ciento.
El violeta no viene de shadcn/ui. Por defecto, ofrece gris. Si un producto es violeta, alguien lo ha elegido, o algo lo ha elegido por ese equipo.
Qué significa al diseñar con IA
La biblioteca de componentes no es el problema de marca. Ofrece estructura y una superficie neutra a propósito. La uniformidad entra por dos puntos: la tipografía que nadie cambió y el color de acento que una herramienta rellenó porque nadie indicó cuál usar.
Cada uno requiere una decisión. Se elige una tipografía que exprese la voz de la marca, se fija un color principal propio y se entregan ambos al modelo antes de que dibuje. Esa es toda la solución y la razón por la que el sistema de diseño debe ir primero.
Método y datos
El escáner, las reglas y los resultados brutos son públicos: scan_shadcn.py y results.json. Los grupos de tono usan HSL (violeta de 240 a 300 grados) y OKLCH (violeta de 265 a 320 grados). Cualquier saturación inferior al 12 por ciento o croma inferior a 0.05 se considera neutra, donde se sitúan las bases slate y zinc de shadcn. La muestra incluye los 150 repositorios con más estrellas y esa etiqueta, tanto bibliotecas como aplicaciones; la mediana tiene unas 1,700 estrellas.
Esta es la primera entrega de Análisis: una pregunta de diseño, medida a mano y con el método a la vista. Para proponer una pregunta que medir, basta con contármela.
