Por qué mi design system no tiene modo oscuro (a propósito)

Después de construir cuatro herramientas internas — un POS, dashboards, paneles de administración — me di cuenta de que reconstruía los mismos botones, tablas y formularios cada vez. Y las librerías que existían estaban hechas para landings de marketing: colores brillantes, esquinas muy redondeadas, sombras y dark-mode por default. Ninguna encajaba en el software al que le confías números reales.

Empecé por un brief, no por Figma

En vez de abrir el editor, escribí una pregunta: ¿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. Y, deliberadamente, sin modo oscuro.

Las restricciones son la feature — prohibir sombras y modo oscuro hizo cada pantalla consistente y más rápida de construir.

El costo real del modo oscuro

El modo oscuro no es un interruptor. Es duplicar cada decisión de color, cada estado de foco, cada borde, cada sombra que ahora tiene que 'brillar' en vez de 'proyectar'. Es el doble de superficie para bugs de contraste. Para una app de marketing puede valer la pena; para software administrativo denso donde la gente pasa ocho horas leyendo tablas, un solo tema light bien resuelto gana casi siempre.

Tokens primero, componentes después

Una vez que color, tipografía y espaciado viven en variables CSS, los componentes casi se escriben solos. Toda la paleta cabe en un puñado de tokens — y como no hay tema alterno, cada token tiene un único valor del que preocuparse.

:root {
  --ink: #1a1a1a;      /* texto */
  --paper: #ffffff;    /* lienzo real, no gris */
  --line: #e4e4e4;     /* la única línea de 1px */
  --accent: #2d4a7c;   /* azul tinta, con cuentagotas */
}

/* profundidad = líneas, nunca sombras */
.card { border: 1px solid var(--line); }

Un design system es un producto

La lección más grande no fue de CSS. Un sistema de diseño necesita versionado, docs y una sola ruta de instalación, o nadie —incluido tú mismo— lo adopta. Folio se publicó en npm con un único styles.css de entrada, tipos de TypeScript y un prototipo navegable hecho enteramente con sus propios componentes. Ese último paso es el que lo convirtió en algo que de verdad reutilizo.