Clara
El contenido y la acción se entienden a primera vista. La interfaz acompaña la lectura.
mLey / Manual de marca
La ley en
tu mano.
Ingeniería aplicada al derecho
01
Esencia
El derecho mexicano, conectado.
mLey facilita la consulta de legislación mexicana y conecta sus referencias para que cada lectura tenga contexto. La marca expresa claridad, rigor y cercanía.
Rigurosa
Las fuentes, los artículos y sus referencias se identifican. Cada afirmación debe poder verificarse.
Cercana
Lenguaje directo y herramientas útiles, tanto para estudiar como para trabajar.
Nombre: mLey en texto. Símbolo: mL, con m minúscula y L mayúscula. Firma gráfica: mley®. Dirección: mley.mx.
02
Logo clásico
Una firma que ya nos identifica.
El monograma mL vive dentro de un cuadrado de esquinas redondeadas. El nombre mley lleva ® pequeño en su esquina superior derecha. La firma completa presenta «La ley en tu mano» en negrita y, debajo, «Ingeniería aplicada al derecho» en letras más pequeñas y peso regular. Las dos líneas comparten los bordes izquierdo y derecho, sin estirar letras ni forzar espacios.
Firma horizontal
Primera opción para cabeceras, documentos y piezas con espacio horizontal.
Firma vertical
Símbolo, nombre y las dos líneas de mensaje centrados. Para portadas y formatos cuadrados.
Símbolo
mL solo para avatar, favicon e icono. El nombre completo aparece en el contexto.
La cabecera usa el logo sin eslóganes; en pantallas pequeñas puede mostrar solo el símbolo. La firma compacta de la home móvil reúne símbolo y nombre en una fila, con los dos mensajes debajo. Estas variantes están disponibles en Recursos.
03
Claro y oscuro
La misma identidad. Dos superficies.
El símbolo mL conserva el azul petróleo y la tinta crema del icono móvil en ambos temas. El nombre, los eslóganes y la interfaz adaptan sus colores al fondo. Usa el selector de tema de la cabecera para revisar todo el manual.
Estos dos recuadros son muestras de color fijas para comparar las versiones. El resto de la página sigue el tema del portal. Para una reproducción a una tinta, usa los archivos monocromáticos.
Favicon Óptico
Para pestañas y marcadores, usa el monograma con las letras ampliadas. Conserva el fondo petróleo y las letras crema en claro y oscuro, igual que la firma y el símbolo principal.
64 px32 px16 px
64 px32 px16 pxConserva la forma, los tamaños y la ausencia de ® y eslóganes. El favicon mantiene su paleta al cambiar el tema del portal o del navegador. Los iconos web instalables usan la versión petróleo y crema fija.
04
Color
Los colores actuales, con una función clara.
El azul petróleo y el crema identifican al símbolo mL, igual que en la app móvil. El magenta acompaña al nombre, el azul oscuro estructura el texto y el azul de referencia señala artículos y enlaces. Las variantes de texto mantienen la legibilidad en cada tema.
Azul petróleo
Fondo del símbolo mL, compartido con el icono de la app.
Logo · mismo color en ambos temasCrema
Letras mL sobre el azul petróleo.
Logo · mismo color en ambos temasAzul oscuro
Texto principal en claro y reproducción a una tinta.
--text-color · claroMagenta de marca
Acentos y detalles de identidad.
--brand-colorMagenta de texto
Nombre de marca legible sobre blanco.
--brand-text · claroRosa de texto
Nombre de marca sobre superficies oscuras.
--brand-text · oscuroAzul de referencia
Artículos, enlaces y foco en claro.
--accent-color · claroAzul de referencia claro
Artículos, enlaces y foco en oscuro.
--accent-color · oscuro| Uso | Claro | Oscuro |
|---|---|---|
| Fondo de página | #F2F2F2 | #17212B |
| Superficie | #FFFFFF | #1F2B38 |
| Monograma crema / petróleo | 11.89:1 · mismo símbolo | 11.89:1 · mismo símbolo |
| Texto principal | #1F2D3D | #E6EDF5 |
| Texto de marca / superficie | 6.20:1 · #B12A64 / blanco | 8.61:1 · #F3B8D0 / #1F2B38 |
Usar el magenta vivo como acento; para texto pequeño sobre blanco, elegir el magenta de texto. Los estados incluyen una etiqueta o un símbolo además del color.
05
Tipografía
Claridad para navegar. Ritmo para leer.
Interfaz e identidad
Aa
Source Sans 3
Nombre, eslogan, navegación, botones y mensajes. Regular 400, semibold 600 y bold 700. La firma conserva los pesos 750 del símbolo y 720 del nombre.
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ
abcdefghijklmnñopqrstuvwxyz
0123456789 · ¿? ¡! §
Lectura jurídica
Aa
Source Serif 4
Lecturas largas y texto jurídico en HTML. Mantener el contenido, las jerarquías y el formato de la fuente.
Una lectura clara permite seguir una referencia y volver al punto de partida.
Ejemplo editorial, sin contenido normativo.Las dos familias se alojan en el propio portal. La firma descargable incorpora la fuente para conservar su apariencia. Usa el archivo maestro en lugar de reconstruir el logo con una fuente parecida.
06
Composición
Darle espacio también es parte de la marca.
Área de protección
x
x
Define x como ¼ del lado del símbolo. Conserva al menos x libre alrededor de la firma completa. Entre símbolo y nombre, deja al menos ½x.
Tamaños mínimos de esta guía
- Símbolo: 24 px en pantalla; para favicon, usar la variante Óptico desde 16 px. En impresión, 8 mm.
- Firma horizontal de dos niveles: 450 px o 100 mm de ancho.
- Firma vertical o compacta de dos niveles: 250 px o 65 mm de ancho.
- Estos tamaños mantienen la línea pequeña en al menos 12 px en pantalla. Para tamaños menores, usa el símbolo y presenta el nombre en el contexto.
Son mínimos de uso propuestos para estas composiciones. Revisa siempre el tamaño final y el soporte de impresión.
Usos correctos
- Escalar todo el conjunto de forma proporcional.
- Elegir la variante correspondiente al fondo.
- Mantener mL y el eslogan exactos.
- Usar una superficie limpia y suficiente espacio.
Usos que deben evitarse
- Estirar, girar o separar las letras del monograma.
- Sustituir el símbolo por una mano, balanza o cursor.
- Añadir degradados, relieves o sombras al logo.
- Cambiar colores o colocar la firma sobre una imagen que dificulte leerla.
07
Voz y aplicaciones
Precisa, útil y cercana.
Explica la utilidad con palabras sencillas. Usa verbos concretos: consultar, explorar, guardar y compartir. Distingue siempre el texto legal, la explicación editorial y la interpretación.
Beneficio · Firma principal
La ley en tu mano
Eslogan principal. Acompaña al logo cuando el espacio permite leerlo con comodidad.
Respaldo · Cómo lo hacemos
Ingeniería aplicada al derecho
Segunda línea de la firma, más pequeña y con peso regular. También puede encabezar «Sobre mLey», demostraciones y presentaciones.
Posicionamiento · Qué ofrecemos
El derecho mexicano, conectado.
Presenta la propuesta de mLey al explicar la consulta y las relaciones entre las fuentes.
Ejemplo · Sobre mLey
Ingeniería aplicada al derecho
Conectamos normas, artículos y fuentes para que puedas seguir una referencia sin perder el hilo.
Explorar mley.mxEn la firma, «La ley en tu mano» lleva el mayor peso visual y «Ingeniería aplicada al derecho» va inmediatamente debajo, sin punto final y ajustada al mismo ancho que el eslogan principal. Mantén «El derecho mexicano, conectado.» como mensaje de posicionamiento en un bloque separado.
Ejemplos de voz
- «Sigue la referencia sin perder tu lugar.»
- «Guarda los artículos de tu investigación.»
- «Consulta el documento y su fuente oficial.»
- «No encontramos resultados. Prueba con otra clave o palabra.»
Nombre registrado
mLey®
La indicación de registro acompaña al nombre mLey. Coloca ® pequeño, arriba y a la derecha del nombre, con espacio suficiente para leerlo. Las firmas horizontal, vertical y monocromáticas ya incluyen esta indicación.
El símbolo mL y los eslóganes se presentan sin ®. El registro del nombre no se atribuye a esos elementos.
Usa ® para los productos o servicios amparados por el registro vigente. LFPPI, artículo 236 ↗
En avatar y app, usa el símbolo. En documentos y presentaciones, usa la firma completa. En redes, conserva los mismos colores, tipografía y márgenes. La comunicación identifica las fuentes y describe el alcance real de las herramientas.
08
Recursos
Una identidad lista para usar.
Los PNG se generan desde los mismos maestros SVG. La versión de correo conserva un soporte blanco para mantener su lectura en clientes que fuerzan colores. Descargar kit PNG.
Archivos SVG escalables con fuente incrustada: variantes para claro y oscuro, composiciones vertical y compacta, logo sin eslóganes, símbolo y reproducciones monocromáticas. El kit incluye los valores de color y las reglas esenciales.
Firma de correo · soporte blanco
PNG
Logo PNG · claro
PNG
Logo PNG · oscuro
PNG
Logo PNG · correo (soporte blanco)
PNG
Favicon Óptico · claro
SVG
Favicon Óptico · oscuro
SVG
Logo sin eslóganes · claro
SVG
Logo sin eslóganes · oscuro
SVG
Firma compacta · claro
SVG
Firma compacta · oscuro
SVG
Firma horizontal · claro
SVG
Firma horizontal · oscuro
SVG
Firma vertical · claro
SVG
Firma vertical · oscuro
SVG
Símbolo mL · claro
SVG
Símbolo mL · oscuro
SVG
Monocromático · tinta oscura
SVG
Monocromático · blanco
SVGPara llevar a imprenta: los colores de este manual están definidos en sRGB. Solicita una prueba de color y la conversión correspondiente al perfil del soporte. Conserva la licencia de Source Sans 3 incluida en el kit.