Sistema de identidad de Kuantera, el producto de facturación electrónica de Kip-Up. Define el símbolo, el logotipo, el color, la tipografía y los componentes de interfaz para que todo lo que lleva su nombre —el panel, el escritorio del contador, la documentación de la API— se vea como un solo producto. Versión 1.0 · septiembre 2026.
Kuantera viene de cuanto y era: la era de saber cuánto. La promesa es «Tu negocio, en números claros».
La marca se apoya en tres decisiones: una K cuyo brazo superior se convierte en tres barras que crecen (datos que suben), un azul petróleo que transmite orden y confianza, y un acento menta reservado para lo que importa: el crecimiento, el saldo positivo, el punto final del nombre. Tono de voz: claro, directo, sin jerga contable; se habla de «cobrar», «vender», «cuadrar», no de «asientos» ni «devengos», salvo en pantallas para contadores.
Kuantera es la pieza de facturación de Kip-Up: la usan por detrás los demás productos de la agencia —Comandas, Citas— cuando un encargo tiene que emitir comprobantes, y también empresas y desarrolladores que la contratan por su cuenta. Es un producto de Kip-Up y lo dice con el bloqueo de respaldo («un producto de Kip-Up») en pantallas de acceso, pie de página y documentos. En el resto del producto va sola, y no por esconder de quién es: quien la tiene delante todo el día puede ser una empresa que contrató solo la facturación, o un desarrollador que la conectó al sistema que ya tenía, y ninguno de los dos es cliente de la agencia.
Rejilla de 100 × 100. El tallo y la pierna de la K son trazos de 16 con extremos redondeados (ink). Las barras son trazos de 12 en menta, todas apoyadas en la línea y = 50, con alturas 12, 22 y 34: crecen de izquierda a derecha. Ninguna barra toca la K: el aire entre ambas es parte del dibujo.
Alrededor del símbolo se deja libre al menos la altura de una barra pequeña (12 unidades ≈ 1/8 del alto). Nada de texto, bordes u otros logos dentro de ese margen.
Pantalla: 16 px (favicon; a ese tamaño se usa la versión con fondo). Impresión: 6 mm. Por debajo, las barras se pierden.
kuantera-mark · principal
-primary · sobre fondos claros neutros
-dark-bg · sobre ink o fotografía oscura
-mono-ink · una tinta
-mono-black · impresión 1 tinta, sellos
-mono-white · grabados, negativoCuándo usar el símbolo solo: favicon, icono de app, avatar en redes, esquina de una pantalla cuando el nombre ya está visible (barra lateral colapsada), marcas de agua. En cualquier otro caso va con el nombre.
El nombre se escribe en Poppins Bold con el punto final en menta. El texto ya está convertido a trazos en los SVG: no depende de tener la fuente instalada y no se debe recomponer con texto vivo.
Símbolo a la izquierda, alineado por la altura de la K. Es la versión por defecto en cabeceras, documentos, firmas y presentaciones. Tamaño mínimo: 110 px de ancho en pantalla, 25 mm en impresión.
kuantera-lockup-dark-bg
-primary
-mono-ink
-mono-black
-mono-whitePara espacios cuadrados o centrados: pantallas de carga, portadas, publicaciones en redes, camisetas. Tamaño mínimo: 80 px de ancho.
kuantera-lockup-vertical
-dark-bg
-mono-inkCuando el símbolo ya aparece cerca (por ejemplo, el icono de la app junto al nombre en una tienda) o en texto corrido de gran tamaño.
kuantera-wordmark
-dark-bg
-mono-black
kuantera-lockup-tagline · portadas, presentaciones
kuantera-by-kipup · acceso, pie de página, documentos| Fondo | Versión |
|---|---|
| Blanco o bg (#F3F6F8) | principal (ink + menta) |
| Ink, primary o fotografía oscura | -dark-bg (blanco + menta) |
| Fondos claros de color, papelería suave | -primary |
| Una sola tinta, fax, sello, grabado láser | -mono-black / -mono-white |
| Fondo menta | -mono-ink (nunca blanco: no hay contraste) |
El logotipo se usa tal cual sale de los archivos. No se:
deforma o estirarecolorea fuera de la paletagira o inclinaañade sombras, relieves o contornosusa blanco sobre menta (poco contraste)reduce por debajo del mínimo ni lo desvaneceKuanteracoloca la versión ink sobre fondo oscuro o cargadoLa paleta es corta a propósito. Petróleo (primary) es el color de acción; ink es el color de texto y de las superficies oscuras; menta se usa poco y con intención: crecimiento, positivo, foco. Los colores semánticos (éxito, aviso, error, información) son solo para estados y nunca decoran.
Cada color tiene once pasos (50–950). El 500 es el color base. En interfaz: 50–100 fondos suaves, 200 bordes, 500–600 elementos activos, 700–800 texto sobre fondos suaves.
El fondo oscuro es #0B2032, las superficies #12324A y #183D57. El primary se aclara a #4FA3C7 para conservar contraste; la menta se mantiene. Los tokens semánticos (--kuantera-surface, --kuantera-text, etc.) cambian solos con .dark o data-theme="dark".
Orden de series para gráficos: petróleo, menta, ámbar, violeta, azul claro, rojo, verde, gris. Positivo siempre menta o verde; negativo siempre rojo; nunca al revés.
| Combinación | Colores | Ratio | Nivel |
|---|---|---|---|
| Aa Texto ink sobre blanco | #12324A / #FFFFFF | 13.28:1 | AAA |
| Aa Texto ink sobre bg | #12324A / #F3F6F8 | 12.24:1 | AAA |
| Aa Muted sobre blanco | #587587 / #FFFFFF | 4.87:1 | AA |
| Aa Blanco sobre primary | #FFFFFF / #1B5C7A | 7.35:1 | AAA |
| Aa Blanco sobre ink | #FFFFFF / #12324A | 13.28:1 | AAA |
| Aa Ink sobre menta | #12324A / #3FC9B2 | 6.46:1 | AA |
| Aa Blanco sobre menta (evitar) | #FFFFFF / #3FC9B2 | 2.06:1 | No |
| Aa Menta sobre ink | #3FC9B2 / #12324A | 6.46:1 | AA |
| Aa Texto claro sobre oscuro | #EAF2F6 / #12324A | 11.72:1 | AAA |
| Aa Blanco sobre danger | #FFFFFF / #D9534F | 3.96:1 | AA grande |
| Aa Blanco sobre success | #FFFFFF / #2E9E6B | 3.38:1 | AA grande |
| Aa Ink sobre warning | #12324A / #E9A23B | 6.13:1 | AA |
| Uso | Token | Regla |
|---|---|---|
| Éxito, pagado, cuadrado | success-500 #2E9E6B | Fondos success-50, texto success-700. |
| Aviso, pendiente, por vencer | warning-500 #E9A23B | Texto sobre warning-50 en warning-800; nunca blanco sobre ámbar. |
| Error, vencido, anulado | danger-500 #D9534F | Botones destructivos y validaciones. No para «negativo contable» en tablas: ahí va texto ink con signo. |
| Información, notas de crédito | info-500 #3B82C4 | Solo avisos neutros. No se confunde con primary. |
| Crecimiento, delta positivo, foco | accent #3FC9B2 | Menos del 10 % de la pantalla. Texto encima siempre ink. |
Poppins (SemiBold 600, Bold 700 solo en el logotipo) para títulos y cifras destacadas de marketing. Inter para todo el texto de interfaz y documentos. IBM Plex Mono para números en tablas, importes, códigos de comprobante y fechas en columnas: sus cifras tabulares alinean las columnas y separan visualmente «dato» de «texto». Las tres son de licencia abierta (OFL) y están en fonts/.
Tamaño base 14 px en la aplicación (densidad de panel de trabajo), 16 px en la web pública. Interlineado 1.5 en cuerpo, 1.2 en títulos. Separadores: miles con espacio fino (S/ 48 320.50), decimales con punto, fechas dd/mm/aaaa.
La hoja ui/kuantera-ui.css reúne los tokens y los componentes básicos: distribución con barra lateral ink, cabecera, tarjetas KPI, botones (principal, secundario, enlace, acento, peligro), formularios, etiquetas de estado, tablas y avisos, en claro y oscuro. Es la referencia visual; en cada producto se traduce a su stack (Tailwind con tokens/tailwind.colors.js, CSS variables con tokens/colors.css).
Fuente: ui/ejemplo-erp.html (abre con el botón «Claro / oscuro»).
El icono es el símbolo en blanco y menta sobre petróleo, con esquina de 22 % (rx 115 en 512). Hay variantes ink, clara, menta y blanca, y tres formas: redondeada (por defecto), cuadrada a sangre (App Store, avatares; la plataforma recorta) y circular.
appicon · principal
-ink
-light
-accent · solo campañas
-white
-maskable · Android, zona segura 80 %
favicon 48 / 32 / 16
mstile · Windows (fondo lo pone el sistema)| Plataforma | Archivo | Tamaños |
|---|---|---|
| Navegadores | png/favicon/favicon.ico, favicon-*.png, icons/favicon.svg | 16, 32, 48, 64, 96, 128 · ICO con 16/32/48 · SVG |
| Safari (pestaña fijada) | icons/safari-pinned-tab.svg | SVG monocromo, color #1B5C7A |
| iOS / iPadOS | png/apple/apple-touch-icon-*.png | 120, 152, 167, 180 (sin transparencia) |
| Android / PWA | png/android/android-chrome-*.png, maskable-icon-*.png | 192, 512 · maskable 192, 512 |
| Windows | png/windows/mstile-*.png | 70, 150, 310, 310×150 · TileColor #1B5C7A |
| App Store | png/stores/appstore-1024.png | 1024, sin alfa ni esquinas |
| Google Play | png/stores/playstore-512.png, png/social/play-feature-1024x500.png | 512 · gráfico 1024×500 |
| Escritorio / genérico | png/appicon/* | 256, 512, 1024 por variante y forma |
avatar 400 / 800 / 1080 (la red recorta en círculo)
Open Graph 1200×630 (y 2400×1260)
X · cabecera 1500×500
LinkedIn · perfil 1584×396
LinkedIn · empresa 1128×191
Facebook · portada 820×312
Instagram · publicación 1080×1080
Instagram · historia 1080×1920
YouTube · banner 2560×1440 (zona segura central)
firma 400w (@2x: 800w) · plantilla en email/firma.html
logo Google Workspace 320×132
icono para remitente / BIMI provisional 96
portada docs / Notion 1500×600
fondo de acceso 1920×1080
fondo de escritorio 2560×1440
patrón claro (tile 200)
patrón oscuroEl patrón se usa a baja opacidad, en un tercio de la pieza como máximo, y nunca detrás de texto pequeño.
Los SVG son vectoriales y valen para cualquier tamaño; para imprenta se convierten a PDF/EPS desde el SVG. Equivalencias aproximadas: ink Pantone 7463 C · CMYK 95/70/40/35; primary Pantone 7700 C · CMYK 90/50/30/10; menta Pantone 3255 C · CMYK 65/0/35/0. En una tinta se usa la versión mono-black.
<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="#1B5C7A"> <link rel="manifest" href="/site.webmanifest"> <meta name="theme-color" content="#1B5C7A"> <meta name="msapplication-TileColor" content="#1B5C7A"> <meta property="og:image" content="https://kuantera.com/og.png"> <!-- 1200×630 -->
{ "name": "Kuantera", "short_name": "Kuantera", "theme_color": "#1B5C7A", "background_color": "#F3F6F8", "display": "standalone",
"icons": [ { "src": "/icons/android-chrome-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/android-chrome-512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icons/maskable-icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" } ] }
/* CSS */ @import "tokens/colors.css"; color: var(--kuantera-primary); /* Tailwind */ import colors from "./tokens/tailwind.colors.js"; theme.extend.colors = colors; → bg-primary-500 text-ink-900 /* SCSS */ @use "tokens/colors"; $primary-500 /* Diseño */ tokens/design-tokens.json (formato W3C, importable en Figma con Tokens Studio)
# desde la raíz del kit, sin instalar nada en el host docker run --rm -v $PWD:/kit -w /kit node:22-bookworm sh -c "npm i --no-save sharp opentype.js && node tools/build-svg.mjs && node tools/export-png.mjs" python3 tools/make-ico.py
Todo el kit vive en /home/yoiber/proyectos/kuantera-brand, se publica en docs.kipups.com/marca/kuantera/kit y se copia en el repositorio kip-up-agency/kuantera (design/brand). Las direcciones descartadas (A · Libro mayor, C · Contador) siguen en direcciones/.
| tools/build-svg.mjs | 14 KB |
| tools/export-png.mjs | 4 KB |
| tools/make-ico.py | 1 KB |
