MAECLY · propuesta de símbolo · octubre 2026
Miguel Angel Esparza Calero es el autor detrás de MAECLY. Cada concepto parte de lo que ya existe: la familia de iconos squircle de los productos (Coverly, Versorium, Aurenly), el amarillo de Ecuador de la insignia «made in Quito» y el lema «Software that doesn't lie». Todos se muestran igual: símbolo, escala, avatar, favicon, lockup, monocromo, paleta, tipografía, reglas de uso y movimiento.
Una "M" geométrica que se puede comprobar: está construida en una retícula de 64 unidades, con astas de 8 unidades, y las diagonales tienen exactamente el mismo grosor óptico (8,0) que las astas. Las líneas de construcción quedan visibles como hilos finos: la marca es justo lo que parece, y eso traduce "Software that doesn't lie". El vértice central baja hasta un cuadrado de 4×4 en amarillo Ecuador (#FFD100), una "plomada" que confirma que el centro cae sobre la línea base. El cuadrado guiña a Quito y a la insignia "made in Quito" de la organización. La loseta squircle (rx 22%), el glifo único y el petróleo profundo siguen la familia de iconos de producto (Coverly, Versorium, Aurenly) sin quitarle a ningún producto su tono saturado. La M sale de MAEC, es decir, de Miguel Angel Esparza Calero.
Espacio libre: 1 módulo de plomada por lado; la plomada mide 4/64 del símbolo, así que a 64px son 4px. En el lockup, el margen libre equivale a la altura del asta (8/64 del símbolo, unos 12px a 96px) y la separación entre símbolo y texto es de 18/64 del símbolo. Tamaño mínimo del símbolo: 16px. Por debajo de 24px se ocultan las líneas guía (.mk-guides) y quedan solo la M y la plomada, con el cuadrado alineado a píxel entero en 16px (2×1px). Tamaño mínimo del lockup: 96px de ancho. Versión monocroma: la loseta va en currentColor y la M y la plomada se calan en negativo.
Primero se trazan las líneas de construcción con stroke-dashoffset: horizontales y verticales a la vez, unos 600ms. Luego la M se "rellena" de abajo arriba con un clip-path que sube por la retícula. Por último cae la plomada amarilla desde arriba por el eje x=32 y se asienta en la línea base con un rebote corto. Después las guías bajan a una opacidad de 0.15 y se quedan quietas. Al pasar el cursor, las guías vuelven a aparecer en 160ms, como si la marca enseñara su prueba. Con prefers-reduced-motion, la marca aparece ya terminada.
Una "m" minúscula construida con 14 celdas modulares en una retícula de 5x4: cada celda es un producto (Pluryprint, Versorium, Coverly, autostand, ID Bridge…), y juntas forman la casa MAECLY; la retícula hace eco de los squircles de todas las apps y del glifo pixel-crisp de Coverly. La celda dorada arriba a la derecha es el amarillo de la bandera de Ecuador (Quito, el origen) y marca a Miguel como el "punto de partida" y el próximo producto por llegar. El campo es un petróleo profundo, de la familia teal que ya usan Coverly, Versorium y los badges de la org pero sin copiar ningún tono de producto; las celdas son papel cálido, el neutro que comparten todas las landings. Plano, sin gradientes ni glow: honesto como el tagline "Software that doesn't lie".
Zona de respeto: 1 celda (8/64 = 12.5% del lado del símbolo) por cada lado; en el lockup, separación símbolo-wordmark = 2 celdas (16/64). Tamaños mínimos: símbolo completo con retícula 24px; a 16px (favicon) usar la variante sólida: unir las celdas en una "m" maciza (3 fustes + barra superior) conservando el cuadrado dorado arriba a la derecha. Wordmark mínimo 72px de ancho. Monocromo: campo currentColor con celdas recortadas (knockout); la celda acento pasa a mismo color que las demás. Radio del squircle 15/64 (23%), coherente con la familia de productos (19–28%).
Ensamblado de celdas: al cargar la landing, las 14 celdas caen desde la retícula en orden escalonado (columna por columna, 30ms de stagger, spring suave) y forman la "m"; la última en encajar es la celda dorada, que da un pulso breve. En scroll, la retícula se "despliega": cada celda se separa y se transforma en el icono real de un producto (Pluryprint, Versorium, Coverly, autostand…), formando la grilla de productos, y vuelve a plegarse en la "m" al llegar al footer. En hover, una ola de luz recorre las celdas de izquierda a derecha. Con prefers-reduced-motion: aparición estática con fade de 160ms.
La M de MAEC se cierra sobre sí misma: las patas y la V del centro terminan en una base sólida, así que la letra se vuelve un recinto sellado, una casa o una máquina de la que nada sale. Ese es el pilar local-first y sin telemetría de MAECLY. Dentro brilla un cursor de terminal en amarillo Quito (#F2C230, puente entre el amarillo de la bandera de Ecuador y el manila de Coverly): es la máquina encendida y el desarrollador trabajando, y remite a las herramientas de dev (autostand, ID Bridge, WorklyReel) y al lado técnico del portafolio de Miguel. El teal profundo #0F4F55 sale del color que la org ya usa de facto (Coverly #0E5E6F, Versorium #2A6F6A, Aurenly #00303F) sin quitarle su tono a ningún producto. El squircle con rx 22% es el mismo de toda la familia de iconos, y el cursor se repite al final del wordmark como firma ("MAECLY_").
Espacio libre: al menos 1/4 del lado del tile (16 u en una cuadrícula de 64) en los cuatro lados. En el lockup, el texto empieza a 18 u del tile y su altura de mayúsculas es de unos 24 u, alineada al centro óptico del glifo. Tamaño mínimo del símbolo: 16 px. Está verificado a 16 y 32 px: la M y el cursor siguen legibles, y por debajo de 16 px se quita el cursor. El wordmark completo se usa desde 96 px de ancho. Monocromo: tile en currentColor con la M y el cursor recortados (o la M en currentColor sin tile). Nunca se rota ni se le pone degradado, sombra o glow, y el cursor no cambia de color.
En el hero de la landing, la M se dibuja como un solo trazo continuo (stroke-dashoffset): sube la pata izquierda, baja a la V, sube la pata derecha y al final cierra la base, de modo que el recinto se sella (unos 900 ms, ease-out). Al sellarse, el cursor amarillo se enciende con un pequeño pop y parpadea dos veces como un cursor de terminal (steps(1)) antes de quedarse fijo. Después, las letras de MAECLY aparecen escritas una a una por ese mismo cursor, que termina descansando al final como "MAECLY_". Al hacer hover sobre el logo, el cursor vuelve a parpadear una sola vez (menos de 160 ms). Con prefers-reduced-motion se muestra el estado final sin animación.
La M de MAEC se dibuja como dos cumbres andinas de cima plana (Pichincha y Cotopaxi, sin caer en la postal) y la corta exactamente por la mitad una línea en negativo de 2px: el paralelo 0°0′0″ que cruza Quito. Arriba del ecuador la M es papel y abajo es oro andino; dos pequeñas marcas de latitud en los bordes del tile completan la idea de instrumento de medición, que encaja con «Software that doesn't lie»: algo preciso y medido, sin adornos. El tile squircle teal profundo (rx 14/64 ≈ 22%) es de la misma familia que Coverly, Versorium y Aurenly, y no toma el color saturado de ningún producto. El oro es un guiño contenido a la bandera de Ecuador (#FFD100 en los badges de la org) y al manila de Coverly. Como el ecuador es un corte y no un color, la marca funciona en monocromo y a 16px. En el portafolio de Miguel, la lockup con «QUITO · 0°00′00″» firma su origen sin ocupar sitio.
Espacio libre mínimo de 1/4 del lado del tile (16 unidades en el viewBox de 64) por cada lado; en la lockup, la separación entre el tile y el wordmark es de 18/64 del tile. Tamaño mínimo del símbolo: 16px (favicon, donde se pueden quitar las marcas de latitud si se pierden); 32px para el avatar de GitHub; lockup horizontal a partir de 120px de ancho. La línea del tagline mono «QUITO · 0°00′00″» se quita por debajo de 200px. El corte ecuatorial nunca baja de 1px real: por debajo de 24px se ensancha a 3 unidades. En monocromo todo va en currentColor y el ecuador sigue leyéndose como hueco. No rotar el símbolo, no ponerle degradado y no cambiar el orden papel/oro.
Al cargar la landing, las marcas de latitud salen desde los bordes hacia el centro y trazan la línea 0° de lado a lado (unos 400ms, ease-out). Por esa línea, la M se separa en dos: la mitad norte (papel) sube desde el ecuador y la mitad sur (oro) baja, como dos hemisferios que se abren con un clip-path vertical. Después la línea se retira y queda solo el corte en negativo. En el hover del tile, las dos mitades se separan 1px y vuelven, como un «tick» de instrumento de precisión (≤160ms, según las reglas de motion de la org). En scroll, el tagline mono escribe las coordenadas dígito a dígito, de 0°00′00″ hasta la latitud real de Quito (0°13′S), y vuelve a 0.
El wordmark MAECLY es una grotesca geométrica a medida y su detalle propio es la ligadura «LY»: el pie de la L se alarga hasta el fuste de la Y y forma un solo glifo, que es el sufijo «-ly» («a la manera de MAEC») sobre el que se apoya toda la marca. La horquilla de la Y cierra en una V limpia, con los brazos paralelos al trazo exterior, para que el glifo no se rompa a 16px. El símbolo también lleva un punto final cuadrado en amarillo Quito: es la afirmación tajante de «Software that doesn't lie.», el «hecho en Ecuador» de los badges de la org y un guiño a Miguel como autor que firma con punto final. La paleta es petróleo profundo (de la familia teal de Coverly, Versorium y Aurenly, pero más oscuro y sin repetir el color de ningún producto) sobre papel cálido. Así la marca madre queda plana, sobria y legible a 16px, como paraguas por encima de los colores saturados de cada producto.
Zona de respeto: la altura del punto final (6/64 del tile, o sea 1 «punto») multiplicada por 2 alrededor del tile; para el lockup horizontal, el ancho de un fuste (6 u) a cada lado y la mitad de la altura de mayúscula arriba y abajo. Separación símbolo-wordmark fija: 16 u (un cuarto del tile). Tamaños mínimos: símbolo 16px (favicon; a 16px se puede quitar el corte de la horquilla), avatar 32px completo, lockup horizontal 96px de ancho o 24px de alto, y wordmark solo a 14px de altura de mayúscula. En monocromo el punto toma el color del glifo; no se pone gradiente, sombra ni contorno.
Al cargar la landing, primero se dibujan los trazos rectos de MAECLY de izquierda a derecha, con clip-path que barre cada letra en unos 120ms y escalonado de 40ms. Al llegar a la L, su pie se alarga como un subrayado hasta encontrarse con el fuste de la Y y se forma la ligadura. Después, el corte de la horquilla se abre como un tajo de 2px y cae el punto amarillo con un pequeño rebote, que remata «Software that doesn't lie.». Al hacer scroll, el wordmark se compacta hacia el símbolo LY. del header (las letras M-A-E-C se pliegan dentro del tile). En hover, el punto parpadea una vez, como un cursor de terminal. Con prefers-reduced-motion se muestra el estado final, sin animación.
A 48px, el tamaño de una lista de repositorios o de un perfil en redes.
Elige un número y dímelo en el chat