Caso de estudio
2026 / 05
Folio
Un sistema de diseño para el software que cuida los números.
- Rol
- Diseño de sistemas · Autoiniciado
- Estado
- Publicado en npm
- Stack
- React / Design System / npm
01 / Capítulo
El problema
Después de construir cuatro herramientas internas — POS, dashboards, paneles de administración — me di cuenta de que reconstruía los mismos botones, tablas y formularios desde cero en cada proyecto. Y las librerías de componentes que existían estaban hechas para sitios de marketing: colores brillantes, esquinas muy redondeadas, sombras y dark-mode por default. Ninguna encajaba en el software denso de oficinista, donde le confías la pantalla a números reales. Cada proyecto derivaba en su propia dirección.
02 / Capítulo
Investigación
En vez de abrir Figma, escribí un brief de marca: ¿cómo se ve de verdad el software al que le confías los números? La respuesta era sobrio, light-first, legible y denso — la profundidad sale de líneas de 1px, no de cajas ni sombras; un solo azul tinta usado con cuentagotas; IBM Plex partido en tres roles estrictos; y deliberadamente sin modo oscuro. Estudié herramientas administrativas corporativas para derivar los tokens en vez de inventarlos.
03 / Capítulo
La solución
- 01
Paleta sobria light-first: lienzo blanco real, tres grises y una sola línea de 1px cargan toda la estructura — nunca cajas ni sombras duras
- 02
Un único azul tinta (#2D4A7C) usado con cuentagotas — botón primario, nav activo, focus ring, fila seleccionada — nunca como decoración
- 03
IBM Plex en tres roles estrictos: serif para títulos, sans para la UI, mono con cifras tabulares para cada número, ID y fecha
- 04
~50 componentes entre core, formularios, navegación, datos, feedback y overlays — cada overlay se monta por portal en <body> y cierra con Escape / click afuera
- 05
Toda la animación sobre una sola curva expo, solo transform/opacity, detrás de prefers-reduced-motion — sin rebotes ni resortes
- 06
Publicado como paquete npm (@alanbuendia/folio) con un único styles.css de entrada, tipos de TypeScript y un prototipo navegable hecho enteramente con sus propios componentes
04 / Capítulo
El sistema
05 / Capítulo
Resultado
~50
Componentes en la librería
npm
Publicado y versionado
0
Modo oscuro — por diseño
Un sistema de diseño es un producto: necesita versionado, docs y una sola ruta de instalación, o nadie (ni tú mismo) lo adopta.
Las restricciones son la feature — prohibir sombras y modo oscuro hizo cada pantalla consistente y más rápida de construir.
Primero los tokens, luego los componentes: una vez que color, tipo y espaciado viven en variables CSS, los componentes casi se escriben solos.