# Kip-Up · Kit de marca > Ideas creativas con ejecución real. Identidad completa de Kip-Up: el símbolo, el logotipo, el color, la tipografía, la hoja de interfaz y todas las piezas que se suben a algún sitio. La marca no cambia en esta versión; lo que cambia es que ahora está escrita, medida y generada desde un solo sitio. **Manual de marca: [`index.html`](index.html)** (también en PDF: [`docs/kipup-manual.pdf`](docs/kipup-manual.pdf)) — construcción del símbolo, versiones del logotipo, usos incorrectos dibujados, escalas de color con el contraste calculado, tipografía, componentes de interfaz, qué fichero va a cada plataforma e implementación. ## Resumen rápido | Token | Hex | Uso | |---|---|---| | ink (navy) | `#1A1A2E` | Texto principal, logo, fondos oscuros | | red | `#E63946` | Color de acción, la flecha, llamadas a la acción | | orange | `#F4A261` | Acento secundario, ilustración | | cream | `#F8F5F0` | Fondo claro por defecto | | white | `#FFFFFF` | Fondos y texto sobre oscuro | | ink70 | `#55556A` | Texto secundario sobre claro | | cream70 | `#B9B6C9` | Texto secundario sobre oscuro | Esta tabla es para leer, pero **no se edita a mano**: la reescribe `tools/build-literales.mjs` desde `tokens/colors.json` y lo que haya entre las marcas `kit:inicio paleta` y `kit:fin paleta` se pierde en la siguiente pasada. **Los hex de verdad viven en [`tokens/marca.mjs`](tokens/marca.mjs)**, que es de donde los leen los generadores: el día del rebranding se cambian ahí una sola vez y todo lo demás, esta tabla incluida, sale solo. Cada uno se abre en once pasos (50–950) anclados en el 500. `warning` es la escala del naranja y `danger` la del rojo: un aviso y un error se pintan con el color de la marca. `success #2A9D8F` e `info #457B9D` son una **propuesta** de este kit, no marca establecida (viene anotado en `tokens/colors.json`). Tipografía: **Poppins** (titulares y logotipo) e **Inter** (todo el texto), las dos en `fonts/` con licencia OFL. Kip-Up no tiene monoespaciada de marca: para código y cifras se usa la pila del sistema (`--kipup-font-mono`). ### Contraste, lo que hay que saber El rojo y el naranja de Kip-Up son colores de **relleno**, no de tinta. Los números están en `tokens/colors.json` y en la sección 5 del manual; en corto (bloque generado, no se edita a mano): - Rojo de marca como texto: 3,83:1 sobre crema. Vale a partir de 24 px (o 18,66 px en negrita). Para texto normal, `red-700 #A50022` (7,36:1). - Botón rojo con etiqueta de 15 px: el relleno va en `--kipup-red-aa #C80E2E` (5,9:1 con blanco). El rojo exacto se reserva para botones grandes (`.kp-btn-brand`). - Naranja como texto: 1,9:1. No se usa nunca de tinta; sobre relleno naranja la etiqueta va en navy. - En modo oscuro, el rojo de texto es `red-300 #FF9D99`. ## Estructura - `mark/` el **monograma** (la K cuyo brazo es la flecha roja, el isotipo) y la **flecha zigzag** (elemento gráfico de apoyo), en seis versiones cada uno: color, dark-bg y mono navy/red/black/white. - `logo/` wordmark, bloqueo horizontal, bloqueo vertical —seis versiones cada uno— y el logotipo con lema. Texto convertido a trazos: no dependen de tener Poppins instalada. - `icons/` icono de aplicación (4 fondos × 3 formas), maskable, `favicon.svg`, `safari-pinned-tab.svg`, `mstile.svg`. - `social/`, `email/`, `pattern/` maestros en SVG de redes (OG, X, LinkedIn, Facebook, Instagram, YouTube, Google Play), Google Workspace, firma de correo, portadas, fondo de acceso y patrón. - `png/` exportaciones a todas las medidas estándar: favicon 16–128 + `.ico`, Apple 120–180, Android 192/512 + maskable, mosaicos de Windows, App Store 1024, iconos 256–1024, símbolo 256–2048, logotipos 1000/2000/4000w, redes a tamaño nativo, Google Workspace 320×132. - `tokens/` `marca.mjs` —los siete hex de marca, **el único sitio donde están escritos**, y lo único de esta carpeta que no se genera— y las salidas `colors.css`, `colors.scss`, `colors.json`, `tailwind.colors.js` y `design-tokens.json` (W3C), todas escritas por `build-tokens.mjs`. - `ui/` `kipup-ui.css` (componentes con prefijo `kp-`), `ejemplo.html` (panel completo, claro y oscuro), `tipografia.html` (la escala) y `auditar-contraste.mjs`. Los cuatro `.png` de esta carpeta son **capturas**, no salidas de los generadores: el día del rebranding hay que volver a hacerlas a mano o se quedarán enseñando la marca vieja. - `fonts/` Poppins e Inter con su licencia. `tools/` los generadores. `_v1/` la versión anterior, solo para comparar. ## Regenerar Todo sale de los generadores; los ficheros de salida no se editan a mano. Se ejecuta **en docker**: en el servidor no se instala Node ni npm. El kit **no tiene `package.json`**: `sharp` y `opentype.js` se instalan en el contenedor de usar y tirar, en la misma línea. Por eso el mandato es este entero y no `node tools/build-svg.mjs` a secas — a secas falla con `ERR_MODULE_NOT_FOUND` y parece que el generador está roto cuando lo que falta es la librería. ```bash docker run --rm -v /opt/marca:/kit -w /kit node:22-bookworm \ sh -c "npm i --no-save --silent sharp opentype.js \ && node tokens/build-tokens.mjs \ && node tools/build-svg.mjs \ && node tools/export-png.mjs \ && node tools/build-manual.mjs \ && node tools/build-literales.mjs" python3 tools/make-ico.py # el .ico se empaqueta fuera de docker, solo necesita python3 ``` Los **cinco** pasos, no tres. `build-manual.mjs` y `build-literales.mjs` se añadieron el 2026-09-10 porque sin ellos el kit se repintaba entero y los documentos que EXPLICAN la marca se quedaban con la anterior: el manual enseñando la paleta vieja y la firma de correo con la barra roja de siempre en el pie de todos los correos del equipo. **El color se cambia en un solo sitio: [`tokens/marca.mjs`](tokens/marca.mjs).** De ahí lo leen los generadores, así que no hay forma de que salgan los tokens con la marca nueva y el logo con la vieja (que es exactamente lo que pasaba antes del 2026-09-10, con la paleta copiada en tres ficheros). **El orden importa a partir del cuarto paso.** Los tres primeros son independientes entre sí: `build-svg.mjs` no lee nada de `tokens/`, así que un clon en limpio dibuja el logo sin haber generado los tokens todavía. Pero `build-manual.mjs` y `build-literales.mjs` leen `tokens/colors.json`, que lo ESCRIBE `build-tokens.mjs`: lanzados antes, repintan con los colores de la pasada anterior. `build-tokens.mjs` no necesita `npm i` —solo módulos de node— y se puede lanzar suelto: ```bash docker run --rm -v /opt/marca:/kit -w /kit node:22-bookworm node tokens/build-tokens.mjs ``` `tools/build-svg.mjs` dibuja los SVG maestros desde la geometría del símbolo y las fuentes: la **geometría** se cambia ahí (el color, no: ese está en `tokens/marca.mjs`). `tools/export-png.mjs` exporta los PNG y `tools/make-ico.py` empaqueta el `.ico`. `tools/build-manual.mjs` reescribe las tablas de color de `index.html` y `tools/build-literales.mjs` los dos sitios donde el hex va **literal** y no puede ser `var(--kipup-*)`: `email/firma.html`, porque los clientes de correo no resuelven variables CSS, y la tabla de la paleta de este mismo README, que es Markdown. Los dos son idempotentes: ejecutarlos sin haber cambiado la marca no mueve ni un byte. Comprobación del día del rebranding, que es la que de verdad cierra el asunto: copiar `/opt/marca` entero, cambiar los siete hex en la copia, lanzar los cinco pasos y buscar en los 314 ficheros cualquier resto de la paleta anterior. Deben quedar exactamente dos, y los dos son prosa histórica: `BRIEF.md` (el encargo que se le dio a la diseñadora, que describe la marca de su día) y el comentario de `tokens/marca.mjs` que cuenta este mismo incidente. Prueba de que un cambio no ha movido el aspecto sin querer: guardar los md5 de todos los `.svg`, `.png` y `.ico` antes, regenerar y compararlos. Con los colores de hoy tienen que salir los 280 **byte a byte iguales** (los 5 de `png/google-workspace/` ni se tocan, ver abajo). Después: copiar a `design/brand/` del repositorio que lo use y, si toca 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 https://marca.kipups.com/. La exclusión de `kuantera/` no es opcional: esa carpeta es el punto de montaje del kit de Kuantera y, si se borra, el contenedor no arranca. **Nombres que no se pueden cambiar** porque están enlazados desde producción (kipups.com, Kip-Up Comandas, Google Workspace): los wordmarks y el logotipo con lema de `logo/`, `mark/kipup-monogram*`, `mark/kipup-mark*`, los iconos de `icons/` y todo `png/google-workspace/`. ## Reglas esenciales - **El logo es la K, no la flecha.** El monograma (`mark/kipup-monogram.svg`) representa a la marca; la flecha zigzag (`mark/kipup-mark.svg`) es elemento gráfico: patrón, viñetas, ilustración y el guion del wordmark. Sola, en un avatar o en un favicon, no dice Kip-Up. - **La flecha siempre sube a la derecha.** No se invierte, no se endereza el brazo del monograma y no se separa la punta del trazo. - **Fondo claro:** versión principal. **Fondo oscuro:** `-dark-bg`. **Fondo rojo:** `-mono-white`. **Fondo naranja:** `-mono-navy`. Una tinta: `-mono-black` / `-mono-white`. - **Espacio de reserva:** el grosor del asta de la K (16 unidades de la retícula de 100) por los cuatro lados. - **Mínimos:** monograma 24 px (16 px solo como favicon), wordmark 110 px de ancho, bloqueo 150 px, bloqueo vertical 130 px. En impresión, símbolo 8 mm y wordmark 30 mm. - **Un solo rojo de acción por pantalla.** Si hay tres botones rojos, no hay ninguno. - **El texto nunca va en rojo ni en naranja de marca** salvo en tamaño grande. En interfaz, `red-700` y `orange-800`. - **El foco siempre se ve:** aro rojo de 2 px, `red-400` en oscuro. No se quita. - **Kuantera tiene identidad propia.** Sus colores no entran en piezas de Kip-Up ni al revés; el respaldo «un producto de Kip-Up» solo aparece en su acceso, su pie y sus documentos. Dónde está aplicada la marca y qué queda pendiente: `/opt/docs/MARCA.md`.