La versión corta
- Un kit de marca es el conjunto de archivos listos para usar con los que cualquiera crea con el estilo de la marca: logos, códigos de color, fuentes, fondos, plantillas, imágenes aprobadas y la guía de estilo.
- Los logos van en el kit como SVG para pantallas, como PNG transparente para las herramientas del día a día y en versiones de un solo color, en blanco y en negro.
- Los códigos de color deben aparecer en todas las notaciones que se necesiten, normalmente hex y RGB para pantalla y CMYK para impresión.
- Los fondos y las plantillas son las partes de un kit de marca que más se usan y que más se olvidan.
- Un kit de marca se mantiene ordenado cuando tiene un solo lugar, un responsable, nombres de archivo claros y una carpeta de archivo para lo retirado.
En esta página
Un kit de marca es el conjunto de archivos listos para usar que cualquiera necesita para crear algo con el estilo de la marca: archivos del logo, códigos de color, fuentes, fondos, plantillas, imágenes aprobadas y una guía de estilo breve. Si la guía de estilo de marca explica las reglas, el kit entrega los materiales. Un buen kit permite que un freelance, un compañero nuevo o un asistente de IA empiece a trabajar en minutos sin hacerte ni una pregunta.
La lista del kit de marca
| Elemento | Qué incluir | Por qué importa |
|---|---|---|
| Logo | SVG, PNG transparente, versiones de un color en negro y blanco, versión cuadrada para avatar | Cada herramienta y cada fondo necesita un archivo distinto |
| Colores | Nombres, códigos hex, RGB y CMYK, con la función de cada color | Evita que la gente saque colores de capturas de pantalla |
| Fuentes | Nombres de las fuentes con enlaces de descarga o archivos, y notas de licencia | Evita sustitutos que cambian todo el aspecto |
| Fondos | Fondo distintivo en los tamaños habituales, código CSS y color plano de reserva | Ocupa la mayor parte de casi todos los diseños |
| Plantillas | Tus publicaciones, historias, diapositivas y cabecera de correo más habituales | La forma más rápida de mantener la coherencia |
| Imágenes | Fotos aprobadas, ilustraciones o sets de iconos | Impide que se cuelen fotos de banco de imágenes |
| Guía de estilo | Las reglas en una página, en PDF o como enlace | Explica cuándo usar cada archivo |
Conviene pensar en quién abre el kit y qué busca primero cada persona:
- Quien gestiona las redes sociales quiere plantillas y fondos en los tamaños correctos
- Quien desarrolla la web quiere el logo en SVG, los códigos de color en CSS y el origen de las fuentes
- La imprenta quiere el logo para impresión, los valores CMYK y los colores directos, si los hay
- Un compañero nuevo quiere la guía de una página y un buen ejemplo de cada formato
- Un asistente de IA quiere las reglas en texto plano y los colores como códigos
Archivos de logo: qué formatos necesitas
Un logo, varios archivos. Cada formato resuelve un problema distinto, y elegir mal es la causa habitual de logos borrosos, con caja o con el color equivocado.
| Formato | Para qué sirve | Ojo con |
|---|---|---|
| SVG | Webs, apps y todo lo que cambia de tamaño | Algunas herramientas de oficina y de redes no lo aceptan |
| PNG, transparente | Presentaciones, documentos, herramientas de redes, correo | Expórtalo grande, por ejemplo 2.000 px de ancho, para que se vea nítido |
| PDF o EPS | Impresión, rotulación y merchandising | Envíalo a imprentas, no a redes sociales |
| JPEG | Casi nunca para logos | No tiene transparencia, así que llega dentro de una caja blanca |
Incluye también una versión que funcione sobre tu fondo distintivo. Un logo que desaparece sobre tu propio degradado es un problema común y evitable; poner un logo sobre un degradado explica cómo arreglarlo.
Colores, fuentes y el resto de lo básico
:root {
--night-blue: #0e1424; /* rgb(14 20 36) grounds, 60% */
--flour: #f3e6d0; /* rgb(243 230 208) text and panels, 30% */
--oven-glow: #e0823d; /* rgb(224 130 61) accents only, 10% */
--crust: #6b4a2f; /* rgb(107 74 47) support */
/* Signature background, with the flat fallback first */
--ground: #0e1424;
--ground-gradient: radial-gradient(90% 70% at 50% 110%, #e0823d 0%, #6b4a2f 25%, #1b2238 55%, #0e1424 100%);
}Con las fuentes, anota de dónde viene cada una y qué permite su licencia. Muchas tipografías buenas son gratuitas en Google Fonts; las comerciales suelen necesitar una licencia por persona o por sitio web, así que déjalo por escrito. Cómo elegir las fuentes de una marca te ayuda con la elección en sí.
Fondos y plantillas: los archivos que más se usan
Los logos se llevan la atención, pero los fondos y las plantillas se llevan el uso. Prepara tu fondo distintivo en los tamaños que más publicas, para que nadie estire una imagen cuadrada hasta hacerla banner. Después construye las plantillas encima.
Publicación 4:5
1080 × 1350
Historia 9:16
1080 × 1920
Diapositiva 16:9
1920 × 1080
Vista previa de enlace
1200 × 630
Cabecera de correo
1200 × 600
Banner de LinkedIn
1584 × 396
Una estructura de carpetas del kit de marca que se mantiene ordenada
brand-kit/
00-read-me-first.pdf (the one-page style guide)
01-logo/
cornerloaf-logo-primary.svg
cornerloaf-logo-primary.png
cornerloaf-logo-white.png
cornerloaf-logo-black.png
cornerloaf-avatar-square.png
print/cornerloaf-logo-primary.pdf
02-colour/
colours.css
colours.pdf (hex, RGB, CMYK, names, jobs)
03-type/
fonts.txt (names, links, licence notes)
04-backgrounds/
ground-1080x1350.png
ground-1080x1920.png
ground-1920x1080.png
05-templates/
06-imagery/
_archive/ (retired files, never deleted)Kit desordenado
- logo-final-v3-NUEVO-usa-este.png
- Cinco copias del kit repartidas en distintos discos
- Colores viejos y nuevos mezclados
- Fuentes nombradas pero sin enlace
Kit ordenado
- logo-marca-blanco.png, con el nombre de lo que es
- Un solo lugar, enlazado desde todos los demás
- Archivos retirados movidos a _archive
- Cada fuente con su origen y su licencia
Cómo mantener un kit de marca al día
- 1
Un lugar, un responsable
Guarda una única copia maestra y nombra a una persona que pueda cambiarla. Todos los demás enlazan a ella en lugar de descargar copias.
- 2
Nombra los archivos por lo que son
Marca, elemento, variante, formato. Nunca «final» ni «nuevo»: dejan de ser ciertos a la semana siguiente.
- 3
Archiva, no borres
Cuando algo se retire, muévelo a una carpeta de archivo. Los archivos viejos junto a los nuevos son la forma en que vuelven los colores antiguos.
- 4
Revisa tras cada cambio
Plantilla nueva, color nuevo, logo con otra composición: actualiza el kit el mismo día y luego la guía de estilo. Mira la coherencia de marca para entender por qué la deriva empieza aquí.
Gradiently guarda un kit de marca dentro del estudio, con tus logos, colores y fuentes a un clic de cada diseño, y el Designer lo aplica cuando crea o edita trabajo. Si llevas más de una marca, cada una tiene su propio kit y sus propios Marks. Configurar tu kit de marca en Gradiently te lo explica paso a paso.
Preguntas frecuentes
¿Qué es un kit de marca?
Un kit de marca es una colección de archivos de marca listos para usar: logos, códigos de color, fuentes, fondos, plantillas, imágenes aprobadas y una guía de estilo breve.
¿Qué archivos de logo debe tener un kit de marca?
Un SVG y un PNG transparente del logo principal, versiones de un color en blanco y negro, una versión cuadrada para avatar y un PDF o EPS para impresión.
¿Qué diferencia hay entre un kit de marca y una guía de estilo?
La guía de estilo son las reglas; el kit de marca son los archivos. El kit debe incluir la guía, y la guía debe decir dónde está el kit.
¿Cómo comparto un kit de marca con un freelance?
Comparte un enlace a la carpeta maestra única, con la guía de estilo arriba. Evita mandar copias, que se quedan desfasadas.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil
