# Plantilla de kit de marca: logos, colores, fuentes y voz en un sitio [Canonical HTML page](https://gradiently.design/es/guide/brand-kit-template) Un kit de marca solo sirve si alguien puede abrirlo y crear un diseño correcto en diez minutos. Esta plantilla hace justo eso, sección por sección, con un ejemplo ya rellenado. ## The short version - Una plantilla de kit de marca tiene siete secciones: lo básico, logos, colores, tipografía, estilo característico, voz y reglas. - Los archivos del logo deben venir en versión completa, versión pequeña y variantes clara y oscura, en SVG y PNG transparente. - Los colores deben listarse con HEX y RGB para pantalla, y CMYK si imprimes, junto con para qué sirve cada uno. - La sección de voz es la que permite que otras personas y las herramientas de IA escriban con el tono de tu marca, así que merece ejemplos reales. - Un kit de marca es más corto y práctico que una guía de estilo completa: es el conjunto de archivos y códigos que la gente necesita hoy. Una **plantilla de kit de marca** es una estructura para rellenar con los archivos y datos que cualquiera necesita para diseñar para tu marca: archivos del logo, códigos de color, fuentes, tu estilo característico, voz y unas pocas reglas. La plantilla de abajo tiene siete secciones, en el orden en que la gente busca las cosas. Cópiala en un documento o una carpeta compartida, rellena cada parte y tendrás un kit con el que pueden trabajar desde el primer momento un freelance, una persona recién contratada o un asistente de IA. Si todavía estás decidiendo *por qué* lo necesitas, [kit de marca](https://gradiently.design/es/guide/brand-kit) lo explica. Esta página es la plantilla práctica. ## La plantilla de kit de marca ```text KIT DE MARCA: [Nombre de la marca] Última actualización: [fecha] Responsable: [nombre, email] 1. DATOS BÁSICOS Una frase: qué hacemos y para quién Público: Productos o servicios: Web / usuarios en redes: 2. LOGOS (SVG + PNG transparente de cada uno) Logo completo: claro ___ oscuro ___ Símbolo / icono: claro ___ oscuro ___ Tamaño mínimo: ___ px de ancho Espacio de protección: ___ por todos los lados 3. COLORES (nombre / uso / HEX / RGB / CMYK) Fondo: Principal: Apoyo: Neutro claro: Acento (con moderación): 4. TIPOGRAFÍA Fuente de titulares + peso: Fuente de cuerpo + peso: Dónde obtenerlas / licencia: 5. ESTILO PROPIO Fondo o código de Mark: Tratamiento fotográfico: 6. VOZ Tres palabras: Decimos: ___ Nunca decimos: ___ Ejemplo de titular: 7. REGLAS Siempre: Nunca: ``` Cópiala en cualquier documento y traduce los encabezados si quieres. Rellena lo que ya sepas; deja huecos antes que inventar. ## Qué necesita cada sección | Sección | Incluye | Hueco habitual | | --- | --- | --- | | Lo básico | Una frase, público, productos o servicios, enlaces | Ningún contacto para dudas | | Logos | Versiones completa y pequeña, clara y oscura, en SVG y PNG | Solo un JPG con un recuadro blanco alrededor | | Colores | Nombres, usos, HEX, RGB, CMYK si se imprime | Códigos sin decir qué color es para qué | | Tipografía | Fuentes de titulares y de texto, pesos, licencia | Nombres de fuentes sin archivos ni origen | | Estilo característico | El fondo o la superficie, el tratamiento de las fotos | No aparece, así que cada diseñador se inventa uno | | Voz | Tres palabras, ejemplos, palabras a evitar | Adjetivos sin ejemplos | | Reglas | Dos o tres líneas de siempre y nunca | Una lista larga que nadie lee | Las siete secciones y el hueco que más a menudo se deja en cada una. ### Logos: los archivos que exportar Exporta cada versión del logo en SVG para todo lo que se escala y en PNG transparente para las herramientas que no aceptan SVG. Nombra los archivos con claridad, como `brand-logo-full-dark.svg`, para que nadie tenga que abrirlos para saber cuál es cuál. [Variantes de logo](https://gradiently.design/es/guide/logo-variations) explica qué versiones necesitas y cuándo, y [tamaños de logo](https://gradiently.design/es/guide/logo-sizes) lista las medidas que piden las plataformas. ### Colores: códigos y funciones Lista cada color con un nombre y una función, no solo un código. «Acento: solo botones y precios» evita que el acento inunde un diseño. Aquí tienes un ejemplo rellenado para un pequeño estudio de yoga. - Fondo: carbón: #1f2421 - Principal: eucalipto: #49695a - Apoyo: bruma salvia: #b7cbbd - Neutro: lino: #f6f1e9 - Acento: arcilla: #d98b5f Cinco colores, cada uno con su función escrita en el nombre. El acento arcilla es para horarios de clase y precios, nada más. Añade los valores RGB junto a los códigos hex, y CMYK si algo se imprime. [Hex a RGB](https://gradiently.design/es/guide/hex-to-rgb) tiene la conversión, y [RGB vs CMYK](https://gradiently.design/es/guide/rgb-vs-cmyk) explica por qué los colores de imprenta necesitan sus propios valores. ### Tipografía: nombres, archivos y licencias Escribe los nombres y pesos exactos de las fuentes, como «Inter Bold para titulares, Inter Regular para texto», y pon los archivos de las fuentes o un enlace de descarga en la misma carpeta. Apunta también la licencia. Una fuente gratuita para uso personal puede no cubrir la campaña de anuncios de un cliente, y el kit es donde un freelance lo va a comprobar. [Fuentes de marca](https://gradiently.design/es/guide/brand-fonts) te ayuda si aún no has elegido. ### Estilo característico: la sección que olvidan casi todos los kits La mayoría de los kits de marca se quedan en logo, colores y fuentes, y por eso los diseños hechos con ellos siguen desviándose. El fondo o la superficie detrás de tus diseños ocupa casi todo el encuadre, así que necesita su propia entrada: qué es, dónde encontrarlo y cómo se tratan las fotos encima. Si tu estilo es un Mark de Gradiently, escribe aquí su código público, por ejemplo `GR·K7Q2·MX`, para que cualquiera encuentre exactamente el correcto. Sin esta sección, cada diseñador nuevo se inventa un fondo y la marca se convierte poco a poco en varias marcas. ### Voz: los ejemplos ganan a los adjetivos ### Difícil de usar - Nuestra voz es cálida, cercana y profesional - Evita sonar comercial - Sé inclusivo ### Fácil de usar - Decimos: «Ven como eres, nosotros ponemos la esterilla.» - Nunca decimos: «Última oportunidad» ni «No te lo pierdas» - Tratamos a todo el mundo de tú; nunca damos por hecha la flexibilidad ni la forma física Los ejemplos importan todavía más ahora que las herramientas de IA escriben muchos primeros borradores. Un asistente con tres frases reales en tu voz la imitará mucho mejor que uno con tres adjetivos. [Voz de marca para la IA](https://gradiently.design/es/guide/brand-kit-voice) explica cómo escribir esta sección tanto para máquinas como para personas. ## Un ejemplo rellenado, aplicado La prueba de un kit de marca es si alguien que no te conoce puede crear con él una publicación correcta. Esto es lo que produce el kit del estudio de yoga en manos de un freelance nuevo, sin ninguna otra indicación. Una publicación vertical de un estudio de yoga que anuncia una clase al amanecer los sábados a las 7 h, sobre el fondo de degradado del estudio El anuncio de una clase hecho solo con el kit: paleta, fuentes, estilo y voz. Una historia vertical del mismo estudio de yoga con el texto Ven como eres, con el mismo fondo y la misma tipografía Una historia hecha con el mismo kit. Otro formato, la misma marca, sin necesidad de más instrucciones. ## Dónde guardar tu kit de marca - **Una carpeta compartida** con el documento y todos los archivos de logo y fuentes. Sencillo y universal. - **Dentro de tu herramienta de diseño**, para que colores, fuentes y logos estén a un clic en vez de copiados a mano. - **Un responsable y una fecha.** Alguien se encarga de actualizarlo, y todos pueden ver si el kit está al día. El kit de marca de Gradiently, incluido en Pro, cubre casi toda esta plantilla: nombre y descripción, logos, paletas de color, una fuente de titulares y una de texto (puedes subir archivos de fuentes), voz, público y a qué se dedica la marca. Puede leer tu web para rellenar por ti el nombre, la descripción, el color y el icono. Diseña sobre un Mark como estilo característico, y el Designer escribe con la voz de tu kit y lo aplica al maquetar los diseños. [Configurar el kit de marca](https://gradiently.design/es/guide/brand-kit-setup) te guía paso a paso. ## FAQ ### ¿Qué debe incluir un kit de marca? Los datos básicos de la marca, archivos del logo en varias versiones, códigos de color con sus usos, fuentes, tu estilo característico, ejemplos de voz y unas pocas reglas. ### ¿Qué diferencia hay entre un kit de marca y una guía de estilo? Un kit de marca es el conjunto práctico de archivos y códigos que la gente necesita para diseñar hoy. Una guía de estilo es un documento más largo que explica las reglas y su razonamiento a fondo. ### ¿En qué formatos deben ir los logos de un kit de marca? SVG para todo lo que se escala y PNG transparente para las herramientas que no aceptan SVG, cada uno en versión clara y oscura. ### ¿Cuánto debe ocupar un kit de marca? Lo bastante poco como para leerlo en diez minutos. Si necesita más, pasa el detalle a una guía de estilo aparte.