Plantilla de guía de marca para sitios web: las reglas web que el PDF del logotipo omite

Una plantilla de guía de marca escrita para sitios web, no para impresión: uso del logotipo en fondos claros y oscuros, una tabla de colores con combinaciones de contraste que cumplen, una escala tipográfica, estados de botones y enlaces, reglas de imágenes y tono, y una lista de aprobación para cualquiera que cree una página.

La mayoría de las guías de marca se hicieron para un diseñador que maqueta un folleto. Muestran el logotipo sobre blanco, enumeran colores en CMYK y Pantone, nombran una tipografía que el sitio web no puede cargar y no dicen nada de cómo se ve un botón al pasar el cursor. Luego un desarrollador, un cliente o un creador web tiene que adivinarlo. Esta plantilla cubre las decisiones que de verdad necesita un sitio web, en el orden en que las necesitará quien construya una página, con las cifras de accesibilidad ya incorporadas.

Quién lee una guía de marca web

Escriba para tres lectores. Un diseñador que creará páginas nuevas y quiere el sistema. Un desarrollador o creador que necesita valores exactos: códigos hex, nombres de fuentes, tamaños en píxeles. Y un editor de contenidos, a menudo el dueño del negocio, que añadirá una página dentro de dos años y necesita saber qué no hacer. Si el tercer lector no puede aplicar una regla, esa regla no sobrevivirá.

Que sea breve. Un resumen de una página con los valores clave, más una referencia más larga, es mejor que un documento de 60 páginas que nadie abre. Si necesita un primer borrador rápido de los valores, nuestro generador gratuito de guías de estilo de marca lo crea; esta guía trata de lo que debe incluir la versión final.

1. Logotipo

Los sitios web ponen logotipos en lugares donde la impresión nunca llega: una pestaña del navegador de 32 píxeles, una cabecera en modo oscuro, un menú móvil, una firma de correo. Especifique:

Recurso	Uso	Formato
Logotipo principal, para fondos claros	Cabecera y pie en temas claros	SVG, más PNG a 2x
Logotipo para fondos oscuros	Cabecera oscura, modo oscuro, pie sobre oscuro	SVG, más PNG a 2x
Símbolo compacto (solo el icono)	Cabecera móvil, iconos de app, avatares sociales	SVG, PNG cuadrado
Favicon	Pestaña del navegador y marcadores	Símbolo simplificado que siga reconociéndose a 16-32px

Después, las reglas: ancho mínimo de visualización (por ejemplo, "nunca menos de 96px para el logotipo completo; por debajo, use el símbolo"), espacio de respeto alrededor, los fondos sobre los que puede ir y dos o tres ejemplos de mal uso (estirado, con otro color, sobre una foto recargada). Entregue siempre la versión oscura como archivo aparte; pedir a alguien que "lo invierta" produce un logotipo distinto cada vez.

2. Color, con el contraste ya comprobado

El fallo de accesibilidad más común en sitios con marca es un color corporativo que no puede llevar texto. El requisito de contraste de WCAG (criterio de conformidad 1.4.3) pide al menos 4.5:1 para texto normal y 3:1 para texto grande, que el W3C define como al menos 18 puntos, o 14 puntos en negrita, aproximadamente 24px o 18.5px. El W3C señala que los valores no deben redondearse: 4.499:1 no cumple. Los botones, bordes de formulario e iconos que la gente necesita ver tienen su propio requisito de 3:1 frente a los colores adyacentes (1.4.11).

Así que no enumere los colores por separado. Enumérelos con las combinaciones en las que están permitidos:

Nombre	Hex	Función	Texto permitido encima	No permitido
Forest	#1F5130	Botones principales, encabezados	Texto blanco, cualquier tamaño	Texto negro
Sage	#8DB596	Fondos, ilustraciones	Texto oscuro (#1A1A1A)	Texto blanco de cualquier tamaño
Ember	#E4572E	Destacados, texto grande de titulares	Comprobar por tamaño; a menudo solo texto grande	Texto de cuerpo, enlaces sobre blanco
Ink	#1A1A1A	Texto de cuerpo	Sobre blanco, Paper, Sage	Sobre Forest
Paper	#FAF7F2	Fondo de página	Ink, Forest	Texto en Sage

Los valores hex anteriores son un ejemplo; mida sus propias combinaciones con cualquier verificador de contraste y anote la proporción junto a cada combinación permitida. Defina también los colores por función, no solo por nombre: "acción principal", "enlace", "error", "éxito", "borde". Así un desarrollador puede construir un tema, y un modo oscuro, sin adivinar.

3. Tipografía

Las tipografías de impresión a menudo no tienen licencia para la web o pesan demasiado para cargar rápido. Decida:

Fuentes web: los nombres exactos de las familias y los pesos que cargará. Dos familias y tres o cuatro pesos son suficientes; cada archivo extra ralentiza la primera vista.
Alternativas: las fuentes del sistema que se usan mientras carga la fuente web o si falla.
Una escala tipográfica: tamaños para cada nivel, en escritorio y en móvil.

Nivel	Escritorio	Móvil	Peso	Interlineado
H1	48px	34px	700	1.1
H2	34px	26px	700	1.2
H3	24px	20px	600	1.3
Cuerpo	18px	17px	400	1.6
Pequeño	15px	14px	400	1.5

Añada las reglas que la gente rompe: nada de texto de cuerpo en mayúsculas, nada de texto justificado, longitud de línea de unos 60-80 caracteres y enlaces subrayados en el texto de cuerpo para que no dependan solo del color.

4. Botones, enlaces y estados

Esta es la sección que las guías de impresión nunca tienen y los sitios web siempre necesitan. Para cada tipo de botón, especifique todos los estados:

Elemento	Predeterminado	Al pasar el cursor	Foco de teclado	Desactivado
Botón principal	Relleno Forest, texto blanco, radio de 999px	Forest más oscuro	Contorno visible de 2px con separación de 2px	Relleno gris, texto aún legible, no clicable
Botón secundario	Contorno Forest, texto Forest	Relleno Sage pálido	Misma regla de contorno	Contorno gris
Enlace de texto	Forest, subrayado	Subrayado más grueso	Contorno	-

Nunca quite el contorno de foco por motivos estéticos; quienes navegan con teclado dependen de él. Indique el radio de las esquinas, el relleno interior y si los botones usan mayúscula solo inicial. Un solo botón principal por vista es una buena regla para dejar por escrito.

5. Maquetación y espaciado

Dé una escala de espaciado (por ejemplo 4, 8, 12, 16, 24, 32, 48, 64, 96px) y diga que todos los espacios salen de ella. Indique el ancho máximo del contenido, el margen lateral en móvil y cuántas columnas usa la cuadrícula en cada ancho. Estas reglas son las que hacen que páginas creadas con meses de diferencia por personas distintas parezcan un solo sitio.

6. Imágenes e iconos

Fotografía: personas y lugares reales antes que bancos de imágenes; describa la luz y el ambiente con dos ejemplos buenos y dos malos.
Recorte: qué proporciones usa (por ejemplo 16:9 en cabeceras, 4:3 en tarjetas, 1:1 en fotos del equipo).
Texto alternativo: una regla para escribirlo: describa qué muestra la imagen y por qué está ahí; alt vacío para imágenes puramente decorativas.
Iconos: un solo juego de iconos, un solo grosor de trazo, una sola escala de tamaños. Mezclar estilos de iconos es la forma más rápida de que un sitio parezca montado a retazos.

7. Tono y palabras

El tono de marca en la web es sobre todo claridad. Escriba tres o cuatro rasgos de tono con un ejemplo de "esto, no aquello" para cada uno, y luego las microrreglas: cómo escribe fechas, precios, teléfonos, el nombre de la empresa, las palabras que evita y qué dicen los botones ("Reservar una visita", no "Enviar"). Incluya los mensajes de error y los estados vacíos; también son marca.

8. Correos y accesos

Los visitantes se encuentran con su marca fuera del sitio web: correos de confirmación, restablecimientos de contraseña, la página de acceso de un portal de clientes. Indique qué logotipo, colores y nombre de remitente usan y quién es responsable de ellos. Un correo de restablecimiento de contraseña fuera de marca parece phishing.

Lista de aprobación para cualquier página nueva

El logotipo es la versión correcta para el fondo y supera el tamaño mínimo.
Cada combinación de texto y fondo está en la lista permitida o se ha medido a 4.5:1 (3:1 para texto grande).
Solo se usan las fuentes y pesos especificados; los tamaños salen de la escala.
Los botones muestran el estado al pasar el cursor y un foco de teclado visible.
El espaciado usa la escala; el ancho del contenido respeta el máximo.
Las imágenes siguen las reglas de recorte y de texto alternativo; los iconos salen del único juego.
Los textos siguen el tono y las microrreglas.

Cómo aplicar la guía en muchos sitios

Las agencias y organizaciones con muchos sitios tienen un problema más difícil: la guía aplicada una vez se desvía a medida que editan personas distintas. Lo que la mantiene es llevar los valores clave a la plataforma en lugar de a un PDF. En la plataforma de marca blanca de We.Inc, una marca se configura una vez con su nombre, logotipos claro y oscuro, favicon, colores de marca, una fuente de Google y estilo de botones, y todo ello se traslada al acceso de clientes, al panel y a los correos. Nuestras páginas de marca personalizada y de gobernanza de marca profundizan más.

Logotipos claro y oscuro por separado más un favicon, como en la sección 1 de la plantilla, con imágenes de fondo opcionales para modo claro y oscuro.

Colores principal, de acento y secundario como valores hex, más la fuente de Google de la marca. Compruebe usted mismo el contraste de cada combinación de texto; la plataforma no lo certifica.

Colores y redondeo de esquinas de los botones principal y secundario, los valores del estado predeterminado de la sección 4.

Una página de acceso con los colores y el logotipo de la marca, sin rastro de la marca WeInc — La marca trasladada al acceso de clientes, el lugar del que trata la sección 8.

Vista previa en el editor de correos de un correo de Sitio web listo con el logotipo de la marca y un botón verde — Los correos del sistema usan el logotipo y los colores de la marca, con vista previa antes de enviarse.

Para ver una marca configurada de principio a fin en una demostración, agende una demo.

Fuentes

Última revisión: 2026-10-25.

Preguntas frecuentes

¿Qué debe incluir una guía de marca para un sitio web?

Versiones del logotipo para fondos claros y oscuros más un favicon, colores con las combinaciones de texto que permiten, fuentes web y una escala tipográfica, estados de botones y enlaces, espaciado, reglas de imágenes e iconos, reglas de tono y microtextos, y cómo se ven los correos y los accesos.

¿Qué contraste necesitan los colores de marca para el texto?

WCAG 1.4.3 pide al menos 4.5:1 para texto normal y 3:1 para texto grande (18 puntos, o 14 puntos en negrita). Los valores no se redondean, así que 4.499:1 no cumple.

¿En qué se diferencia una guía de estilo web de una guía de marca para impresión?

Añade cosas que la impresión nunca necesita: logotipos para fondos oscuros y favicons, combinaciones de color con contraste comprobado, fuentes web cargables con alternativas, tamaños tipográficos adaptables y estados interactivos como el paso del cursor y el foco de teclado.

¿Cómo mantienen las agencias muchos sitios de clientes fieles a la marca?

Llevando los valores clave a la plataforma en lugar de a un PDF. En la plataforma de marca blanca de We.Inc, los logotipos, los colores, una fuente y el estilo de botones se definen una vez por marca y se trasladan al acceso de clientes, al panel y a los correos.