Sistema de Diseño
Este sistema nace desde una restricción clara: dos colores, bordes definidos y tipografía con jerarquía estable. Al reducir decisiones visuales, el contenido toma protagonismo y cada página mantiene el mismo lenguaje.
La accesibilidad está integrada desde el diseño: contraste legible, foco visible, estructura semántica y navegación simple. Si quieres revisar criterios y alcance en detalle, puedes leer la Declaración de Accesibilidad.
Sistema de Color
El sistema utiliza dos variables CSS globales para toda la interfaz. En cambios de tema, los roles se invierten sin alterar la estructura de componentes. Este enfoque reduce combinatorias de color y estabiliza el contraste entre superficies y texto.
--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.
Principal sobre Secundario
Secundario sobre Principal
Proporción de contraste
Sistema de temas
Cada tema define dos colores: acento (color vibrante) y contraste (color de fondo/soporte). En modo claro, acento se asigna a --color-main (texto/bordes) y contraste a --color-secondary (fondos). En modo oscuro se invierten. Así el sistema mantiene alto contraste en ambos modos usando solo dos colores por tema.
acento: #FAFFF8
contraste: #03185D
acento: #E3FCBD
contraste: #1F178A
acento: #EFFF00
contraste: #2F1F90
acento: #94F9E5
contraste: #0A0422
Tipografía
Dos familias tipográficas con roles definidos para contenido, jerarquía y elementos técnicos.
“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 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
Base de interacción primaria. Aquí se concentran estados, jerarquía visual y variantes de acción.
Tarjetas de Proyecto
Contenedor de contenido resumido. Prioriza lectura rápida, enlace claro y estructura consistente.
Teclas de teclado
Representación visual de atajos y teclas del sistema para documentación y ayuda contextual.
Showcase
Pantalla de siete segmentos
Sistema de dígitos segmentados para lecturas numéricas. Se usa en estados y métricas para mantener legibilidad y ritmo visual.
Elementos visuales
Recursos decorativos de menor prioridad que refuerzan identidad sin competir con el contenido.
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.