mar.ia

Simplicidad Inteligente / El Enlace Humano

Manual de Identidad Visual | Versión 1.0 | 16 de Febrero, 2026 | Propuesta de Dirección Creativa

Explorar

La intersección entre
potencia e intuición

La identidad de mar.ia nace del equilibrio entre la inteligencia artificial y la intuición humana. No buscamos parecer una entidad cibernética inalcanzable, sino una herramienta esencial, transparente y facilitadora.

Territorio Estético

Minimalismo Funcional & Cálido

Se aleja del "tech" frío y del corporativo aburrido. Adopta un enfoque editorial moderno, similar a productos digitales de alta gama donde el contenido y la utilidad son los protagonistas.

Posicionamiento

Consultora Tecnológica de Alto Nivel

La estética proyecta a mar.ia no como una "agencia de marketing" más, sino como una consultora tecnológica accesible para el empresario moderno. La estética es la herramienta de confianza.

La marca es
el nombre

Logotipo tipo Wordmark. La fuerza reside en la palabra "mar.ia". El punto (.) es el nodo de conexión — el chip, el punto de inicio, donde reside la inteligencia.

Principal
mar.ia
Negativa
mar.ia
Monocromática
mar.ia

Área de Seguridad

Equivalente a la altura de la letra "m" alrededor de todo el logotipo.

mar.ia
m m

Tamaños Mínimos

Garantizar legibilidad en todas las aplicaciones.

mar.ia
Digital — 24px altura
mar.ia
Impreso — 5mm altura

Tipografía: Sans Serif Grotesca Geométrica
Peso: Medium / SemiBold — solidez sin pesadez
Kerning: Ajustado meticulosamente para cohesión

Confianza corporativa
con innovación humana

Una paleta que equilibra el profesionalismo de nivel socioeconómico medio-alto con la calidez de la innovación centrada en personas. Se evita la saturación excesiva para no distraer.

Paleta Primaria 80% uso

Carbón Profundo
Profesionalismo, solidez, contraste premium. No es negro puro — suaviza la lectura.
HEX #111111
RGB 17, 17, 17
CMYK 70, 60, 50, 80
Blanco Humo
Claridad, espacio, luz. Evita el blanco clínico para mayor confort visual.
HEX #FAFAFA
RGB 250, 250, 250
CMYK 0, 0, 0, 2

Paleta Secundaria 20% uso

Azul Cobalto Digital
Tecnología, inteligencia, profundidad. El color de la IA — el "go-to" expert.
HEX #2F54EB
RGB 47, 84, 235
CMYK 85, 70, 0, 0
Arcilla
Calidez, tacto, accesibilidad. El toque humano que rompe la frialdad tecnológica.
HEX #E6DACD
RGB 230, 218, 205
CMYK 10, 15, 20, 0
Ratio 6.8:1 — AA / AAA
Azul Cobalto sobre Blanco

Accesible para textos normales (AA) y grandes (AAA).

Alto Contraste
Blanco sobre Cobalto

Uso principal para botones CTA y elementos interactivos.

Fondo Cálido
Carbón sobre Arcilla

Secciones "humanas": testimonios, citas, contenido cercano.

Carbón
Autoridad y orden
Blanco
Espacio y claridad
Cobalto
Solución tecnológica
Arcilla
Te entendemos

Dejar que el
mensaje brille

Tipografías seleccionadas para garantizar legibilidad, modernidad y neutralidad. Cada peso tiene un propósito definido.

Plus Jakarta Sans

Tipografía Primaria
H1 — Bold 700 Tracking -2% Titulares de Impacto
Automatización simplificada.
H2 — SemiBold 600 Subtítulos
Tu próximo nivel de productividad comienza aquí.
Body — Regular 400 Cuerpo de texto
mar.ia transforma la complejidad operativa en flujos de trabajo inteligentes. Diseñamos soluciones que se adaptan a tu negocio, no al revés. Cada automatización es un paso menos entre tu equipo y sus objetivos.
Caption — Medium 500 Elementos de UI
Etiquetas, botones, navegación, metadatos y elementos de interfaz de usuario.

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789

JetBrains Mono

Tipografía Secundaria
Monospace Datos Técnicos
// Uso exclusivo para datos, números y elementos de UI técnicos
fecha: 2026-02-16
automatizaciones: 1,247
eficiencia: +340%
estado: activo

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789 {} [] () => // ;

El universo visual
más allá del logo

Retículas, contenedores, patrones e iconografía que conforman el lenguaje visual completo de mar.ia.

Retícula
Sistema Modular Bento
Basado en bloques tipo bento. Todo está contenido y ordenado. Separación clara entre secciones con líneas finas de 1px en #E5E5E5.
Contenedores
Bordes Redondeados
Sutiles, 8px a 12px. No cuadrados (hostil) ni píldoras (infantil).
0px
8px
12px
50%
Efecto Glass
Profundidad Moderna
Desenfoque sutil en superposiciones para dar profundidad sin distraer.
Efecto backdrop-filter
Sombras
Elevación Difusa
Difusas y expansivas, solo para elevar elementos interactivos.
SM
MD
LG
XL
Iconografía
Outline, 1.5–2px
Minimalista, esquemático. Coincidente con el peso tipográfico.
Patrón — Flujo de Datos
Red Abstracta con Espacio Negativo
Líneas conectadas y puntos dispersos que sugieren una red. Limpieza y espacio negativo abundante.

Aquí vive el
atributo humano

Personas reales en estados de flow. Luz natural, composición limpia, desaturación ligera manteniendo tonos piel naturales.

Retrato — Business Casual

Personas Reales

Estética "Business Casual" moderna. Interacción natural con tecnología, no poses forzadas.

Tecnología — Interacción

Iluminación Natural

Luz suave, difusa. Sombras no marcadas. Evitar filtros azules fríos "matrix".

Colaboración — Equipo

Composición Limpia

Aire alrededor de los sujetos. Regla de tercios. Desaturación ligera.

Estilo Ilustrativo

Blueprint Moderno

Representaciones abstractas de software — nodos, flujos, abstracciones de interfaces. Sin "personajes animados". Técnico y esquemático, elevado a arte.

El sistema
en acción

Cómo se materializa la identidad visual en cada punto de contacto: web, redes sociales y presentaciones.

mar.ia — Web / UI

Automatización que
entiende tu negocio.

Transformamos la complejidad operativa en flujos inteligentes. Menos fricción, más resultados.

Comenzar ahora
Redes Sociales — Post
Redes Sociales — Carrusel
Presentación — Diapositiva

Menos texto, más impacto.

Diapositivas limpias con la paleta secundaria (Arcilla) para destacar citas y testimonios. Tipografía grande, espacio abundante.

Aa

Reglas para mantener
el posicionamiento

Directrices que aseguran la coherencia visual en todas las aplicaciones del sistema de marca.

Regla de Oro: Espacio en Blanco

El espacio vacío es lujo. No llenar cada hueco. Dejar respirar los elementos da sensación de control y facilidad.

Espacio generoso entre secciones
Llenar cada espacio disponible

Degradados Sutiles

Si se usan degradados, mantenerlos sutiles: de Azul Cobalto a un tono más claro, o de Carbón a Negro.

Degradados monócromos sutiles
Degradados arcoíris o multicolor

Sombras Difusas

Las sombras deben ser difusas y expansivas, solo para elevar elementos interactivos, no para decorar.

box-shadow: 0 12px 48px rgba(...)
box-shadow: 4px 4px 0 #000

Escalabilidad

Todo gráfico debe funcionar igual de bien en la pantalla de un móvil que en un proyector de sala de juntas. Legibilidad sobre adorno.

Responsive, legibilidad primero
Diseño fijo, solo para desktop