Sobre este Design System
Identidad
Sistema de diseño brutalista-editorial construido sobre una paleta de tres colores absolutos — negro #0A0A0A, blanco roto #F5F4F0 y azul eléctrico #1A1AFF — con tipografía de carácter fuerte y un lenguaje visual que prioriza la honestidad estructural sobre la decoración. Inspirado en el diseño gráfico de portfolio independiente: crudo, directo y memorable.
Principios de Diseño
1. Honestidad estructural: Los elementos muestran su construcción sin ocultarla. Los bordes son visibles, los contenedores tienen peso real, las sombras son offset sólido sin difuminado — no simulan profundidad, la declaran. Nada se esconde detrás de gradientes ni efectos de vidrio.
2. Contraste como jerarquía: La jerarquía visual se comunica exclusivamente a través del contraste: peso tipográfico, tamaño, color y espacio en blanco. No hay ornamentación compensatoria. Si algo es importante, es más grande, más negro o más azul — nunca más decorado.
3. Tensión tipográfica: Tres familias con roles irremplazables: Syne para todo lo que necesita impacto display, Space Mono para etiquetas, datos y elementos de sistema, DM Sans para lectura cómoda. El conflicto intencional entre una fuente geométrica agresiva y una monospace de máquina es la personalidad del sistema.
4. Interacción como desplazamiento: Los estados hover no cambian el color de fondo suavemente — desplazan el elemento en el espacio usando translate(-2px, -2px) y aumentan la sombra de offset. El feedback es físico, no cosmético. El usuario siente que está presionando algo real.
5. El azul eléctrico es semántico: #1A1AFF no es un color decorativo. Su presencia significa: acción primaria, dato destacado, elemento activo, o llamada de atención. Usarlo fuera de ese contexto rompe la gramática del sistema.
6. La grilla es visible: Los layouts no disimulan su estructura. Las líneas divisoras de 2px solid #0A0A0A son elementos de diseño, no separadores utilitarios. La grilla se ve porque mostrarla es parte del estilo.
7. Densidad controlada: El sistema puede trabajar tanto en modo editorial espacioso como en modo dashboard denso sin perder coherencia. El espaciado en escala de 4px garantiza proporciones consistentes en cualquier densidad.
8. Los estados son ciudadanos de primera clase: Hover, focus, disabled, loading y error no son afterthoughts — cada componente los define explícitamente con el mismo nivel de detalle que su estado default. Un componente sin estados completos no está terminado.
Sistema de diseño brutalista-editorial construido sobre una paleta de tres colores absolutos — negro #0A0A0A, blanco roto #F5F4F0 y azul eléctrico #1A1AFF — con tipografía de carácter fuerte y un lenguaje visual que prioriza la honestidad estructural sobre la decoración. Inspirado en el diseño gráfico de portfolio independiente: crudo, directo y memorable.
Principios de Diseño
1. Honestidad estructural: Los elementos muestran su construcción sin ocultarla. Los bordes son visibles, los contenedores tienen peso real, las sombras son offset sólido sin difuminado — no simulan profundidad, la declaran. Nada se esconde detrás de gradientes ni efectos de vidrio.
2. Contraste como jerarquía: La jerarquía visual se comunica exclusivamente a través del contraste: peso tipográfico, tamaño, color y espacio en blanco. No hay ornamentación compensatoria. Si algo es importante, es más grande, más negro o más azul — nunca más decorado.
3. Tensión tipográfica: Tres familias con roles irremplazables: Syne para todo lo que necesita impacto display, Space Mono para etiquetas, datos y elementos de sistema, DM Sans para lectura cómoda. El conflicto intencional entre una fuente geométrica agresiva y una monospace de máquina es la personalidad del sistema.
4. Interacción como desplazamiento: Los estados hover no cambian el color de fondo suavemente — desplazan el elemento en el espacio usando translate(-2px, -2px) y aumentan la sombra de offset. El feedback es físico, no cosmético. El usuario siente que está presionando algo real.
5. El azul eléctrico es semántico: #1A1AFF no es un color decorativo. Su presencia significa: acción primaria, dato destacado, elemento activo, o llamada de atención. Usarlo fuera de ese contexto rompe la gramática del sistema.
6. La grilla es visible: Los layouts no disimulan su estructura. Las líneas divisoras de 2px solid #0A0A0A son elementos de diseño, no separadores utilitarios. La grilla se ve porque mostrarla es parte del estilo.
7. Densidad controlada: El sistema puede trabajar tanto en modo editorial espacioso como en modo dashboard denso sin perder coherencia. El espaciado en escala de 4px garantiza proporciones consistentes en cualquier densidad.
8. Los estados son ciudadanos de primera clase: Hover, focus, disabled, loading y error no son afterthoughts — cada componente los define explícitamente con el mismo nivel de detalle que su estado default. Un componente sin estados completos no está terminado.
¿Para qué tipo de marca/producto?
Marcas con personalidad fuerte y postura creativa: portfolios de diseñadores, agencias creativas, estudios independientes, productos SaaS con identidad editorial, herramientas para creativos, y cualquier marca que prefiera ser recordada antes que ser segura.
No es para: corporativos tradicionales, banca, salud, o marcas que necesiten transmitir neutralidad institucional.
No es para: corporativos tradicionales, banca, salud, o marcas que necesiten transmitir neutralidad institucional.
Clima visual
Crudo, urbano y confiado. Como una revista de diseño impresa en risografía — alto contraste, sin suavizados, cada elemento ocupa su lugar con autoridad. Energía de taller gráfico profesional: no intenta gustar a todos, sabe exactamente lo que es.