Manual de marca

01La idea y el tono

Kip-Up es una agencia digital de Lima que diseña, programa y automatiza para pequeñas y medianas empresas, y que además mantiene lo que entrega. Un kip-up es el salto con el que alguien se pone de pie de un impulso, y eso es lo que promete la marca: levantar un negocio, no contemplarlo.

El lema es «Ideas creativas con ejecución real.» Las dos mitades pesan igual y esa tensión es la marca entera: la parte creativa la lleva el rojo y la flecha que sube; la parte de ejecución la lleva el navy, la retícula y las cifras alineadas. Un mensaje de Kip-Up que solo tenga una de las dos mitades está mal escrito.

Cómo habla

• Con un número delante. Regla de la casa: nada de humo. Cada entrega tiene una métrica que se le enseña al cliente: pedidos que entraron, horas que se ahorraron, citas que no se perdieron. Antes de escribir «mejoramos tu proceso», se busca el número.
• En castellano llano. Se dice «cobrar», «reservar», «avisar al cliente»; no «solución integral», «sinergia» ni «ecosistema digital». Si una frase no se entiende leída en voz alta a un dueño de restaurante, se reescribe.
• De tú, sin palmaditas. Cercano y directo, nunca condescendiente. Se explica lo que se hizo y lo que falta, incluso cuando falta bastante.
• Con lo que no se puede hacer, por delante. Los límites y los precios se dicen pronto y sin adornos. Un alcance cerrado vale más que una promesa amplia.

Tres palabras y sus contrarias

Es	No es
Crecimiento. Todo apunta arriba y a la derecha: la flecha, el monograma, los informes mensuales.	Promesa de éxito. Se enseña la pendiente real, aunque sea corta.
Ejecución. Lo entregado funciona en producción, con dominio, copia de seguridad y quien lo atienda.	Prototipo bonito. Una maqueta no se presenta como un producto.
Confianza. Se documenta lo que se entrega para que el cliente pueda mantenerlo sin depender de la agencia.	Dependencia. Nada se guarda «por si acaso» para retener al cliente.

La marca y los productos

Kip-Up es la marca madre: la empresa, la relación con el cliente y la firma de todo lo que se entrega. Comandas, Citas y Kuantera son productos suyos, los tres. Lo que distingue a Kuantera no es de quién es, sino qué hace: es la pieza de facturación en la que se apoyan los demás. Cuando un encargo de la agencia tiene que emitir comprobantes, Comandas o Citas llaman a Kuantera por detrás en lugar de mandar al cliente a contratar a un tercero. En el dibujo técnico Kuantera queda debajo de los otros productos; en el organigrama sigue colgando de Kip-Up. Las dos cosas son ciertas y ninguna anula a la otra.

Kuantera tiene identidad propia (azul petróleo y menta) porque además se vende por su cuenta: empresas que contratan solo la facturación y desarrolladores que la conectan al sistema que ya tienen, gente que nunca va a contratar a la agencia. En esa pantalla, la marca que trabaja es Kuantera. Por eso lleva el respaldo «un producto de Kip-Up» en acceso, pie y documentos —donde toca decir de quién es— y en el resto de sus pantallas va sin nosotros. Los colores de Kuantera nunca entran en piezas de Kip-Up, ni al revés.

02El símbolo

El isotipo de Kip-Up es el monograma: una K cuyo brazo superior deja de ser un trazo recto y se convierte en una flecha roja curva que sale despedida hacia arriba a la derecha. La letra es la marca y el gesto es la promesa, en la misma figura. Fichero maestro: mark/kipup-monogram.svg.

Espacio de reserva

Tamaños mínimos

Por debajo de estos tamaños la curva roja se empasta con la K y el símbolo deja de leerse. Las muestras están a tamaño real:

Soporte	Mínimo	Con qué fichero
Interfaz y web	24 px de alto	mark/kipup-monogram.svg
Favicon	16 px	icons/favicon.svg y los PNG de 16 y 32 ya preparados
Impresión	8 mm de alto	mark/kipup-monogram.svg (vectorial)
Bordado, grabado, sello	12 mm	mark/kipup-monogram-mono-*.svg

Versiones del monograma

El monograma no es la flecha

El kit tiene dos figuras y se confunden con facilidad. Solo una representa a la marca:

La flecha de crecimiento en zigzag es un elemento gráfico de apoyo: sube en tres tramos y remata en un triángulo rojo. Vive en el patrón, en las viñetas de una presentación, en una ilustración de informe y —ese es su papel importante— haciendo de guion dentro del wordmark KIP-UP. Puesta sola en una cabecera, en un avatar o en un favicon, no dice «Kip-Up»: dice «flecha». Ahí va el monograma.

La flecha, además, siempre sube hacia la derecha. No se invierte, no se pone en bajada y no se le cambia el ángulo.

03El logotipo

El nombre se escribe KIP-UP en versales, en Poppins Bold, y el guion entre KIP y UP no es un guion: es la flecha de crecimiento, dibujada a escala del texto. Ahí es donde la flecha sí forma parte del logotipo.

En todos los ficheros el texto está convertido a trazos: el logotipo se ve igual en un ordenador que no tenga Poppins instalada, y por eso mismo nunca se recompone escribiendo «KIP-UP» con una fuente.

Wordmark

El nombre solo. Se usa cuando el monograma ya está cerca (la ficha de una tienda de aplicaciones, la cabecera de un documento que ya lleva el icono) o cuando la pieza es tan ancha que el bloqueo se pierde. Mínimo: 110 px de ancho en pantalla, 30 mm impreso.

Bloqueo horizontal

Monograma a la izquierda y nombre a la derecha, separados por el ancho del asta de la K. Es la versión por defecto: cabeceras de web y de aplicación, documentos, firmas de correo, presentaciones. Mínimo: 150 px de ancho.

Bloqueo vertical

Monograma arriba y nombre debajo, centrados. Para huecos cuadrados o casi: portadas, pantallas de carga, publicaciones en redes, camisetas, sellos. Mínimo: 130 px de ancho.

Con lema

El wordmark con «Ideas creativas con ejecución real.» debajo, en Poppins Medium y en gris de marca. Se usa una vez por pieza y en piezas de presentación: portada de propuesta, primera diapositiva, cabecera de una web, portada de un dossier. Nunca dentro de una aplicación ni repetido en un pie de página.

Qué versión toca en cada fondo

Fondo	Versión	Por qué
Crema #F8F5F0 o blanco	principal (sin sufijo)	K navy, brazo rojo. Es el uso por defecto.
Navy #1A1A2E, fondo oscuro o fotografía oscura	-dark-bg	La K pasa a crema y el brazo se queda rojo: el rojo sobre navy aguanta como forma.
Rojo de marca	-mono-white	Rojo sobre rojo no existe. Todo el logotipo en blanco.
Naranja de marca	-mono-navy	Sobre naranja, el navy da 8,27:1; el blanco se queda en 2,06:1.
Papelería a una tinta, sellos, grabado	-mono-black / -mono-white	Sin color de marca, para que no se imprima un rojo aproximado.
Fotografía con detalle o fondo de color medio	-dark-bg sobre una capa navy al 60 %	El logotipo nunca compite con la imagen: primero se apaga la imagen.

04Usos incorrectos

El logotipo se usa tal como sale del fichero. Cada muestra de abajo está dibujada, no descrita: es exactamente lo que no hay que hacer.

Y dos que no se pueden dibujar pero pesan igual: no se traduce ni se declina el lema («Ideas creativas con resultados reales» no es el lema), y no se usa el logotipo de Kip-Up para firmar trabajo que Kip-Up no ha hecho.

05El quipu

Una cuerda horizontal con hilos colgando y nudos, dibujada en perspectiva. Es el elemento gráfico de la casa: acompaña a lo que habla de datos, de registro o de histórico, que es de lo que vive un sistema.

El quipu andino registraba con nudos lo que había que recordar. Dice lo mismo que dice la segunda capa del nombre: registrar para poder decidir. Por eso aparece detrás de los textos que explican por qué un sistema es mejor que la memoria de alguien.

Dónde está aplicado hoy: la portada animada de kipups.com, en dos variantes —una de fondo, recortada y al 32 %, y otra en primer plano que gira con el scroll—. Decidido el 19/09/2026: el quipu se queda y entra al kit; no se sustituye por el gesto del salto.

06Color

La paleta es la de siempre: navy para el texto y las superficies oscuras, rojo para la acción, naranja como acento y crema como fondo. Lo que añade este manual es el reparto en escalas y el contraste medido, porque el rojo y el naranja de Kip-Up son bonitos y flojos: sirven de relleno, no de tinta.

Los siete colores de marca

Toda la marca cabe en siete colores. El resto de la interfaz sale de sus escalas: no se inventan tonos sueltos. Pulsa una muestra para copiar el hex.

Escalas 50–950

Cada color de marca se abre en once pasos con el mismo método (interpolación en OKLab con el color de marca anclado en el paso 500), así que el 500 es siempre el color exacto de la marca. En interfaz: 50–100 fondos suaves, 200 bordes, 500–600 rellenos activos, 700–800 texto sobre esos fondos suaves.

No hay escalas propias de warning ni de danger: warning es la escala del naranja de marca y danger es la del rojo. Un aviso y un error se pintan con el color de la marca, no con uno nuevo.

Colores de estado

Kip-Up no tenía colores de estado definidos. success e info son una PROPUESTA de este kit, no marca establecida: salen de las paletas de las que ya vienen el rojo y el naranja de Kip-Up (#2A9D8F y #457B9D conviven con #E63946 y #F4A261 en las paletas de origen). warning reutiliza el naranja de marca y danger el rojo de marca. Si la marca fija otros, se cambian aquí y en ningún sitio más.

Modo oscuro

En oscuro el navy de marca no es el fondo: es la superficie. El fondo baja un escalón hasta #12121F para que las tarjetas navy se despeguen sin inventar un color que la marca no tiene. El rojo y el naranja se aclaran solo cuando hacen de texto.

Series de datos

Orden fijo de series en gráficos e informes. El rojo abre porque es el color de la marca; el resto se aleja en tono para que se distingan también impresas en gris.

Lo que no llega a 4,5:1

La paleta de Kip-Up tiene cuatro puntos donde el contraste se queda corto. Están aquí con el número exacto y con la salida, en vez de escondidos:

Tabla de contraste (WCAG 2.1)

WCAG 2.1 · texto normal AA 4,5:1 · texto grande AA 3:1 (>=24px, o >=18.66px en negrita) · AAA 7:1 · elementos no textuales 3:1. Luminancia relativa WCAG sobre sRGB. Los ratios son exactos, no estimados.

Elementos no textuales (bordes, aros de foco)

WCAG pide 3:1 solo a lo que identifica un control o transmite información. Un separador decorativo no entra, y decirlo evita subir de gris todas las líneas del producto sin motivo.

07Tipografía

Dos familias, las dos con licencia abierta (OFL) y las dos dentro del kit, en fonts/. No se cargan desde Google Fonts: se sirven desde el propio proyecto, para que la web no dependa de un tercero y para que el manual funcione sin conexión.

Anton es condensada, de una sola anchura y pensada para caja alta: es una fuente de cartel. A 400 px llena la pantalla sin que un titular se parta en tres líneas, y esa es exactamente su función. No sirve para nada más, y conviene entender por qué: tiene un solo peso, no tiene cursiva y no trae cifras tabulares. Un H2 en Anton no se distingue de un H3, y una columna de importes se desalinea sola.

Instrument Sans lleva todo lo demás —titulares de sección, cuerpo, interfaz, tablas y documentos—, porque aguanta párrafos largos y tamaños pequeños, tiene toda la escala de pesos y trae cifras tabulares. La regla corta: si no es el cartel de la portada, es Instrument Sans.

Cambio del 20/09/2026. Antes eran Poppins e Inter. Las aplicaciones van detrás del manual: mientras migran, las dos parejas conviven. Lo que no vale es elegir según la pieza — lo nuevo se hace con las nuevas.

Kip-Up no tiene tipografía monoespaciada de marca. Cuando hace falta una de verdad —un identificador, un fragmento de código, un hex como los de esta página— se usa la pila del sistema, en el token --kipup-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace. Para importes y fechas no se cambia de familia: basta con font-variant-numeric: tabular-nums sobre Instrument Sans.

Escala

La escala completa, con las dos familias a todos sus pesos y en los dos modos, está en ui/tipografia.html:

Reglas de escritura

• Titulares en rojo, solo grandes. El rojo de marca como texto solo pasa AA a partir de 24 px, o de 18,66 px en negrita. Por debajo de eso, el texto rojo va en red-700 #A50022.
• Nada en versalitas largas. Las versalitas se quedan en la línea micro de 11 px. El nombre de la marca se escribe Kip-Up en texto corrido; KIP-UP en mayúsculas es el logotipo, no la palabra.
• Importes: S/ 38 420.00 — símbolo, espacio fino en los miles, punto decimal. Fechas dd/mm/aaaa. Horas de Lima.
• Sin cursiva salvo para una cita literal. El énfasis se hace con peso, no inclinando Inter.

08Interfaz

La hoja ui/kipup-ui.css es la traducción de la marca a producto: importa tokens/colors.css, declara las fuentes del kit y trae los componentes con los que están hechos los paneles de Kip-Up. Dentro no hay ni un hex suelto: todo sale de un token, para que cambiar el token cambie la interfaz entera y no queden dos verdades.

Los componentes llevan el prefijo kp- para poder convivir en un mismo build con la hoja de Kuantera, que usa k-. Los ejemplos de abajo no son capturas: están pintados con la hoja del kit, tal como se ve esta página.

Botones

El botón principal de producto (.kp-btn-primary) se rellena con --kipup-red-aa #C80E2E, el rojo de marca un escalón más oscuro, porque con etiqueta de 15 px el rojo exacto se queda en 4,17:1. El rojo exacto vive en .kp-btn-brand, que es grande por definición: héroes, portadas, llamadas de campaña. Es la misma decisión que la del texto, aplicada al relleno.

Estados y formularios

Reglas de la interfaz

• El rojo se administra. Es el color de la acción, no de la decoración: como mucho un rojo por pantalla que sea de verdad la acción principal. Si hay tres botones rojos, no hay ninguno.
• El crema es el fondo, el blanco es la tarjeta. En claro, la página va en #F8F5F0 y lo que se puede tocar va en blanco. En oscuro se invierte la lógica: el fondo baja a #12121F y la tarjeta es el navy de marca.
• Radios: 8 px en controles, 12 px en tarjetas, 20 px en piezas grandes, píldora en insignias. Espaciado en múltiplos de 4.
• Foco visible siempre. Aro rojo de 2 px con separación; en oscuro, red-400. No se quita nunca, ni «porque queda mejor».
• Iconos de línea de 1,75–2 px, 18 px en navegación y 16 px en botones. Sin iconos de colores ni rellenos.
• Cifras a la derecha y con tabular-nums; el signo delante del símbolo de moneda: − S/ 120.00.
• El logotipo cambia de fichero, no de color: las clases .kp-logo-light y .kp-logo-dark enseñan el SVG que toca en cada modo.

Ejemplo completo

Un panel de proyectos de la agencia con barra lateral, KPI, tabla, formulario y avisos, en claro y en oscuro. Es una pantalla real, no un dibujo: ui/ejemplo.html (trae un botón «Claro / oscuro» abajo a la derecha).

La auditoría de contraste que respalda la sección de color se puede volver a pasar con ui/auditar-contraste.mjs: recorre los pares de la hoja y devuelve los ratios, así que un token que se cambie sin mirar salta ahí.

09Iconos y aplicaciones

El icono de aplicación es el monograma centrado sobre un fondo lleno, con la esquina redondeada al 22,5 % (rx 115 sobre 512). Hay cuatro fondos y tres formas: redondeada (la de por defecto), cuadrada a sangre —para las tiendas y los avatares, que ya recortan ellas— y circular.

El favicon lleva el monograma sin fondo, para que se apoye en la pestaña del navegador en los dos modos; el icono de aplicación siempre lleva fondo lleno, porque un icono transparente sobre el escritorio de alguien no se ve.

Qué fichero se sube a cada sitio

Todas esas piezas tienen su maestro en SVG dentro de social/, email/, icons/ y pattern/: para una medida que no esté en la tabla se exporta desde el SVG, no se reescala un PNG.

Redes y portadas

Correo y Google Workspace

La consola de Google Workspace (Personalización → Logotipo) lleva el fichero de 320×132 con fondo blanco. La edición contratada no tiene icono de empresa aparte: la imagen que ve quien recibe un correo es la foto de perfil del remitente, así que ahí va kipup-icono-256.png. BIMI —el logotipo en cualquier bandeja de entrada— sigue descartado: pide un certificado de marca de pago.

Patrón

El patrón es la flecha de crecimiento repetida a baja opacidad, en mosaico de 200. Se usa en fondos grandes —portadas, cabeceras, la pantalla de acceso—, nunca detrás de texto pequeño y nunca detrás del logotipo. Si hace falta como imagen, está en png/pattern/ a 200 y 400.

Impresión

Los SVG son vectoriales y valen para cualquier tamaño; para imprenta se pasan a PDF o EPS desde el SVG, sin rasterizar. Equivalencias aproximadas, para pedir en una imprenta que no acepte el hex:

Color	Hex	CMYK aprox.	Pantone aprox.
navy	#1A1A2E	90 / 85 / 45 / 55	2380 C
rojo	#E63946	0 / 85 / 65 / 0	1785 C
naranja	#F4A261	0 / 40 / 65 / 0	1485 C
crema	#F8F5F0	2 / 3 / 5 / 0	11-0602 TCX

Son equivalencias de referencia, no medidas: antes de una tirada grande se pide prueba de color. A una tinta se usa siempre la versión -mono-black.

10Implementación

Llevar el kit a un proyecto

El kit no se instala: se copia. Lo que necesita una web o una aplicación es una carpeta con los SVG que use, los PNG de iconos y los tokens; el resto (fuentes, patrón, redes) se copia solo si la pieza lo usa.

# dentro del repositorio del proyecto
rsync -a --exclude node_modules --exclude _v1 --exclude _anterior \
      /home/yoiber/proyectos/kipup-brand/ design/brand/

# lo mínimo que se lleva una web a public/brand/
logo/kipup-bloqueo.svg  logo/kipup-bloqueo-dark-bg.svg
mark/kipup-monogram.svg icons/favicon.svg icons/safari-pinned-tab.svg
png/favicon/favicon.ico png/apple/apple-touch-icon-180.png
png/android/android-chrome-192.png png/android/android-chrome-512.png
png/android/maskable-icon-512.png png/social/og-1200x630.png
tokens/colors.css

Cabecera HTML

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">              <!-- 180 -->
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#E63946">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#1A1A2E">
<meta name="msapplication-TileColor" content="#E63946">
<meta property="og:image" content="https://kipups.com/og.png">          <!-- 1200×630 -->

El theme-color es el navy, no el rojo: es el color de la barra del navegador, y ahí manda el color de fondo de la marca. El mosaico de Windows sí va en rojo, porque el icono que lleva encima es blanco.

site.webmanifest

{ "name": "Kip-Up", "short_name": "Kip-Up",
  "theme_color": "#1A1A2E", "background_color": "#F8F5F0", "display": "standalone",
  "icons": [ { "src": "/android-chrome-192.png", "sizes": "192x192", "type": "image/png" },
             { "src": "/android-chrome-512.png", "sizes": "512x512", "type": "image/png" },
             { "src": "/maskable-icon-512.png",  "sizes": "512x512", "type": "image/png", "purpose": "maskable" } ] }

Tokens de color

/* CSS */      @import "tokens/colors.css";     color: var(--kipup-text);
                                               background: var(--kipup-red-aa);
/* Tailwind */ import colors from "./tokens/tailwind.colors.js";
               theme.extend.colors = colors;   → bg-red-500 text-ink-900 border-ink-200
/* SCSS */     @use "tokens/colors";           $red-500
/* JS / diseño */ tokens/colors.json           escalas, oscuro y la tabla de contraste
                  tokens/design-tokens.json    formato W3C, importable en Figma

Los cuatro ficheros de tokens se generan del mismo sitio (tokens/build-tokens.mjs): no se edita colors.css a mano, porque en el siguiente build se pierde.

Regenerar el kit

Todo el kit sale de tres generadores. Se ejecutan dentro de docker: en el servidor no se instala Node ni npm.

# desde la raíz del kit
docker run --rm -v $PWD:/kit -w /kit node:22-bookworm \
  sh -c "npm i --no-save --silent sharp opentype.js \
         && node tools/build-svg.mjs \
         && node tools/export-png.mjs"
python3 tools/make-ico.py

Generador	Qué hace
tools/build-svg.mjs	Dibuja todos los SVG maestros desde la geometría del símbolo y las fuentes, con el texto convertido a trazos. Es el único sitio donde se cambia la marca.
tools/export-png.mjs	Exporta los PNG y los JPG a todas las medidas, desde los SVG.
tools/make-ico.py	Empaqueta favicon.ico con los PNG de 16, 32 y 48.
tokens/build-tokens.mjs	Genera las escalas en OKLab y los cuatro ficheros de tokens.

Dos trampas conocidas, ya resueltas dentro de build-svg.mjs, por si alguien lo toca: el compositor de texto de opentype.js se atraganta con Poppins e Inter, así que el texto se compone glifo a glifo con el kerning a mano; y toPathData mete NaN en algunos puntos de control, así que los paths se serializan sin él.

Publicar el manual

rsync -a --delete --exclude node_modules/ --exclude _v1/ --exclude _anterior/ --exclude kuantera/ \
      /home/yoiber/proyectos/kipup-brand/ /opt/marca/

Queda servido en marca.kipups.com. Excluir kuantera/ no es opcional: es el punto de montaje del kit de Kuantera y, si se borra, el contenedor no arranca. La página es estática y no carga nada de internet: las fuentes salen de fonts/ y las imágenes, de las carpetas del propio kit.

Cuando cambie algo

1. Se edita el generador que corresponda, nunca el fichero de salida.
2. Se regenera todo con el comando de docker de arriba.
3. Se compara a ojo contra _v1/, que guarda la versión anterior de las piezas que están en producción.
4. Se copia a los proyectos que lo usen: kip-up-agency/kipups (design/brand/), Kip-Up Comandas y la carpeta de documentación.
5. Se anota el cambio en /opt/docs/MARCA.md, que es donde se mira primero.

Hay nombres de fichero que no se pueden cambiar porque están enlazados desde producción: los wordmarks y bloqueos con lema de logo/, el monograma y la flecha de mark/, los iconos de icons/ y todo png/google-workspace/. Se pueden mejorar por dentro; el nombre y el aspecto se quedan.

11Ficheros del kit (351)

La tabla sale de recorrer la carpeta, no de una lista escrita a mano: lo que aparece aquí existe en el disco. Se excluye node_modules/, que es una dependencia temporal del generador y no forma parte del kit.

Raíz del kit (3)

BRIEF.md	5 KB
README.md	6 KB
index.html	159 KB

Símbolo · monograma y flecha (SVG) (12)

mark/kipup-mark-dark-bg.svg	293 B
mark/kipup-mark-mono-black.svg	293 B
mark/kipup-mark-mono-navy.svg	293 B
mark/kipup-mark-mono-red.svg	293 B
mark/kipup-mark-mono-white.svg	293 B
mark/kipup-mark.svg	293 B
mark/kipup-monogram-dark-bg.svg	420 B
mark/kipup-monogram-mono-black.svg	420 B
mark/kipup-monogram-mono-navy.svg	420 B
mark/kipup-monogram-mono-red.svg	420 B
mark/kipup-monogram-mono-white.svg	420 B
mark/kipup-monogram.svg	420 B

Logotipo · wordmark y bloqueos (SVG) (20)

logo/kipup-bloqueo-dark-bg.svg	2 KB
logo/kipup-bloqueo-mono-black.svg	2 KB
logo/kipup-bloqueo-mono-navy.svg	2 KB
logo/kipup-bloqueo-mono-red.svg	2 KB
logo/kipup-bloqueo-mono-white.svg	2 KB
logo/kipup-bloqueo-vertical-dark-bg.svg	2 KB
logo/kipup-bloqueo-vertical-mono-black.svg	2 KB
logo/kipup-bloqueo-vertical-mono-navy.svg	2 KB
logo/kipup-bloqueo-vertical-mono-red.svg	2 KB
logo/kipup-bloqueo-vertical-mono-white.svg	2 KB
logo/kipup-bloqueo-vertical.svg	2 KB
logo/kipup-bloqueo.svg	2 KB
logo/kipup-logo-tagline-dark-bg.svg	16 KB
logo/kipup-logo-tagline.svg	16 KB
logo/kipup-wordmark-dark-bg.svg	2 KB
logo/kipup-wordmark-mono-black.svg	2 KB
logo/kipup-wordmark-mono-navy.svg	2 KB
logo/kipup-wordmark-mono-red.svg	2 KB
logo/kipup-wordmark-mono-white.svg	2 KB
logo/kipup-wordmark.svg	2 KB

Iconos de aplicación y favicon (SVG) (16)

icons/favicon.svg	420 B
icons/kipup-appicon-cream-circle.svg	517 B
icons/kipup-appicon-cream-square.svg	514 B
icons/kipup-appicon-cream.svg	523 B
icons/kipup-appicon-maskable.svg	514 B
icons/kipup-appicon-navy-circle.svg	517 B
icons/kipup-appicon-navy-square.svg	514 B
icons/kipup-appicon-navy.svg	523 B
icons/kipup-appicon-red-circle.svg	517 B
icons/kipup-appicon-red-square.svg	514 B
icons/kipup-appicon-red.svg	523 B
icons/kipup-appicon-white-circle.svg	517 B
icons/kipup-appicon-white-square.svg	514 B
icons/kipup-appicon-white.svg	523 B
icons/mstile.svg	467 B
icons/safari-pinned-tab.svg	420 B

Redes, portadas y fondos (SVG maestros) (16)

social/cover-docs-1500x600.svg	34 KB
social/facebook-cover-820x312.svg	29 KB
social/google-workspace-320x132-cream.svg	2 KB
social/google-workspace-320x132.svg	2 KB
social/google-workspace-bloqueo-320x132.svg	2 KB
social/instagram-post-1080x1080.svg	26 KB
social/instagram-story-1080x1920.svg	31 KB
social/linkedin-empresa-1128x191.svg	5 KB
social/linkedin-personal-1584x396.svg	32 KB
social/login-bg-1920x1080.svg	10 KB
social/og-1200x630-light.svg	32 KB
social/og-1200x630.svg	32 KB
social/play-feature-1024x500.svg	32 KB
social/wallpaper-2560x1440.svg	24 KB
social/x-header-1500x500.svg	34 KB
social/youtube-2560x1440.svg	48 KB

Correo (1)

email/firma-bloqueo.svg

2 KB

Patrón (2)

pattern/kipup-pattern-dark.svg	601 B
pattern/kipup-pattern.svg	600 B

Tokens de color (6)

tokens/build-tokens.mjs	32 KB
tokens/colors.css	8 KB
tokens/colors.json	19 KB
tokens/colors.scss	5 KB
tokens/design-tokens.json	11 KB
tokens/tailwind.colors.js	3 KB

Interfaz (8)

ui/auditar-contraste.mjs	4 KB
ui/ejemplo-claro.png	492 KB
ui/ejemplo-oscuro.png	498 KB
ui/ejemplo.html	17 KB
ui/kipup-ui.css	22 KB
ui/tipografia-claro.png	469 KB
ui/tipografia-oscuro.png	473 KB
ui/tipografia.html	9 KB

Tipografías (OFL) (12)

fonts/IBMPlexMono-Medium.ttf	134 KB
fonts/IBMPlexMono-Regular.ttf	132 KB
fonts/IBMPlexMono-SemiBold.ttf	137 KB
fonts/Inter-Medium.ttf	408 KB
fonts/Inter-Regular.ttf	402 KB
fonts/Inter-SemiBold.ttf	410 KB
fonts/Inter-Variable.ttf	856 KB
fonts/OFL.txt	4 KB
fonts/Poppins-Bold.ttf	152 KB
fonts/Poppins-Medium.ttf	155 KB
fonts/Poppins-Regular.ttf	157 KB
fonts/Poppins-SemiBold.ttf	154 KB

Generadores (3)

tools/build-svg.mjs	18 KB
tools/export-png.mjs	8 KB
tools/make-ico.py	540 B

PNG · favicon e iconos de navegador (7)

png/favicon/favicon-128.png	2 KB
png/favicon/favicon-16.png	415 B
png/favicon/favicon-32.png	708 B
png/favicon/favicon-48.png	1000 B
png/favicon/favicon-64.png	1 KB
png/favicon/favicon-96.png	2 KB
png/favicon/favicon.ico	2 KB

PNG · iOS, Android y Windows (12)

png/android/android-chrome-192.png	4 KB
png/android/android-chrome-512.png	16 KB
png/android/maskable-icon-192.png	3 KB
png/android/maskable-icon-512.png	11 KB
png/apple/apple-touch-icon-120.png	2 KB
png/apple/apple-touch-icon-152.png	2 KB
png/apple/apple-touch-icon-167.png	2 KB
png/apple/apple-touch-icon-180.png	3 KB
png/windows/mstile-150x150.png	2 KB
png/windows/mstile-310x150.png	2 KB
png/windows/mstile-310x310.png	3 KB
png/windows/mstile-70x70.png	742 B

PNG · tiendas de aplicaciones (2)

png/stores/appstore-1024.png	30 KB
png/stores/playstore-512.png	16 KB

PNG · iconos de aplicación (36)

png/appicon/kipup-appicon-cream-1024.png	48 KB
png/appicon/kipup-appicon-cream-256.png	7 KB
png/appicon/kipup-appicon-cream-512.png	17 KB
png/appicon/kipup-appicon-cream-circle-1024.png	52 KB
png/appicon/kipup-appicon-cream-circle-256.png	8 KB
png/appicon/kipup-appicon-cream-circle-512.png	20 KB
png/appicon/kipup-appicon-cream-square-1024.png	41 KB
png/appicon/kipup-appicon-cream-square-256.png	5 KB
png/appicon/kipup-appicon-cream-square-512.png	14 KB
png/appicon/kipup-appicon-navy-1024.png	48 KB
png/appicon/kipup-appicon-navy-256.png	7 KB
png/appicon/kipup-appicon-navy-512.png	17 KB
png/appicon/kipup-appicon-navy-circle-1024.png	52 KB
png/appicon/kipup-appicon-navy-circle-256.png	8 KB
png/appicon/kipup-appicon-navy-circle-512.png	20 KB
png/appicon/kipup-appicon-navy-square-1024.png	41 KB
png/appicon/kipup-appicon-navy-square-256.png	5 KB
png/appicon/kipup-appicon-navy-square-512.png	14 KB
png/appicon/kipup-appicon-red-1024.png	44 KB
png/appicon/kipup-appicon-red-256.png	6 KB
png/appicon/kipup-appicon-red-512.png	16 KB
png/appicon/kipup-appicon-red-circle-1024.png	49 KB
png/appicon/kipup-appicon-red-circle-256.png	8 KB
png/appicon/kipup-appicon-red-circle-512.png	19 KB
png/appicon/kipup-appicon-red-square-1024.png	37 KB
png/appicon/kipup-appicon-red-square-256.png	5 KB
png/appicon/kipup-appicon-red-square-512.png	13 KB
png/appicon/kipup-appicon-white-1024.png	32 KB
png/appicon/kipup-appicon-white-256.png	6 KB
png/appicon/kipup-appicon-white-512.png	13 KB
png/appicon/kipup-appicon-white-circle-1024.png	37 KB
png/appicon/kipup-appicon-white-circle-256.png	7 KB
png/appicon/kipup-appicon-white-circle-512.png	15 KB
png/appicon/kipup-appicon-white-square-1024.png	27 KB
png/appicon/kipup-appicon-white-square-256.png	5 KB
png/appicon/kipup-appicon-white-square-512.png	10 KB

PNG · símbolo (48)

png/mark/kipup-mark-1024.png	18 KB
png/mark/kipup-mark-2048.png	54 KB
png/mark/kipup-mark-256.png	3 KB
png/mark/kipup-mark-512.png	7 KB
png/mark/kipup-mark-dark-bg-1024.png	19 KB
png/mark/kipup-mark-dark-bg-2048.png	55 KB
png/mark/kipup-mark-dark-bg-256.png	3 KB
png/mark/kipup-mark-dark-bg-512.png	7 KB
png/mark/kipup-mark-mono-black-1024.png	16 KB
png/mark/kipup-mark-mono-black-2048.png	48 KB
png/mark/kipup-mark-mono-black-256.png	2 KB
png/mark/kipup-mark-mono-black-512.png	5 KB
png/mark/kipup-mark-mono-navy-1024.png	18 KB
png/mark/kipup-mark-mono-navy-2048.png	53 KB
png/mark/kipup-mark-mono-navy-256.png	3 KB
png/mark/kipup-mark-mono-navy-512.png	6 KB
png/mark/kipup-mark-mono-red-1024.png	19 KB
png/mark/kipup-mark-mono-red-2048.png	56 KB
png/mark/kipup-mark-mono-red-256.png	3 KB
png/mark/kipup-mark-mono-red-512.png	6 KB
png/mark/kipup-mark-mono-white-1024.png	13 KB
png/mark/kipup-mark-mono-white-2048.png	36 KB
png/mark/kipup-mark-mono-white-256.png	2 KB
png/mark/kipup-mark-mono-white-512.png	5 KB
png/mark/kipup-monogram-1024.png	32 KB
png/mark/kipup-monogram-2048.png	86 KB
png/mark/kipup-monogram-256.png	5 KB
png/mark/kipup-monogram-512.png	13 KB
png/mark/kipup-monogram-dark-bg-1024.png	32 KB
png/mark/kipup-monogram-dark-bg-2048.png	87 KB
png/mark/kipup-monogram-dark-bg-256.png	5 KB
png/mark/kipup-monogram-dark-bg-512.png	13 KB
png/mark/kipup-monogram-mono-black-1024.png	25 KB
png/mark/kipup-monogram-mono-black-2048.png	72 KB
png/mark/kipup-monogram-mono-black-256.png	4 KB
png/mark/kipup-monogram-mono-black-512.png	9 KB
png/mark/kipup-monogram-mono-navy-1024.png	29 KB
png/mark/kipup-monogram-mono-navy-2048.png	80 KB
png/mark/kipup-monogram-mono-navy-256.png	5 KB
png/mark/kipup-monogram-mono-navy-512.png	11 KB
png/mark/kipup-monogram-mono-red-1024.png	30 KB
png/mark/kipup-monogram-mono-red-2048.png	83 KB
png/mark/kipup-monogram-mono-red-256.png	5 KB
png/mark/kipup-monogram-mono-red-512.png	11 KB
png/mark/kipup-monogram-mono-white-1024.png	20 KB
png/mark/kipup-monogram-mono-white-2048.png	48 KB
png/mark/kipup-monogram-mono-white-256.png	4 KB
png/mark/kipup-monogram-mono-white-512.png	9 KB

PNG · logotipo y bloqueos (58)

png/logo/kipup-bloqueo-1000w.png	15 KB
png/logo/kipup-bloqueo-2000w.png	37 KB
png/logo/kipup-bloqueo-4000w.png	100 KB
png/logo/kipup-bloqueo-dark-bg-1000w.png	15 KB
png/logo/kipup-bloqueo-dark-bg-2000w.png	38 KB
png/logo/kipup-bloqueo-dark-bg-4000w.png	101 KB
png/logo/kipup-bloqueo-mono-black-1000w.png	11 KB
png/logo/kipup-bloqueo-mono-black-2000w.png	30 KB
png/logo/kipup-bloqueo-mono-black-4000w.png	84 KB
png/logo/kipup-bloqueo-mono-navy-1000w.png	14 KB
png/logo/kipup-bloqueo-mono-navy-2000w.png	36 KB
png/logo/kipup-bloqueo-mono-navy-4000w.png	96 KB
png/logo/kipup-bloqueo-mono-red-1000w.png	14 KB
png/logo/kipup-bloqueo-mono-red-2000w.png	37 KB
png/logo/kipup-bloqueo-mono-red-4000w.png	99 KB
png/logo/kipup-bloqueo-mono-white-1000w.png	11 KB
png/logo/kipup-bloqueo-mono-white-2000w.png	28 KB
png/logo/kipup-bloqueo-mono-white-4000w.png	69 KB
png/logo/kipup-bloqueo-vertical-1000w.png	24 KB
png/logo/kipup-bloqueo-vertical-2000w.png	64 KB
png/logo/kipup-bloqueo-vertical-4000w.png	178 KB
png/logo/kipup-bloqueo-vertical-dark-bg-1000w.png	25 KB
png/logo/kipup-bloqueo-vertical-dark-bg-2000w.png	65 KB
png/logo/kipup-bloqueo-vertical-dark-bg-4000w.png	180 KB
png/logo/kipup-bloqueo-vertical-mono-black-1000w.png	19 KB
png/logo/kipup-bloqueo-vertical-mono-black-2000w.png	53 KB
png/logo/kipup-bloqueo-vertical-mono-black-4000w.png	154 KB
png/logo/kipup-bloqueo-vertical-mono-navy-1000w.png	23 KB
png/logo/kipup-bloqueo-vertical-mono-navy-2000w.png	61 KB
png/logo/kipup-bloqueo-vertical-mono-navy-4000w.png	172 KB
png/logo/kipup-bloqueo-vertical-mono-red-1000w.png	24 KB
png/logo/kipup-bloqueo-vertical-mono-red-2000w.png	63 KB
png/logo/kipup-bloqueo-vertical-mono-red-4000w.png	177 KB
png/logo/kipup-bloqueo-vertical-mono-white-1000w.png	19 KB
png/logo/kipup-bloqueo-vertical-mono-white-2000w.png	45 KB
png/logo/kipup-bloqueo-vertical-mono-white-4000w.png	119 KB
png/logo/kipup-logo-tagline-1000w.png	25 KB
png/logo/kipup-logo-tagline-2000w.png	62 KB
png/logo/kipup-logo-tagline-dark-bg-1000w.png	26 KB
png/logo/kipup-logo-tagline-dark-bg-2000w.png	63 KB
png/logo/kipup-wordmark-1000w.png	13 KB
png/logo/kipup-wordmark-2000w.png	35 KB
png/logo/kipup-wordmark-4000w.png	98 KB
png/logo/kipup-wordmark-dark-bg-1000w.png	13 KB
png/logo/kipup-wordmark-dark-bg-2000w.png	36 KB
png/logo/kipup-wordmark-dark-bg-4000w.png	99 KB
png/logo/kipup-wordmark-mono-black-1000w.png	10 KB
png/logo/kipup-wordmark-mono-black-2000w.png	30 KB
png/logo/kipup-wordmark-mono-black-4000w.png	87 KB
png/logo/kipup-wordmark-mono-navy-1000w.png	13 KB
png/logo/kipup-wordmark-mono-navy-2000w.png	35 KB
png/logo/kipup-wordmark-mono-navy-4000w.png	97 KB
png/logo/kipup-wordmark-mono-red-1000w.png	13 KB
png/logo/kipup-wordmark-mono-red-2000w.png	36 KB
png/logo/kipup-wordmark-mono-red-4000w.png	100 KB
png/logo/kipup-wordmark-mono-white-1000w.png	11 KB
png/logo/kipup-wordmark-mono-white-2000w.png	26 KB
png/logo/kipup-wordmark-mono-white-4000w.png	67 KB

PNG · redes, portadas y fondos (26)

png/social/avatar-1080.png	40 KB
png/social/avatar-400.png	9 KB
png/social/avatar-800.png	25 KB
png/social/avatar-cream-1080.png	45 KB
png/social/avatar-cream-400.png	10 KB
png/social/avatar-cream-800.png	28 KB
png/social/avatar-navy-1080.png	44 KB
png/social/avatar-navy-400.png	10 KB
png/social/avatar-navy-800.png	28 KB
png/social/cover-docs-1500x600.png	45 KB
png/social/facebook-cover-820x312.png	21 KB
png/social/google-workspace-320x132-cream.png	4 KB
png/social/google-workspace-320x132.png	4 KB
png/social/google-workspace-bloqueo-320x132.png	4 KB
png/social/instagram-post-1080x1080.png	47 KB
png/social/instagram-story-1080x1920.png	66 KB
png/social/linkedin-empresa-1128x191.png	8 KB
png/social/linkedin-personal-1584x396.png	33 KB
png/social/login-bg-1920x1080.png	38 KB
png/social/og-1200x630-light.png	36 KB
png/social/og-1200x630.png	37 KB
png/social/og-2400x1260.png	92 KB
png/social/play-feature-1024x500.png	30 KB
png/social/wallpaper-2560x1440.png	78 KB
png/social/x-header-1500x500.png	42 KB
png/social/youtube-2560x1440.png	100 KB

PNG · correo y Google Workspace (8)

png/email/firma-bloqueo-400w.png	5 KB
png/email/firma-bloqueo-800w.png	11 KB
png/email/icono-96.png	2 KB
png/google-workspace/kipup-bloqueo-320x132.png	3 KB
png/google-workspace/kipup-icono-256.png	3 KB
png/google-workspace/kipup-logo-320x132-blanco.png	3 KB
png/google-workspace/kipup-logo-320x132.jpg	5 KB
png/google-workspace/kipup-logo-320x132.png	3 KB

PNG · patrón (3)

png/pattern/kipup-pattern-200.png	2 KB
png/pattern/kipup-pattern-400.png	4 KB
png/pattern/kipup-pattern-dark-400.png	6 KB

PNG · nombres antiguos, mantenidos por compatibilidad (10)

png/appicon-192.png	4 KB
png/appicon-512.png	16 KB
png/appicon-navy-512.png	17 KB
png/apple-touch-icon-180.png	4 KB
png/favicon-16.png	415 B
png/favicon-32.png	708 B
png/kipup-logo-tagline-2000w.png	62 KB
png/kipup-mark-1024.png	18 KB
png/kipup-monogram-1024.png	32 KB
png/kipup-wordmark-2000w.png	35 KB

Versión anterior, solo para comparar (42)

_anterior/favicon.svg	297 B
_anterior/kipup-appicon-navy.svg	603 B
_anterior/kipup-appicon-red.svg	603 B
_v1/README.md	7 KB
_v1/export.sh	1 KB
_v1/icons/favicon.svg	445 B
_v1/icons/kipup-appicon-cream.svg	555 B
_v1/icons/kipup-appicon-navy.svg	555 B
_v1/icons/kipup-appicon-red.svg	555 B
_v1/logo/kipup-logo-tagline-dark-bg.svg	18 KB
_v1/logo/kipup-logo-tagline.svg	18 KB
_v1/logo/kipup-wordmark-dark-bg.svg	2 KB
_v1/logo/kipup-wordmark-mono-black.svg	2 KB
_v1/logo/kipup-wordmark-mono-white.svg	2 KB
_v1/logo/kipup-wordmark.svg	2 KB
_v1/mark/kipup-mark-dark-bg.svg	297 B
_v1/mark/kipup-mark-mono-black.svg	297 B
_v1/mark/kipup-mark-mono-white.svg	297 B
_v1/mark/kipup-mark.svg	297 B
_v1/mark/kipup-monogram-dark-bg.svg	445 B
_v1/mark/kipup-monogram-mono-black.svg	445 B
_v1/mark/kipup-monogram-mono-white.svg	445 B
_v1/mark/kipup-monogram.svg	445 B
_v1/png/appicon-192.png	4 KB
_v1/png/appicon-512.png	16 KB
_v1/png/appicon-navy-512.png	17 KB
_v1/png/apple-touch-icon-180.png	4 KB
_v1/png/favicon-16.png	415 B
_v1/png/favicon-32.png	708 B
_v1/png/google-workspace/kipup-bloqueo-320x132.png	3 KB
_v1/png/google-workspace/kipup-icono-256.png	3 KB
_v1/png/google-workspace/kipup-logo-320x132-blanco.png	3 KB
_v1/png/google-workspace/kipup-logo-320x132.jpg	5 KB
_v1/png/google-workspace/kipup-logo-320x132.png	3 KB
_v1/png/kipup-logo-tagline-2000w.png	62 KB
_v1/png/kipup-mark-1024.png	27 KB
_v1/png/kipup-monogram-1024.png	43 KB
_v1/png/kipup-wordmark-2000w.png	35 KB
_v1/tokens/colors.css	544 B
_v1/tokens/colors.json	770 B
_v1/tokens/colors.scss	197 B
_v1/tokens/tailwind.colors.js	230 B

·En una página