Última revisión:
Un logo es una ventana a tu marca — no el marco completo. Suelta el tuyo; Suite de Marca extrae una paleta, evalúa cada par contra WCAG y te entrega tokens CSS con un README inicial. Construido en el navegador, por el estudio. Tus píxeles nunca tocan un servidor.
Se queda en tu navegador. Mira cómo lo verificamosDe Muntin Digital — un estudio web de restaurantes de una sola persona en Silver Spring, MD. The window in.
¿No sabes qué subir?
var(--cream))var(--ink))Haz click en cualquier chip para copiar su hex al portapapeles. Los roles se asignan por intención cromática — el color más saturado ancla al Primario, no el píxel más abundante.
Este logo se lee como monocromático. Los roles de abajo etiquetan los extremos de claridad; tómalos como punto de partida, no como sistema.
Esta imagen tiene muy poca variación cromática — la paleta extraída quizá no represente un sistema de marca. Prueba el Taller para refinarla, o sube un logo de colores planos.
Un color domina todo lo demás — la pared detrás del pizarrón del menú, el fondo de tu cuadrícula de Instagram, el papel crema de tu menú. Usa el chip Neutro (o el más claro de los dos clusters más grandes). La contención en esta capa es lo que hace que el resto se lea.
El único color en el que quieres que el ojo del comensal aterrice primero — el botón “Reservar mesa”, el toldo, el eyebrow del encabezado del menú. Usa Primario. Cada valor de par accesible te dice qué color de texto poner encima para que se lea.
Acento 1, Acento 2 y Secundario son para divisores, precios, sub-encabezados, estados hover — una decisión a la vez. Una página que usa los cinco a tope se lee como cinco marcas distintas. Más sobre disciplina de paleta →
Cinco hex (o menos — deja en blanco lo que aún no tengas). Cada cuadro muestra un swatch en vivo mientras escribes. La paleta se aplica con Aplicar — vas directo a la cuadrícula de contraste y a las descargas.
Tres preguntas rápidas — carácter, fondo y cuántos colores — y eliges la paleta candidata que se vea como tu restaurante. La matemática (distancia de matiz, contraste WCAG, gama OKLab) corre mientras vas haciendo clic.
Algunos colores típicos de restaurante para empezar. Pasa el cursor sobre cada baldosa para ver para qué se usa. ¿No te convence ninguno? Escribe un hex propio abajo.
Especias cálidas y tierra
Bosque y profundos
Marino y tinta
Vibrantes y expresivos
El color base es el ancla de tu marca — con él se relacionan tu menú, los letreros, el avatar de Instagram y los candidatos del Taller. Elige el más cercano a lo que quieres; el Taller te ayuda a ubicarlo.
El carácter de la paleta cae en una familia de la teoría del color. Las paletas análogas usan matices vecinos (15–30° aparte) y se ven tranquilas. Las complementarias usan matices opuestos (180°) y se ven con energía. La matemática corre en OKLab — el espacio de color con el que el ojo juzga similitud, no el de la pantalla.
El fondo es la superficie donde vive el 80% de tu diseño: el papel del menú, el fondo del sitio, el feed de Instagram. Tu color principal y los acentos tienen que leerse encima sin esfuerzo. La matemática asegura que cada acento cumpla con el contraste WCAG AA (4.5:1) contra el fondo elegido.
La mayoría de las marcas de restaurante usan de 3 a 5 colores. Menos se ve seco; más complica cualquier decisión de diseño. Elige el conjunto más chico que aún te dé lo que necesitas.
Osteria Giardino · Silver Spring
Nuestro menú cambia cada semana con lo que traen las granjas. La cena empieza a las 5 PM; se recomienda reserva de jueves a domingo.
Reservar mesaMar–Dom, 5–10 PM · 912 Main St, Silver Spring, MD
Lee de a pares: cada celda es el contraste de texto sobre color para ese par. Se omiten los duplicados de la diagonal. Ratios de 7+ cumplen AAA (texto normal, cualquier tamaño). 4,5+ cumple AA. 3+ cumple AA solo para texto grande (18pt+ o 14pt negrita). Por debajo de 3 falla para texto de cuerpo. El conmutador de simulación re-renderiza la cuadrícula con proyecciones Brettel/Viénot — vista perceptual, no diagnóstico clínico.
AAA ≥ 7
AA ≥ 4,5
AA-grande ≥ 3
falla < 3
El Panel Muntin es una imagen PNG de 1200×1260 que arma tu logo, paleta, muestra tipográfica y vista de menú en la misma cuadrícula 2×2 que nuestro distintivo de marca: un solo archivo que puedes mandar por correo a un diseñador, publicar en Instagram o imprimir. El ZIP incluye el Panel más palette.css, tokens.json y un README.md con los roles de cada color. Todo se arma en tu navegador — sin subida.
Cinco versiones de tu logo subido con cambio de color. Cada una es un PNG transparente al doble de la resolución original — úsalas sobre fondos claros u oscuros, imprímelas a cualquier tamaño. Generadas en tu navegador; el logo nunca sale del dispositivo.
Mejor con logos PNG o SVG que ya tengan fondo transparente. Los logos JPEG se renderizarán con sus píxeles de fondo originales (el cambio de color solo toca píxeles no transparentes).
Cuatro lienzos listos para usar vestidos con tu paleta. Pon tu logo, mándalo a una imprenta, publícalo en Instagram, o pégalo en la puerta. Generados en tu navegador a resolución de impresión.
Guarda esta paleta en tu Taller para que te siga entre dispositivos.
Acceder para guardarNo es un generador de logos, una identidad de marca terminada ni una recomendación tipográfica. Más sobre los límites abajo.
Un logo en proceso es sensible: puede ser un rebrand que aún no anuncias, un concepto que no le has mostrado a un socio, una marca terminada por la que pagaste dinero real. Nueve afirmaciones. Cada una se puede verificar en tu propio navegador en menos de un minuto.
Ninguna llamada a fetch(), XMLHttpRequest, FormData, ni envío de formulario se dispara cuando sueltas un archivo. El navegador lee los píxeles vía URL.createObjectURL() y los dibuja sobre un canvas — todo lo demás es del lado del cliente.
El único endpoint que usa esta página es GET /tools/brand-suite/. Ni /api/brand-suite-upload, ni /api/extract-palette, ni logger. El Worker no te escucha.
curl -X POST https://muntin.digital/tools/brand-suite/. Respuesta: 405 Method Not Allowed (o similar) — nada está escuchando POSTs.Plausible recibe propiedades de una lista corta y fija de valores enumerados. Un PNG de 1.3 MB se convierte en file_type: "png" + size_bucket: "500kb-2mb". Un logo teal se convierte en primary_hue: "teal". Tus valores hex crudos, el nombre de archivo y los bytes nunca son un valor en ningún evento.
plausible. Suelta un logo; extrae una paleta. Cuando se dispare el evento, mira el payload. Valores como primary_hue: "teal" — nunca primary_hex: "var(--teal)", nunca filename: "borrador-cliente-v7.png".El arreglo de píxeles y la paleta extraída viven sólo en variables de JavaScript, que desaparecen al cerrar la pestaña. No hay estado persistente para la herramienta.
Esta página carga tres archivos JavaScript del mismo origen: el site.js del sitio (nav + switch de idioma), brand-suite.js específico de la herramienta (matemática + UI), y brand-worker.js (el Web Worker que corre k-means fuera del hilo principal). Más un script de analítica (Plausible) que recibe los valores bucket. Nada más — sin Google Tag Manager, sin Meta Pixel, sin widget de chat, sin session replay, sin dependencias fetched desde CDN. El empaquetador ZIP va inline en el JavaScript de esta página; no es una biblioteca de terceros.
plausible.io/js/…, site.js, brand-suite.js, y brand-worker.js. Eso es todo.Esta página pone <meta name="referrer" content="no-referrer">. Cuando haces clic a un enlace que sale de Suite de Marca (al glosario, a un artículo, a la página de servicios), el destino nunca ve la URL de la que viniste — así, aunque agregáramos más adelante un enlace "guarda esta paleta" (codificado en el fragmento de la URL), ningún tercero podría cosecharlo vía el encabezado Referer.
<meta name="referrer" content="no-referrer"> en el <head>. Haz clic en cualquier enlace saliente; confirma que el encabezado Referer de la solicitud del destino está ausente.Sin paso de build, sin minificación, sin framework. El módulo de matemáticas es JavaScript plano — puedes leer cada línea, incluyendo el empaquetador ZIP de 50 líneas que pusimos inline en lugar de importar una dependencia de 100 KB.
/tools/brand-suite/brand-suite.js directo. Busca function extractPalette — ese es todo el k-means, a la vista. Busca buildZipBlob en el <script> de esta página — ese es el empaquetador ZIP.Cierra la pestaña, reabre la herramienta: la zona de carga vacía, la tira de paleta en blanco, la cuadrícula de contraste oculta. No hay cuenta, ni historial guardado, ni "bienvenido de vuelta, aquí tienes tu último logo."
/tools/brand-suite/. Cada superficie volvió a su estado inicial.La agrupación corre en brand-worker.js — un Web Worker cargado desde el mismo origen. Sus únicas entradas son el arreglo de píxeles que pasamos vía postMessage y el valor k. Importa sólo ./brand-suite.js (mismo origen), y nuestro código nunca le entrega un fetch, un socket, ni ninguna primitiva de red. El worker muere al cerrar la pestaña.
/tools/brand-suite/brand-worker.js directo. El archivo completo está bajo las 60 líneas — cuenta los fetches, XHRs y WebSockets. Encontrarás cero.Cinco pruebas que puedes correr en cualquier herramienta creativa gratuita — extractor de paletas, redimensionador de logos, generador de moods de marca, constructor de favicon — antes de subir una marca en proceso. Nos calificamos nosotros al lado de una herramienta gratuita de captación típica para que la diferencia sea concreta, no retórica.
| La prueba | Suite de Marca | Herramienta típica |
|---|---|---|
| 1. ¿Al subir un archivo se dispara una solicitud de red?Abre DevTools → Network. Suelta un archivo. | Ninguna solicitud se dispara. | El archivo hace POST al servidor en cuanto lo sueltas. |
| 2. ¿La afirmación de privacidad está junto al punto de carga?No enterrada en una política. | Insignia "Se queda en tu navegador" junto a la zona de carga, panel de 9 pasos en la página. | Enlace a Política de Privacidad solo en el pie; consentimiento implícito al enviar. |
| 3. ¿Hay un gate de cuenta / newsletter / cookies?Cualquier cosa que exija "aceptar todo" antes de poder usar la herramienta. | Nada — sin gate, sin popup, sin banner de cookies. | "Deja tu email para desbloquear tu paleta." |
| 4. ¿Analítica de terceros, session replay, scripts de marketing?DevTools → Network → filtra JS. | Solo Plausible (privacidad primero); props con buckets (nunca valores hex, nunca nombres de archivo). | Google Analytics, Meta Pixel, HubSpot, session replay — apilados. |
| 5. ¿El código fuente es legible?Click derecho → Ver código fuente. | Sin minificar, bajo ~600 líneas, cada función matemática + el empaquetador ZIP con nombre. | Bundle minificado de SaaS; matemática escondida en un dashboard. |
Aplica estas cinco pruebas a cualquier herramienta de flujo creativo que pida una carga — logos, fotos, facturas, contratos, escaneos de identificación. Una herramienta que silenciosamente hace POST con tu archivo lo está guardando. Una herramienta sin afirmación de privacidad en la página está esquivando la pregunta. Tienes permiso de irte antes de arrastrar nada.
No todo activo pertenece a toda conversación. Un logo en proceso es de nivel medio — más sensible que un menú público, menos sensible que un número fiscal, pero entregado rutinariamente a herramientas gratis como si fuera Nivel 1. Cuatro niveles, cada uno con distinta audiencia y distinto nivel de cuidado. Tus activos de marca suelen vivir en los Niveles 1–2.
Todo lo que cualquiera puede encontrar en tu sitio, tu ficha o caminando por delante — incluyendo cualquier logo que ya esté publicado.
Compartir con: Cualquiera. Optimiza agresivamente — así es como los clientes te encuentran.
Legal compartirlo, pero útil para un rival — o palanca para una plataforma. La mayor parte del trabajo de marca en proceso vive aquí.
Compartir con: Diseñador, contador, consultor, broker — bajo NDA. No plataformas, no competidores, no "herramientas gratis" que guarden tu carga.
Tus números operativos reales, pipeline de clientes, detalles de empleados.
Compartir con: Solo dentro del negocio. Proveedor de POS, procesador de nómina, contador — y sólo bajo un contrato escrito que especifique qué pueden y no pueden hacer con los datos.
Protegido por ley. Perderlo tiene multas, demandas o exposición criminal atadas.
Manejar con: Almacenamiento encriptado, logging de acceso, contratos con cláusulas de ciberseguridad. Nunca por correo. Nunca en una hoja compartida. Si un proveedor lo pide de forma casual, eso solo es una señal de alerta.
Aplica esto en cualquier momento que te pidan entregar datos — evaluaciones de proveedores, contratos, solicitudes de crédito, formularios de "auditoría gratis". El patrón: los datos nunca suben de nivel. Un proveedor de Nivel 3 no recibe acceso a Nivel 4 solo porque lo pidió. Una audiencia de Nivel 1 (plataforma, listado, competidor) no recibe Nivel 2. La forma más fácil de reducir tu superficie de ataque es dejar de ofrecer datos que nadie en realidad te exigía.
Suite de Marca es un kit inicial — extrae colores de un logo que ya te gusta y evalúa la matemática de accesibilidad. No construye la marca. Estos límites son estructurales, no decorativos: una herramienta gratis que silenciosamente afirmara lo contrario haría perder tu tiempo y debilitaría el trabajo real del estudio.
Suite de Marca lee un logo que ya tienes. No dibujará una marca nueva, no corregirá un problema de kerning, ni convertirá una foto con el celular de tu letrero en vectores. Si aún no tienes un logo que te convenza, la extracción de paleta lo reflejará — basura entra, basura sale.
Una identidad terminada necesita una versión de un solo color para bordado, relieve e impresión a pequeña escala — y con frecuencia una variante invertida para composiciones sobre fondo oscuro. Suite de Marca no las produce en v1. Un diseñador lo hace como debe ser.
La vista previa usa las tipografías de nuestro sitio para dar contexto, no como recomendación. La combinación tipográfica es el segundo mayor portador de tono después del color; adivinarla algorítmicamente produce resultados que se ven todos iguales. Trabajo curado, no una heurística.
El README del ZIP nombra el rol de cada color y sus pares accesibles. No cubre espacio de resguardo, tamaños mínimos, ejemplos de mal uso, voz, dirección fotográfica ni los otros capítulos de una guía de estilo real. Eso es lo que entrega el servicio pagado de identidad.
El bloque de vista previa muestra la paleta aplicada a una sola tarjeta de ejemplo. Es una comprobación de legibilidad, no una pieza de portafolio. Tarjetas de presentación, portadas de menú, grids de Instagram, rótulos de fachada — son proyectos de diseño, no exportaciones de un clic.
Lo que sí es: un kit inicial para pensar.
Tres audiencias, tres entregas, una sola herramienta gratuita. Lleva el Panel Muntin a un diseñador — muestra tu paleta en contexto en una sola página. Lleva las variables CSS a un desarrollador — se pegan directo en una hoja de estilos. Lleva los códigos hex a la imprenta o al rotulista — es el idioma de cualquier hoja técnica de impresión. El Panel es el archivo que un lector no técnico puede compartir; el resto es para quien construye cosas para ti.
Cuando quieras una identidad terminada, contrata a un diseñador.
Un proyecto de Identidad de Marca cubre el trabajo de concepto, las reglas de uso, las variantes, la tipografía y un paquete de entregables que puedas pasarle a cualquier proveedor. Trae el Panel Muntin, la paleta y los tokens que generaste aquí — son 30 minutos del proyecto ya hechos.
Ver Identidad de Marca (desde \$1.5k)Cada chequeo que esta herramienta hace conecta con un concepto específico en la biblioteca. Dos puntos de partida — una definición, una guía.
el sistema visible completo alrededor de tu logo
El sistema visible completo que lleva a un negocio por cada punto de contacto — logo, colores, tipografía, voz y las reglas para usarlos. Un…
Leer la definición Glosarioel conjunto curado de colores que le pertenecen a tu marca
El conjunto curado de colores que le pertenecen a una marca — típicamente un primario, un secundario, un pequeño número de acentos y un par …
Leer la definición Glosarioun color de marca ajustado hasta cumplir WCAG AA
Una versión de un color de marca cuya luminosidad se ha desplazado lo justo — preservando matiz y carácter — para que el texto en ese color …
Leer la definición Glosarioun nombre para una decisión, no para un valor
Una referencia con nombre para una decisión de marca — un color, un tamaño de fuente, un radio de borde, un paso de espaciado — exportada co…
Leer la definición ArtículoLo que el diseñador necesita para trabajar — top 10 ventas, items a cortar, cambios de precio, items destacados, marcas dietéticas, objetivos impresos, digitales y POS.
Abrir la hojaTipo de activo, ubicación del archivo, última actualización, dueño, licencia. Atrapa el logo que solo existe en la laptop de un ex-empleado.
Abrir la hoja