Sistema de Diseño
Quise algo simple pero con carácter. Soy diseñador y prefiero la coherencia a través de restricciones: dos colores que se invierten, bordes definidos y tipografía clara. Limitar el espacio de decisiones me ayuda a decidir mejor y a poner el contenido primero.
También pienso la accesibilidad como parte del sistema: suficiente contraste, jerarquías legibles y estructura semántica clara. Cada componente está hecho para ser entendido, visible y usable sin esfuerzo.
Si quieres profundizar, puedes leer la Declaración de Accesibilidad.
Sistema de Color
El corazón del sistema: dos variables CSS que definen toda la interfaz. Cuando cambias de tema claro a oscuro, simplemente se invierten. No hay grises, no hay acentos, no hay escape. Esta restricción fuerza decisiones intencionadas y mantiene el contraste accesible automáticamente.
--color-main
Texto, bordes, elementos primarios
--color-secondary
Fondos, texto alternativo
Variaciones de Opacidad
La única escapatoria permitida: transparencia. Así se crean sutilezas sin añadir colores nuevos.
Transparencia para estados hover, bordes suaves, y fondos alternos. Es la única forma de generar matices sin romper la regla de dos colores.
Main sobre Secondary
Secondary sobre Main
Sistema de temas
Cada tema define dos colores: colorful (color vibrante/acento) y contrasty (color oscuro/fondo). En modo claro, colorful se convierte en --color-main (texto/bordes) y contrasty en --color-secondary (fondos). En modo oscuro se invierten: contrasty pasa a --color-main y colorful a --color-secondary. Así el sistema mantiene alto contraste en ambos modos usando solo dos colores por tema.
Interfaz de línea de comandos
colorful: #e5e5e6
contrasty: #000000
Energía memética potenciada con potasio
colorful: #D4B340
contrasty: #020123
Leyenda monocromática LCD
colorful: #A4D110
contrasty: #044F27
Leyenda de computación de pantalla azul
colorful: #BFDDF5
contrasty: #0A0A1C
Kuromi fluido
colorful: #FA7FB5
contrasty: #0A0A0A
Tipografía
Dos familias tipográficas con roles claros. La restricción continúa.
“El pequeño zorro bajó feliz y juguetón al río mientras cantaba.”
“El pequeño zorro bajó feliz y juguetón al río mientras cantaba.”
“El pequeño zorro bajó feliz y juguetón al río mientras cantaba.”
“El pequeño zorro bajó feliz y juguetón al río mientras cantaba.”
El cuerpo del texto debe leerse con calma y sin esfuerzo. Las líneas son cortas, el contraste es alto y el ritmo vertical guía el ojo sin distracciones.
El cuerpo del texto debe leerse con calma y sin esfuerzo. Las líneas son cortas, el contraste es alto y el ritmo vertical guía el ojo sin distracciones.
const theme = "brutalist";
UI · ETIQUETA · SISTEMA
Botones
Tarjetas de Proyecto
Elementos visuales
Patrón para separar secciones sin añadir colores. Respeta el sistema de dos colores y usa opacidad para matizar.
Separador decorativo que divide secciones siguiendo el contraste del tema actual. Opacidad sobre nuevos colores.