Guía de marca y sistema UI
Referencia de diseño para emorillo.com: paleta de colores, tipografía, componentes estructurales y principios operativos. Usar como fuente única de verdad para desarrollo.
Paleta de colores
Verde Emorillo
var(--accent)
Color principal para CTA urgentes, links activos y acentos visuales.
Carbón Base
var(--bg-base)
Fondo principal del sitio. Oscuro cálido, evita el negro puro (#000).
Gris Elevado
var(--bg-raised)
Usado en tarjetas (cards), fondos de secciones secundarias y modales.
Tipografía
Título H1 Nivel
Título H2 Sección
Título H3 Tarjeta
Párrafo destacado (Lead): Utilizado para introducciones. Este sistema prioriza la claridad técnica, legibilidad en pantallas oscuras y la jerarquía visual sin necesidad de sobrecargar el diseño.
Cuerpo normal: Texto para descripciones, contenido general y lectura extendida. La altura de línea está calculada para evitar fatiga visual en un esquema de colores oscuros.
Principios de la marca
Técnico pero accesible
El lenguaje visual y verbal debe sentirse propio de un ingeniero de redes operativo, pero empático hacia quien dirige las operaciones. Nada de jerga innecesaria que no aporte a la resolución.
Diseño asimétrico y funcional (Editorial)
Evitar estructuras tradicionales de un SaaS genérico. El contenido dicta la forma. El uso de la cuadrícula de fondo aporta esa sensación constructiva y precisa que evoca a un NOC o a una hoja de diseño.
Minimalismo sin privación
No dependemos de sombras gruesas ni efectos "glossy". Se usan bordes sutiles con muy baja opacidad y contrastes de color controlados.