{"id":14796,"date":"2025-09-01T22:41:32","date_gmt":"2025-09-01T22:41:32","guid":{"rendered":"https:\/\/www.opensolar.com\/directrices-de-marca\/"},"modified":"2025-11-04T12:46:17","modified_gmt":"2025-11-04T12:46:17","slug":"directrices-de-marca","status":"publish","type":"page","link":"https:\/\/www.opensolar.com\/es\/directrices-de-marca\/","title":{"rendered":"Directrices de marca"},"content":{"rendered":"
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t

Directrices de marca<\/p>\n<\/h1>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tAbout<\/a>><\/span>\t\t\t\t\t\t\t\t\t\t\t\t\t\tDirectrices de marca\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n
\n
\n
\n

Logo<\/p>\n\n\n\n\"\"\n\n\n\n\"\"\n<\/div>\n\n\n\n

\n

Colores<\/p>\n\n\n\n\"\"\n<\/div>\n\n\n\n

\n

Typography<\/p>\n\n\n\n\"\"\n\n\n\n\"\"\n<\/div>\n\n\n\n

\n

Voz y tono<\/p>\n\n\n\n\"\"\n<\/div>\n\n\n\n

\n

Fotograf\u00eda<\/p>\n\n\n\n\"\"\n<\/div>\n\n\n\n

\n

Iconos<\/p>\n\n\n\n\"\"\n\n\n\n\"\"\n\n\n\n\"\"\n<\/div>\n\n\n\n

\n

Asociaciones<\/p>\n\n\n\n\"\"\n<\/div>\n<\/div>\n<\/div>\n\n

\n

Ten en cuenta que cuando utilizas nuestros activos, te adhieres a nuestros T\u00e9rminos y Condiciones.<\/a><\/p>\n<\/div>\n\n

\n
\n

Logo<\/p>\n\n\n\nDescarga<\/a>\n\n\n\n\"\"\n<\/div>\n\n\n\n

\n
\n

Nuestro logotipo<\/p>\n<\/div>\n\n\n\n

\n\"\"\n<\/div>\n<\/div>\n\n\n\n
\n
\n

Nuestro s\u00edmbolo<\/p>\n<\/div>\n\n\n\n

\n\"\"\n<\/div>\n<\/div>\n\n\n\n
\n
\n

Modos claro y oscuro<\/p>\n<\/div>\n\n\n\n

\n
\n\"\"\n<\/div>\n\n\n\n
\n\"\"\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\n

Espacio claro<\/p>\n\n\n\n

Nuestro logotipo necesita espacio para respirar.
Para asegurarnos de que siempre sea claro e impactante, debemos mantener una zona protegida de espacio libre a su alrededor.
Esta regla impide que otros elementos se acerquen demasiado.<\/p>\n<\/div>\n\n\n\n

\n
\n\"\"\n\n\n\n

Bloqueo horizontal<\/p>\n\n\n\n\"\"\n\n\n\n

Bloqueo vertical<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

En im\u00e1genes<\/p>\n\n\n\n

Para mantener la legibilidad, el logotipo debe tener un alto contraste con su fondo. Cuando lo coloques sobre una foto o una imagen compleja, selecciona siempre la versi\u00f3n del logotipo (por ejemplo, en color o blanco) que m\u00e1s destaque. <\/p>\n<\/div>\n\n\n\n

\n
\n\"\"\n\n\n\n

Esta imagen tiene un fondo oscuro y profundo, por lo que utilizamos el logotipo blanco<\/strong>. Nuestro s\u00edmbolo amarillo y el texto blanco crean un gran contraste contra el fondo. <\/p>\n\n\n\n\"\"\n\n\n\n

Esta imagen tiene un fondo claro y brillante, por lo que utilizamos el logotipo a todo color<\/strong>. Nuestro s\u00edmbolo amarillo y el texto gris crean un gran contraste contra el fondo. <\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

Cosas que debes evitar<\/p>\n<\/div>\n\n\n\n

\n\"\"\n<\/div>\n<\/div>\n<\/div>\n\n
\n
\n

Colores<\/p>\n\n\n\n

<\/p>\n\n\n\n\"\"\n<\/div>\n\n\n\n

\n
\n

Resaltar Amarillo<\/p>\n\n\n\n

Este es nuestro color de acento principal, utilizado para llamar la atenci\u00f3n y a\u00f1adir un destello de energ\u00eda. Util\u00edzalo con moderaci\u00f3n para conseguir el m\u00e1ximo impacto. <\/p>\n\n\n\n

Ideal para:<\/strong> Titulares clave, llamadas a la acci\u00f3n, o como color de texto de contraste sobre fondos oscuros (azules).<\/p>\n\n\n\n

No lo hagas:<\/strong> Utilizarlo para grandes bloques de color o cuerpo de texto.<\/p>\n<\/div>\n\n\n\n

\n

#FFCC26<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

Azul primario<\/p>\n\n\n\n

Es el color central de nuestra marca y la parte m\u00e1s reconocible de nuestra identidad visual. Debe ser el color dominante en la mayor\u00eda de los dise\u00f1os. <\/p>\n\n\n\n

Lo mejor para:<\/strong> Titulares principales, texto destacado, iconos de \u00abSoluci\u00f3n\u00bb y momentos principales de la marca.<\/p>\n<\/div>\n\n\n\n

\n

#2A71DB<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

Cuerpo del texto<\/p>\n\n\n\n

Este color casi negro es nuestro color principal para todo el texto. Se utiliza para garantizar una alta legibilidad sin la dureza de un negro puro. <\/p>\n\n\n\n

Lo mejor para:<\/strong> Todo el cuerpo del texto, los p\u00e1rrafos y la mayor\u00eda de los subt\u00edtulos.<\/p>\n<\/div>\n\n\n\n

\n

#0A090B<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

Texto secundario<\/p>\n\n\n\n

Este gris apagado crea una jerarqu\u00eda visual clara. Se utiliza para informaci\u00f3n de apoyo que debe destacar menos que el texto principal. <\/p>\n\n\n\n

Lo mejor para:<\/strong> Peque\u00f1os textos de descripci\u00f3n, pies de foto, titulares de \u00abPuntos de dolor\u00bb y otra informaci\u00f3n no cr\u00edtica.<\/p>\n<\/div>\n\n\n\n

\n

#4F4D55<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

Lienzo<\/p>\n\n\n\n

Este es nuestro color de fondo est\u00e1ndar. Proporciona un lienzo suave, limpio y moderno para nuestro contenido, y es preferible al blanco puro para la mayor\u00eda de las aplicaciones. <\/p>\n\n\n\n

Lo mejor para:<\/strong> Fondos de diapositivas, fondos de p\u00e1ginas web y maquetaci\u00f3n general.<\/p>\n\n\n\n

Nota:<\/strong> El Blanco Puro (#FFFFFF<\/code><\/strong> ) puede utilizarse como fondo alternativo cuando los dise\u00f1os requieran un mayor contraste o incluyan cuadros grises en capas.<\/p>\n<\/div>\n\n\n\n

\n

#F9F9F9<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n

\n
\n

Typography<\/p>\n\n\n\n\"\"\n<\/div>\n\n\n\n

\n
\n

Tipo de letra<\/p>\n\n\n\n

Nuestro tipo de letra es Inter.<\/p>\n\n\n\n

Inter est\u00e1 disponible gratuitamente en Google.<\/a><\/p>\n<\/div>\n\n\n\n

\n\"\"\n<\/div>\n<\/div>\n\n\n\n
\n
\n

Peso<\/p>\n\n\n\n

Para crear un dise\u00f1o limpio, coherente y f\u00e1cil de leer, utilizamos cuatro pesos espec\u00edficos de la fuente de nuestra marca. Cada peso tiene un prop\u00f3sito distinto. <\/p>\n\n\n\n

Luz<\/strong>

Utiliza este peso con moderaci\u00f3n para conseguir una sensaci\u00f3n de ligereza y sofisticaci\u00f3n. Es mejor reservarlo para textos grandes, de \u00abpresentaci\u00f3n\u00bb, como un eslogan importante en una diapositiva de presentaci\u00f3n o una cita grande de un cliente. <\/p>\n\n\n\n

Nota: Evita utilizar Luz para textos peque\u00f1os o p\u00e1rrafos largos, ya que puede resultar dif\u00edcil de leer.<\/p>\n\n\n\n

Regular<\/strong>

Este es nuestro peso principal por defecto para todo el cuerpo del texto. Est\u00e1 optimizado para una legibilidad m\u00e1xima en p\u00e1rrafos, listas y la mayor\u00eda del contenido general. <\/p>\n\n\n\n

Medio<\/strong>

Utiliza Medio para subt\u00edtulos, llamadas clave o para a\u00f1adir \u00e9nfasis dentro de un bloque de texto. Crea un claro nivel secundario de importancia y funciona bien para texto sobre fondos de color. <\/p>\n\n\n\n

Semi Negrita<\/strong>

Este es nuestro peso m\u00e1s pesado, reservado para todos los titulares principales y declaraciones de alta prioridad. Est\u00e1 dise\u00f1ado para captar la atenci\u00f3n y establecer el mensaje m\u00e1s importante. <\/p>\n<\/div>\n\n\n\n

\n\"\"\n<\/div>\n<\/div>\n\n\n\n
\n
\n

Dimensionado<\/p>\n\n\n\n

Manteniendo las proporciones conseguir\u00e1s una jerarqu\u00eda importante. Utiliza esta gu\u00eda de tama\u00f1os como punto de partida, pero nunca sacrifiques la legibilidad. <\/p>\n<\/div>\n\n\n\n

\n\"\"\n<\/div>\n<\/div>\n<\/div>\n\n
\n
\n

Fotograf\u00eda<\/p>\n\n\n\n\"\"\n<\/div>\n\n\n\n

\n
\n

Secci\u00f3n<\/p>\n<\/div>\n\n\n\n

\n\"\"\n<\/div>\n<\/div>\n<\/div>\n\n
\n
\n

Iconos<\/p>\n\n\n\n\"\"\n<\/div>\n\n\n\n

\n
\n

Estilo<\/p>\n\n\n\n

Mantenemos nuestros iconos uniformes utilizando un estilo sin relleno con un trazo fino.<\/p>\n\n\n\n

Puedes utilizar un icono por s\u00ed mismo o contenerlo en una forma.<\/p>\n<\/div>\n\n\n\n

\n\"\"\n<\/div>\n<\/div>\n\n\n\n
\n
\n

Biblioteca<\/p>\n\n\n\n

La mayor\u00eda de nuestros iconos proceden de la biblioteca Material Symbols & Icons.<\/p>\n\n\n\n

La biblioteca est\u00e1 disponible en Google.<\/a><\/p>\n<\/div>\n\n\n\n

\n\"\"\n<\/div>\n<\/div>\n<\/div>\n\n
<\/div>\n