ITZAKA
Una solución de Grupo Torres Muciño. La guía maestra de la marca: el sistema visual, verbal y de producto que mantiene coherentes la aplicación, la página pública, los documentos en PDF y todo lo que venga después.
Este documento es la fuente única de verdad de la marca. La app, la página pública, los documentos y este mismo sitio deben poder rastrear sus decisiones de color, tipografía, voz y composición hasta aquí.
<head>, y los del producto en tokens.css, junto a este archivo. La aplicación copia tokens.css tal cual en su src/index.css (shadcn/ui con Tailwind CSS v4). No improvises valores fuera de esta paleta. Lo que este manual creó o infirió lleva la marca Propuesto: ajústalo si no refleja la marca.Esencia de marca
Por qué existe Itzaka y qué le promete a cada despacho que la usa.
El nombre
Itzaka, de itztli: obsidiana en náhuatl. Corte preciso, piedra, lo que se construye. Antes se llamó Cuotreka (y antes, presuplano); se cambió porque «cuo» se leía «cou».
Elemento: tierra y piedra
Es una solución de Grupo Torres Muciño. Dentro del portafolio, Itzaka es la piedra: guía la paleta, el movimiento y los recursos gráficos. El aire es de la marca del grupo, el agua de Tlakio y la naturaleza y el fuego de Sazón & Raíz: no se invaden.
Misión Propuesto
Que cada despacho de arquitectura cotice, lleve la obra, cobre y pague a su personal con los números claros, desde el teléfono o el escritorio.
Visión Propuesto
Ser la herramienta con la que los despachos de México dejan el Excel y la libreta: un solo lugar para lo cotizado, lo avanzado, lo cobrado y lo pagado.
Propuesta de valor
Itzaka es el cotizador para arquitectos que reemplaza el Excel y la libreta. Armas la cotización con tu catálogo y el total se calcula solo. La conviertes en proyecto, registras el avance por cantidad con fotos de la obra, y cobras total, parcial o por anticipado, con el saldo siempre a la vista. Cada documento sale en PDF con el membrete de tu despacho, y del plano dibujado sale la cotización sin volver a medir.
Valores Propuesto
Claridad
El número se ve primero. El color dice el estado; no decora.
Precisión
Se mide una vez. Lo cotizado se congela y lo avanzado se registra por cantidad.
Honestidad
Solo prometemos lo que la herramienta hace hoy; lo que no hace, lo decimos.
Tu despacho, tus datos
Cada cuenta es suya: su membrete, su catálogo y sus clientes, aislados del resto.
Promesa en una frase
A quién le hablamos
Conocer a quién nos dirigimos define el tono, los ejemplos y las imágenes que usamos.
Arquitecto dueño de su despacho
Cotiza en el escritorio y registra la obra desde el teléfono, muchas veces sin buena señal. Llega con hojas de cálculo sueltas y la duda de cuánto le falta por cobrar. Necesita armar una cotización presentable rápido y saber, de un vistazo, qué se hizo, qué cobró y qué debe.
Su cliente Propuesto
No usa la aplicación: recibe la cotización, los comprobantes y el estado del proyecto en PDF, casi siempre por WhatsApp. Necesita documentos claros, con membrete, folio y fecha, que le den confianza para pagar.
Colegas y personal de obra Propuesto
Otros arquitectos que recomiendan la herramienta, y el personal que recibe su pago con comprobante. Si la cuenta les sale clara, la marca gana confianza.
Personalidad de marca
Si Itzaka fuera una persona, sería sólida, precisa, clara y honesta: el colega profesional que lleva las cuentas al día y te las explica sin rodeos. Nunca lúdica.
Ejes de personalidad Propuesto
| Es | No es |
|---|---|
| Clara: dice el número y el estado | Técnica de más ni llena de jerga de software |
| Cercana: te habla de tú | Informal, chistosa o con emojis |
| Precisa: cifras tabulares, fechas, folios | Fría ni burocrática |
| Honesta: avisa lo que falta (saldo, señal) | Exagerada; no promete lo que no hace |
| Práctica: una acción por pantalla | Decorativa; el adorno nunca tapa el dato |
Arquetipo Propuesto
Sabio + Hombre común. El Sabio pone el orden y la exactitud: la herramienta sabe cuánto falta y lo muestra. El Hombre común la mantiene a ras de obra: habla como el oficio (partida, avance, saldo, membrete) y no como un banco. Juntos sostienen un tono confiable y sin pretensiones.
Logotipo
El símbolo es un perfil de talud-tablero, el escalonado de la arquitectura de Teotihuacan: cuerpos de obsidiana que suben en capas, separados por franjas de tezontle. No lleva texto. Cuando el nombre lo acompaña, se escribe aparte, como texto vivo.
Anatomía
- Símbolo: cuatro cuerpos de obsidiana
#141517(tres taludes y el remate) y tres franjas de tezontle#9E3B26(los tableros), en una retícula de 100 × 100. El archivo aprobado es la fuente: nunca se redibuja. - Nombre escrito: ver «Regla del nombre escrito» abajo.
- Firma del grupo: «una solución de Grupo Torres Muciño», en Inter 500 y en minúsculas, debajo del nombre o en el pie. Va en el pie de página, el acceso, los correos, los PDF sin membrete y la imagen para redes.
- Origen del nombre: Itzaka viene de itztli, obsidiana en náhuatl: corte preciso, piedra, lo que se construye.
Regla del nombre escrito
| Dónde | Cómo se escribe |
|---|---|
| Junto al símbolo (encabezado, menú lateral, acceso, membrete del PDF sin despacho, imagen para redes) | «ITZAKA» en mayúsculas, Inter 800, espaciado +0.08 em, como texto vivo (en la interfaz, el texto es «Itzaka» y la mayúscula la pone el estilo, así un lector de pantalla dice el nombre bien). Obsidiana sobre claro, blanco o cal sobre oscuro. Nunca en tezontle. |
| En una frase, un título de página, metadatos, correos, textos legales, la app instalada | «Itzaka», con mayúscula inicial y en la fuente del texto que lo rodea. |
| Nunca | «itzaka» en minúsculas en un texto para personas, «ItZaka», «Itzaká», con otra fuente en el wordmark o con efectos (contorno, sombra, degradado). |
Área de protección y composición
Alrededor del símbolo queda libre una cuarta parte de su lado (en un símbolo de 48 px, 12 px). Con el nombre: la altura de las mayúsculas es el 40 % de la altura del símbolo, el nombre se centra en vertical con él y la separación entre ambos es el 25 % de la altura del símbolo.
Tamaño mínimo
Digital
El símbolo completo, desde 24 px. A 16 y 32 px se usa la versión simplificada (abajo). El símbolo con el nombre, desde 96 px de ancho.
Impreso
El símbolo, desde 8 mm; con el nombre, desde 28 mm de ancho. En los documentos manda el membrete del despacho; Itzaka firma en el pie.
Versión simplificada (favicon)
A 16 px las siete piezas del símbolo se empastan. El favicon usa cinco: talud, franja, talud, franja y remate, alineadas a la retícula de 32 px. En pestañas oscuras cambia sola a cal y tezontle claro (prefers-color-scheme dentro del SVG). Archivo: monograma.svg.
En la pestaña oscura el navegador aplica la variante clara; aquí se ve la del sistema de quien lee.
Variaciones y usos
El símbolo no lleva fondo propio: la variante depende del fondo. Color sobre claro; blanco sobre obsidiana o tezontle; negro para imprimir en blanco y negro.
ITZAKAColor · blancoITZAKAColor · cal
ITZAKABlanco · obsidianaITZAKABlanco · tezontle
ITZAKANegro · impresión en B/N
Ícono de la app · faviconVariante por escenario
| Escenario | Fondo | Variante | Archivo |
|---|---|---|---|
| Encabezado y menú lateral, modo claro | Blanco o cal | Color + «ITZAKA» | logo.svg |
| Encabezado y menú lateral, modo oscuro | Obsidiana | Blanco + «ITZAKA» en cal (cambia sola con el tema) | logo-oscuro.svg |
| Acceso y registro: panel de la fotografía (computadora) | La fotografía de acceso de fondo de todo el panel, bajo el velo de obsidiana al 78 % y los estratos (sección 09) | Blanco + «ITZAKA» + firma | logo-oscuro.svg |
| Acceso y registro: teléfono y tableta | Fondo de la app sobre la fotografía velada al 90 % | Color en claro, blanco en oscuro, con la firma debajo | ambos |
| Sitio público: cabecera | Claro / oscuro | Color / blanco, según prefers-color-scheme o el tema elegido | ambos |
| Sitio público: pie | El del pie | Color o blanco según el fondo, con «una solución de Grupo Torres Muciño» | ambos |
| PDF sin membrete del despacho | La banda de color del documento | Símbolo de un solo color con la tinta legible de la banda (blanco sobre obsidiana o tezontle, negro sobre bandas claras) + «ITZAKA» + firma. A color solo sobre papel blanco | derivado |
| Correos transaccionales | Blanco | Color, PNG @2x con fondo transparente (los clientes de correo no muestran SVG) | email-logo@2x.png |
App instalable (192, 512, maskable) y apple-touch-icon | Tezontle, sin transparencia | Ícono de app: símbolo en cal al 60 % del lado, dentro de la zona segura del 80 % | icono-app.svg |
| Favicon (16 y 32 px) | Transparente | Versión simplificada, clara en pestañas oscuras | monograma.svg |
| Pantalla de carga de la app instalada | Obsidiana | El sistema compone el ícono sobre background_color | icono-app.svg |
| Imagen para redes (1200 × 630) | Obsidiana con estratos | Símbolo blanco + «ITZAKA» + firma | og-itzaka.png |
| Sitio de documentación y este manual | Según el tema | Color en claro, blanco en oscuro | ambos |
| Editor de planos y exportaciones | Lienzo blanco | Sin marca de agua (no existía; no se agrega) | — |
| Cualquier superficie de tezontle | Tezontle | Blanco, nunca a color: las franjas desaparecen | logo-oscuro.svg |
Usos correctos e incorrectos
✓ Hazlo
- Usa el archivo aprobado, sin redibujarlo.
- Color sobre blanco o cal; blanco sobre obsidiana o tezontle; negro solo para B/N.
- Respeta el área de protección y el tamaño mínimo; a 16-32 px, la versión simplificada.
- Escribe el nombre con la regla del nombre escrito y, donde aparece la marca en un pie, añade la firma del grupo.
✕ Evita
- La versión a color sobre obsidiana, tezontle o cualquier fondo oscuro: la obsidiana desaparece y las franjas pierden contraste (2.7:1).
- Recolorear las franjas, cambiar las proporciones o agregar sombras, contornos o degradados.
- Encerrar el símbolo en un mosaico redondeado fuera del ícono de app.
- Usar los nombres anteriores, Cuotreka y presuplano, en cualquier pieza nueva.
Color
Todo nace del logotipo: obsidiana para la acción y el texto, tezontle como firma de la marca, y cal y piedra en las superficies. Es una herramienta de dinero: el verde, el ocre y el carmín dicen el estado (pagado, pendiente, error) y nunca se confunden con la marca.
Primario · Obsidiana
La acción principal y el texto. En modo oscuro el primario se invierte a cal.
Acento de marca · Tezontle
El rojo terroso de la piedra volcánica. Es la firma: logo, estratos, navegación activa y gráficas. Nunca es un color de estado ni el botón principal.
ACENTO base del logotipo: #9E3B26 (600). Blanco encima 6.76:1.
Neutrales · Piedra y cal
Semánticos (estado)
Proporción de uso (60 · 30 · 10)
Manda la superficie de cal; la obsidiana lleva el texto y la acción; el tezontle firma. Los colores de estado quedan fuera del reparto: aparecen solo cuando hay un estado que contar.
Combinaciones verificadas (WCAG 2.x, calculadas con script)
| Modo | Texto o elemento | Fondo | Contraste |
|---|---|---|---|
| Claro | Obsidiana #141517 | Cal #F5F3F0 · blanco | 16.50 · 18.27:1 · AAA |
| Claro | Gris piedra #5E5A55 | Blanco · cal · muted #ECE9E4 | 6.84 · 6.18 · 5.65:1 · AA |
| Claro | Blanco | Primario obsidiana · hover #2B2C30 | 18.27 · 13.95:1 · AAA |
| Claro | Tezontle texto #8A3220 | Tezontle suave #F5E6E1 | 6.76:1 · AA |
| Claro | Tezontle #9E3B26 | Blanco · cal | 6.76 · 6.10:1 · AA |
| Claro | Carmín #D0213A | Blanco · cal · suave #FDEEF1 | 5.30 · 4.79 · 4.72:1 · AA |
| Claro | Ocre texto #946500 | Blanco · suave #FCF5E6 | 5.10 · 4.69:1 · AA |
| Claro | Ocre ícono #A87400 | Blanco | 4.07:1 · ícono (≥ 3) |
| Claro | Verde texto #2A7530 · verde #2E7D32 | Suave #E6F3E7 · blanco | 4.98 · 5.13:1 · AA |
| Claro | Pizarra #2F5E86 | Blanco · suave #E6EEF5 | 6.85 · 5.84:1 · AA |
| Claro | Borde de campo #8C857C | Blanco · cal | 3.65 · 3.29:1 · ≥ 3 |
| Oscuro | Cal #EEEBE6 | Obsidiana #141517 · tarjeta #1C1D20 | 15.37 · 14.17:1 · AAA |
| Oscuro | Secundario #ADA79F | Tarjeta · muted #26262A | 7.07 · 6.32:1 · AA |
| Oscuro | Obsidiana | Primario cal · hover blanco | 15.37 · 18.27:1 · AAA |
| Oscuro | Tezontle claro #E08A72 | Acento #3A2620 | 5.45:1 · AA |
| Oscuro | Carmín claro #FF9AA8 | Tarjeta · suave #3A1A20 | 8.38 · 7.74:1 · AAA |
| Oscuro | Ocre #EBC15A · verde #5CB85F · pizarra #7EAED6 | Tarjeta | 9.88 · 6.80 · 7.15:1 · AA |
| Oscuro | Borde de campo #7A746C | Tarjeta · fondo | 3.65 · 3.95:1 · ≥ 3 |
| Marca | Blanco | Obsidiana · tezontle | 18.27 · 6.76:1 · AA |
| Marca | Franjas de tezontle | Obsidiana | 2.70:1 · por eso la versión a color no va sobre oscuro |
#A87400 es relleno, ícono o barra; la letra usa #946500. Los colores suaves nunca llevan texto blanco. El tezontle no se usa para texto pequeño sobre obsidiana.Tipografía
Space Grotesk le da a los títulos un carácter técnico, de plano. Inter sostiene toda la interfaz, los montos y los documentos, y en ExtraBold 800 escribe el nombre «ITZAKA» junto al símbolo.
Pesos 500, 600 y 700. Para los títulos de la página pública y los encabezados grandes. En pantallas densas de la app se usa poco.
Pesos 400, 500, 600 y 700 en la interfaz; 800 solo en el nombre escrito. Cuerpo, formularios, tablas y botones (sin mayúsculas). Los montos siempre con tabular-nums.
Alternativas seguras si no cargan las fuentes web: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif. La app funciona sin descargar fuentes; Space Grotesk cae a Inter.
Escala tipográfica (la del producto, mobile-first)
Reglas de uso
- Interlineado: 1.2 en títulos, 1.5 en el cuerpo de la app y 1.65 en textos largos.
- Ancho de línea: máximo 70 caracteres.
- Los botones van sin mayúsculas sostenidas, en Inter 600 a 15 px.
- Los montos se alinean a la derecha y en cifras tabulares.
Iconografía y estilo gráfico
Íconos simples y redondeados, al servicio del dato. Nunca un mosaico decorativo encima de cada título.
Estilo
Lucide (la que usa la app desde la iteración 28; antes Material Icons Rounded), de trazo de 2 px con uniones redondeadas, a 24 px y con esquinas suaves. En los botones de solo ícono siempre hay una etiqueta accesible.
Color
Gris piedra en reposo, obsidiana cuando está activo o seleccionado (tezontle solo en la navegación activa), y el color semántico cuando acompaña un estado (pagado, pendiente, error).
Temas
Obra y oficio: plano, regla, cota, casco, cámara (evidencia), recibo y moneda. Nada de cohetes ni bombillas.
Recursos gráficos
Los estratos: bandas escalonadas que repiten el perfil de talud-tablero, en blanco al 6–10 % de opacidad sobre la superficie de marca (obsidiana), ancladas abajo y a la derecha, como en la portada de este manual. Solo en superficies de marca (acceso, bloque destacado de la página pública, imagen para redes); nunca detrás de datos ni de formularios. Sustituyen a la cuadrícula de plano. El degradado de marca se elimina: la piedra es plana; la superficie de marca es obsidiana lisa con una franja de tezontle como remate.
Movimiento
Inspirado en la piedra: las capas aparecen de abajo hacia arriba, escalonadas 40 ms entre sí, con un desplazamiento corto (4–6 px) y opacidad, en 150–200 ms con salida suave (cubic-bezier(.2,0,0,1)). Sin rebotes, sin escalas elásticas ni giros. Con prefers-reduced-motion no hay animación: el contenido aparece en su sitio.
Fotografía
La fotografía de la marca es de estudio: maquetas blancas, piedra y planos sobre la cal, con luz suave. El oficio del arquitecto contado con los materiales del logotipo —obsidiana, tezontle y cal—, nunca con personas posando ni oficinas de stock.
Fotografías de las pantallas de acceso
Desde la v2.2 la marca tiene tres fotografías propias, una por familia de pantallas sin sesión. Las eligió la persona y no cambian tokens: sus tonos son la cal del fondo, el tezontle y la obsidiana de la paleta (sección 06).
| Pantalla | Fotografía (assets/acceso/) | Punto de recorte (object-position) | Lo que queda a la vista |
|---|---|---|---|
| Crear la cuenta, verificar el código y aceptar una invitación | registro-*.webp | 58 % · 82 % | La maqueta, el tezontle y la obsidiana |
| Iniciar sesión y cualquier otra pantalla sin sesión | login-*.webp | 62 % · 80 % | El cubo de concreto, los bloques, el metro y el nivel |
| Recuperar la contraseña: pedir el código y elegir la nueva | olvide-*.webp | 62 % · 76 % | La maqueta con la llave y la obsidiana |
Recorte
El original es vertical (1493 × 2000, casi 3:4) y siempre llena su hueco sin deformarse (object-fit: cover). Lo importante está en la mitad de abajo; arriba solo hay cal. En el panel de la computadora (44 % del ancho, máximo 560 px, al alto de la ventana) la foto es el fondo de todo el panel: casi siempre llena el alto y se recortan los lados (manda el primer valor del punto de recorte); en ventanas bajas llena el ancho y se recorta arriba (manda el segundo). En el teléfono y la tableta llena el alto detrás del formulario y se recortan los lados: manda el primero. Sin filtros ni recolorear, la misma en claro y en oscuro.
El texto encima
Nunca directo sobre la foto: siempre sobre su velo. En la computadora la foto es el fondo de todo el panel, bajo un velo uniforme de obsidiana al 78 % (la piedra es plana: sin degradado, sección 08) y los estratos abajo a la derecha; encima van el logotipo, el lema y las tres ventajas arriba y la firma al pie, con el remate de tezontle. El velo es el más ligero con el que todo el texto pasa AA sobre el peor pixel de las tres fotos (tienen blanco puro), también sobre los estratos; manda la firma, en blanco al 70 %. Medido en pantalla: 9.65:1 el lema, 7.79:1 las ventajas y 4.59:1 la firma en su peor pixel. En el teléfono y la tableta la foto va detrás del formulario bajo el velo del fondo de la app al 90 % (cal en claro, obsidiana en oscuro): la firma y la versión, en gris piedra, quedan en AA sobre cualquier pixel (4.94:1 en el peor caso), y la tarjeta es opaca.
Archivos
- WebP en
assets/acceso/, las mismas versiones que sirve la app (public/acceso/del frontend):-560,-840y-1120para el panel (según la densidad de la pantalla) y-480para el fondo velado. La más pesada pesa 43 KB. - Los originales (JPG de 1493 × 2000) no van a los repositorios. Las versiones salen con ffmpeg (
libwebp, Lanczos, calidad 80; 60 la de 480) y sin metadatos.
Dirección de arte
Sí
Estudio con fondo de cal liso y luz suave, lateral, de sombras cortas. Maquetas blancas, planos en papel e instrumentos del oficio (metro, nivel, escalímetro, lapicero). Piedra de la paleta: tezontle, obsidiana, cantera y concreto. Mucho espacio vacío arriba. Para obra real (la página pública, redes): estructura, andamios, cotas y materiales con luz de día.
No
Gente sonriendo a la cámara. Cascos de stock con apretón de manos. Renders con filtros saturados. Colores fuera de la paleta como protagonistas. Fotos sin permiso de uso.
Tratamiento
- Recortes 4:5 en el teléfono y 3:2 en el escritorio; en el acceso, el vertical de la foto con su punto de recorte.
- Cuando lleva texto encima fuera del acceso, el velo de marca: obsidiana al 80–88 % de opacidad. El texto en blanco, siempre sobre el velo. En el acceso, el velo del panel es de obsidiana al 78 %, el más ligero que deja todo su texto en AA, como arriba.
- Las esquinas de las fotos usan el radio de tarjeta (18 px), salvo donde la foto llena su panel de orilla a orilla.
- En la página pública, las pantallas reales de la app valen más que las fotos de banco, con la nota de que los datos son de demostración.
Voz y tono
Itzaka le habla de tú al arquitecto, en español de México. Suena como un colega profesional que lleva las cuentas al día: sólido, directo, concreto y sin promesas de más.
Principios de redacción
Di el número
«Te faltan $12,300 por cobrar» antes que «Revisa tu estado de cuenta». El dato primero y la acción después.
Una acción por frase
Verbos del oficio en imperativo amable: arma, registra, cobra, paga, finaliza.
Promete solo lo que hace
Si algo no funciona sin señal, se dice. Lo que aún no existe no se anuncia como si existiera.
Palabras de obra, no de banco
Partida, avance, saldo, cobro, membrete, despacho. Los mensajes de error dicen qué pasó y cómo seguir.
Ejemplos
«Arma la cotización con tu catálogo de servicios: el total se calcula solo y sale en PDF con tu membrete.»
«Hoy es gratis y sin tarjeta. Cuando haya un plan de pago lo sabrás con tiempo.»
«¡Revoluciona la gestión integral de tus proyectos con nuestra plataforma de última generación! 🚀»
«Error 422: la operación no pudo completarse.»
Vocabulario de marca
| Usa | Evita |
|---|---|
| cotización, partida, total | presupuesto (era el nombre anterior), factura (no se factura) |
| avance, obra, evidencia | tarea, ticket, ítem |
| cobro, saldo pendiente, anticipo | adeudo, morosidad, cartera vencida |
| tu despacho, tu cliente, tu personal | el usuario, el tenant, los recursos |
| correo y código de confirmación | OTP, token, autenticación de dos factores |
Sistema UI / Web (mobile-first)
Corriente de diseño: Material (suave) Propuesto. El producto la dibuja con shadcn/ui sobre Tailwind CSS v4 (antes, con MUI): separa por capas con sombras suaves, bordes finos y radios de 12 a 18 px. Sobrio, legible y sin adornos, como pide una herramienta de dinero.
Botones
Uno solo primario por pantalla. Sobre la superficie de marca (obsidiana) la acción va invertida, en blanco con texto obsidiana (): acceso y página pública.
Componentes base
Tokens de UI
| Token | Valor | Uso |
|---|---|---|
--r-sm / md / lg | 8 / 12 / 18 px | Chips · botones y campos · tarjetas y fotos |
--s-1…--s-9 | 4 → 96 px | Espaciado; en la app, la unidad es 8 px |
--sh-sm / md / lg | 3 niveles suaves | Tarjeta en reposo · hover · diálogos |
| Contenedor | máx. 1100 px | Uno solo para toda la app (720 px para una sola tarea); el menú lateral aparece como riel desde 768 px y completo desde 1024 |
| Niveles | los de la tabla «Niveles» del sistema de diseño del producto | Compacto, mediano y expandido del stack del producto |
| Movimiento | 150–200 ms ease-out | Respeta prefers-reduced-motion |
Principios mobile-first
- En el teléfono la navegación va abajo, al alcance del pulgar.
- Áreas táctiles de al menos 44 × 44 px.
- Las listas son filas apiladas en el teléfono y una tabla desde md; nunca se pintan las dos.
- Una idea por bloque y la acción principal al final del contenido.
Sistema de diseño del producto
Tokens semánticos del contrato shadcn/ui, en modo claro y oscuro, en vivo desde tokens.css (v2.1, paleta de piedra). La app (shadcn/ui con Tailwind CSS v4, desde la iteración 28) copia sus valores tal cual en src/index.css: si cambia uno, cambia el otro en la misma iteración (modo MARCA). Contrastes calculados con script (WCAG 2.x).
Modo claro
bg-overlay/50, en lugar de bg-black/50; no lleva texto y la ventana de encima conserva su contrasteAvance 64 % · saldo $ 12,300.00
Modo oscuro
Avance 64 % · saldo $ 12,300.00
Hay tres superficies que no cambian con el tema, porque no son interfaz: el papel de los documentos (y su vista previa en Organización), el lienzo del editor de planos y la superficie de marca (obsidiana con estratos) del acceso y de la página pública, que en la app son los tokens --brand-surface y --brand-surface-foreground (bg-brand-surface text-brand-surface-foreground), iguales en los dos modos.
Niveles
Los del stack del producto (Tailwind), desde la iteración 28: reemplazan los de MUI (600 · 900 · 1200). El prototipo usa los mismos números y la app recompone en cada uno; 1280 y 1536 solo afinan columnas dentro de expandido.
| Nivel | Ancho | Tailwind | Se valida a |
|---|---|---|---|
| Compacto | < 768 px | sin prefijo · barra inferior y cajón | 360 |
| Mediano | 768–1023 px | md: · riel de 80 px | 768 |
| Expandido | ≥ 1024 px | lg: · barra lateral de 240 px; 1280 (xl:) y 1536 (2xl:) afinan | 1024, 1280 y 1536 |
Componentes y estados
El catálogo es el de shadcn/ui: primitivas del CLI en @/components/ui y los compuestos del producto, hechos con ellas, en @/components/shared. Ninguno se recrea a mano ni se le quita el comportamiento del kit (foco, Esc, tocar fuera, anillo de foco).
| Componente | Variantes | Estados especificados |
|---|---|---|
| Button | default (primario obsidiana) · outline · secondary · ghost · destructive · link · éxito (cva aprobada, «Finalizar proyecto») · invertido (blanco sobre --brand-surface, solo acceso y página pública) | hover → #2B2C30 (claro) o blanco (oscuro) · foco con contorno de 2 px del --ring separado 2 px · deshabilitado al 50 % · enviando con Spinner y su texto · 44 px en táctil · un solo primario por pantalla |
| Input · Textarea · Field · InputGroup · PasswordField | etiqueta arriba del control · ayuda y error debajo · prefijo, sufijo o botón dentro (búsqueda, mostrar contraseña) | foco con contorno del --ring · error con aria-invalid, borde carmín y el texto exacto del criterio · obligatorio con * y la leyenda · deshabilitado · solo lectura |
| InputOTP | código de 6 casillas numéricas | foco por casilla · error del código bajo el grupo |
| Select · combobox (Popover + Command) · DatePicker (Popover + Calendar) | Select para listas cerradas cortas · combobox con búsqueda en el servidor · calendario en español, semana desde el lunes | abiertos sobre --popover · opción con hover o foco en --accent y la elegida con su marca · hoy marcado y el día elegido en --primary · «Buscando…», sin resultados y error con «Reintentar» · en compacto, en un Drawer inferior |
| Checkbox · RadioGroup · Switch · ToggleGroup | casilla de tres estados en las tablas · tarjetas de opción (Apariencia) · fila de conmutador | borde --input, marcado en --primary con --primary-foreground · riel del conmutador --input → --primary · la etiqueta se toca y llega a 44 px · foco visible |
| Card · SectionCard · KpiStat | tarjeta (borde y sombra sm) · cifra sobre la página (tarjeta) o hundida dentro de otra tarjeta (sobre --background, no una tarjeta anidada) · cifra en Inter 600 de 22 px, tabular | título sin ícono decorativo al lado · hover con sombra md en las que se pueden pulsar · entrada de abajo hacia arriba: opacidad + 4 px en 180 ms, sin rebote |
| Badge (StatusChip) | borrador (secondary) · en curso (accent tezontle) · finalizado y pagado (success) · pendiente (warning) · error (destructive) · info | siempre con texto o ícono, no solo color |
| MoneyText | monto · saldo · total | tabular-nums, alineado a la derecha, MXN es-MX |
| Sidebar · barra inferior · DropdownMenu de la cuenta | cajón (Sheet) en compacto · riel de 80 px con el nombre debajo del ícono (mediano) · barra lateral de 240 px (expandido) · barra superior con el símbolo y «ITZAKA» | sección activa en --sidebar-accent (tezontle suave) con aria-current · el botón de menú reduce y amplía · el menú de cuenta anima, se cierra al tocar fuera y con Esc, y el tema va en una fila · el logo cambia de variante con el tema |
| DataList · Table · ServerListToolbar · ServerPaginator · BulkBar | tarjetas en compacto → tabla desde 768 px · búsqueda con espera de 400 ms · embudo de filtros · 10 / 20 / 50 / 100 por página · selección y barra en lote | orden desde el encabezado con aria-sort · Skeleton al cargar · vacío «aún no hay» distinto de «nada coincide» · error con «Reintentar» · la destructiva confirma con el conteo |
| Dialog · Drawer · Sheet · AlertDialog · Popover · DropdownMenu · Tooltip · sonner | formulario corto (Drawer inferior en compacto) · formulario largo (a pantalla completa en compacto) · panel lateral del editor · confirmación destructiva · aviso de resultado | velo de --overlay al 50 % (bg-overlay/50) detrás de las modales · atrapan el foco y lo devuelven · Esc y tocar fuera cierran (el AlertDialog: Esc y Cancelar; el paso legal no se cierra) · leen --popover, --popover-foreground, --accent, --accent-foreground, --border, --input, --ring y --muted, definidos en claro y en oscuro y mapeados en @theme inline · el aviso de error se queda hasta cerrarlo |
| chart (Recharts) | barras verticales (Ingresos cobrados) | colores de --chart-1…5 por modo · tooltip y rejilla del kit · el importe del mes escrito encima · vacío del periodo |
| Guía guiada · TourCenterDialog | foco recortado + tarjeta n/total · hoja inferior en el teléfono | Omitir, Anterior y Siguiente con teclado · estado sin ver, a medias, vista u omitida · el velo es --overlay, obsidiana en los dos modos |
Cambios de la v2.0 (paleta de piedra)
- Primario: de azul
#1E56D6a obsidiana#141517; en oscuro, de#5B8DEFa cal#EEEBE6. - Accent: de azul suave a tezontle suave
#F5E6E1con texto#8A3220: la navegación activa y «En curso» llevan la firma de la marca. - Estados: error a carmín
#D0213A/#FF9AA8, pendiente a ocre#A87400(texto#946500) /#EBC15A, información a pizarra#2F5E86/#7EAED6; el verde se queda. - Neutrales: de grises azulados a piedra y cal (
#F5F3F0,#ECE9E4,#E4E0DA,#8C857C,#5E5A55); oscuro sobre obsidiana#141517/#1C1D20. - Foco: del anillo azul al 35 % a un contorno sólido obsidiana (cal en oscuro).
- Sin degradado:
brandGradienty el velo azul se sustituyen por la superficie de marca obsidiana y los estratos al 8 %.
Para desarrollo
- Web (shadcn/ui con Tailwind CSS v4, desde la iteración 28):
src/index.csscopia estetokens.csstal cual::root, el bloque oscuro (en la app bajo:root[data-theme="dark"], el atributo que pone el script de arranque del tema) y@theme inline. Los tokens viven solo ahí; los componentes usan clases de tokens semánticos (bg-background,text-muted-foreground,border-border…), nunca hex ni paleta cruda. Mientras dure la migración convive el tema de MUI (src/theme/tokens.ts) con los mismos valores en hex; sale al terminarla. - Íconos: Lucide (
lucide-react), 24 px y trazo de 2 px; los decorativos conaria-hiddeny los botones de solo ícono con su nombre accesible. - Editor de planos: el lienzo es papel y tinta y no sigue el tema; sus colores son una paleta de dibujo declarada aparte, con sus valores, en la Visual Spec del producto. La interfaz sobre el lienzo (la pista de la herramienta, el aviso del plano vacío) sí usa los tokens.
- Móvil: no hay app nativa; la web es instalable (PWA):
theme_color #141517,background_color #141517, íconos en tezontle. - Admin (Django): escala del primario para
UNFOLD["COLORS"]["primary"](obsidiana): 50#F5F4F2· 100#E8E7E5· 200#CFCDCA· 300#9C9A97· 400#77777B· 500#55565B· 600#2B2C30· 700#1F2023· 800#141517· 900#0C0D0E· 950#070708. - Documentos (PDF): tinta
#141517, secundario#5E5A55, divisor#E4E0DA; banda por defecto de una cuenta nueva sin color: obsidiana#141517(las cuentas que ya existen conservan el color que tienen guardado). - Claro, oscuro o sistema: se elige en la fila «Tema» del menú de la cuenta (Claro · Oscuro · Sistema) y en Mi perfil › Apariencia. Si no se elige, sigue al sistema. Se guarda por dispositivo (clave
itzaka-theme; la anterior,presuplano-theme, se migra sola la primera vez). El logo cambia de variante con el tema.
Aplicaciones de marca
Dónde vive la marca: la app, la página pública, los documentos que recibe el cliente y los correos.
Documentos en PDF. Manda el membrete del despacho (su nombre, color y logotipo). Itzaka firma en el pie y solo usa su propia marca —símbolo de un color, «ITZAKA» y la firma del grupo— cuando el despacho no tiene una.
La app en el teléfono. Barra inferior, cifras tabulares e ícono instalable en tezontle.
Correos
Los correos de la app (códigos, invitaciones, documentos) llevan el símbolo a color en PNG @2x (36 px de alto) y la firma de Itzaka. Los que llevan el membrete del despacho agregan «optimizado por Itzaka» en el pie.
Redes y vista previa
- Avatar: el ícono de app (tezontle) o el símbolo blanco sobre obsidiana, con el área de protección.
- Vista previa al compartir:
og-itzaka.png(1200 × 630): obsidiana con estratos, símbolo blanco, «ITZAKA» y la firma del grupo. - Plantillas: obsidiana o cal, el título en Space Grotesk y una franja de tezontle como remate.
- Formato: vertical 4:5 y 9:16.
Accesibilidad
Una herramienta que se usa en obra, al sol y con prisa, tiene que leerse a la primera. No es opcional.
- Contraste de texto mínimo AA (4.5:1), verificado en claro y en oscuro (tablas de las secciones 06 y 11).
- Bordes de campo e íconos que comunican, mínimo 3:1 (WCAG 1.4.11).
- Cuerpo mínimo de 16 px; nunca menos de 12 px en leyendas.
- Ningún estado se comunica solo con color: los chips llevan texto y los saldos su etiqueta.
- Foco siempre visible: contorno de 2 px en obsidiana (cal en oscuro) separado 2 px del elemento; nunca en tezontle, para no confundirlo con un error. Nunca
outline: nonesin reemplazo. - Navegación completa con teclado,
aria-labelen los botones de ícono yaria-liveen los avisos de error. - Objetivos táctiles de al menos 44 × 44 px.
- Se respeta
prefers-reduced-motion.
Mantenimiento y versionado
Este manual es vivo: crece con la marca y se actualiza, no se copia. Cada cambio se documenta aquí.
- Fuente única de verdad: los tokens de marca viven en las variables CSS de este archivo, y los del producto en
tokens.css, que la app copia ensrc/index.css. - Versionado:
vMAYOR.MENOR. Color, tipografía, logotipo o corriente = mayor; ajustes = menor. - Un cambio de marca va primero aquí y después a los sitios, los documentos y el código (modo MARCA), solo cuando se pide replicarlo.
- Antes de crear una pieza nueva: ¿usa la paleta?, ¿la tipografía?, ¿la voz?, ¿es mobile-first?, ¿pasa AA en claro y oscuro?
Corriente de diseño
| Aplicada | Por qué | Descartadas |
|---|---|---|
| Material (suave) Propuesto | Es la corriente con la que nació el producto (MUI) y la que conserva al dibujarse con shadcn/ui desde la iteración 28. Un SaaS de dinero y obra pide capas claras, sombras suaves y densidad cómoda. Conserva el borde de 1 px de las tarjetas y los radios propios (8 / 12 / 18). | Data-Centric: demasiado compacta para el teléfono en obra. Flat: sin elevación, y la app ya separa por capas. Minimalism: descartada por densidad. |
Composición
Arquetipo de composición «documento técnico» Propuesto: sidebar fija en obsidiana honda, retícula a una columna de 980 px, portada de obsidiana con estratos y franja de tezontle, y una sola tensión visual (la portada); el resto, ritmo regular de secciones. Tokens: densidad cómoda, contraste tipográfico medio, sin solapamientos.
Consolidación (ruta ESTANDARIZAR)
| Elemento | Design system 16 (doc) | Producto (código) | Queda |
|---|---|---|---|
| Fondo | #F6F7F9 | #F4F6FB | código |
| Texto / secundario | #1A2230 / #5A6675 | #141B2B / #586176 | código |
| Superficie apagada / borde | #EEF1F5 / #E2E6EC | #EEF1F6 / #E3E8EF | código |
| Radios | 6 / 10 / 16 | 8 / 12 / 18 | código |
| Fuente display | — (solo Inter) | Space Grotesk en la página pública | Space Grotesk |
| Info en oscuro | sin valor | #4BA3DB | código |
| Contraste del ámbar | «≥ 4.5:1 ✅» | 4.24:1 medido | corregido: Ámbar texto propuesto |
Elementos propuestos
| Elemento | Valor propuesto | Estado |
|---|---|---|
| Misión, visión, valores | Sección 01 | Pendiente de validar |
| Audiencia secundaria e influyente | Sección 02 | Pendiente de validar |
| Ejes de personalidad y arquetipo | Sabio + Hombre común | Pendiente de validar |
| Área de protección y tamaños mínimos | ¼ del lado · 24 px · 8 mm | Pendiente de validar |
| Paleta de piedra (obsidiana primario, tezontle acento) | Sección 06 · propuesta A | Aprobada 2026-10-28 |
| Regla del nombre escrito | «ITZAKA», Inter 800, +0.08 em | Aprobada 2026-10-28 |
| Ámbar texto · Verde texto | #9A5B00 · #2A7530 | Confirmado · en la app desde 2.35.2 |
| Borde de campo AA | #818B9D / #6B7686 | Confirmado · en la app desde 2.35.2 |
| Pasos intermedios de escala | 200 #C9D8FB · acento 300 · apoyo 800 y 300 · Unfold 900 y 950 | Pendiente de validar |
| Corriente y arquetipo de composición | Material (suave) · documento técnico | Pendiente de validar |
| Firma de correo y plantillas de redes | Sección 12 | Pendiente de validar |
Checklist rápido de marca
| Revisión | OK |
|---|---|
| Color dentro de la paleta; tezontle solo como firma, nunca como estado | ☐ |
| Space Grotesk en títulos; Inter en la interfaz; «ITZAKA» en Inter 800 junto al símbolo | ☐ |
| Variante del logo correcta para el fondo, área de protección y versión simplificada a 16-32 px | ☐ |
| Copy de tú, con el número primero y sin promesas de más | ☐ |
| Diseñado mobile-first, con áreas táctiles de 44 px | ☐ |
| Contraste AA verificado en claro y en oscuro | ☐ |
Registro de cambios
| Versión | Fecha | Cambio | Replicado en |
|---|---|---|---|
| 1.0 | 2026-10-05 | Versión inicial, ruta ESTANDARIZAR: consolida el logo, los tokens del producto, el design system 16 y el brief 17 en un solo manual. Agrega tokens.css y el sistema de diseño del producto (sección 11), que reemplaza a diseno/16_design_system.md. | Sitio de documentación (resumen y backlog) |
| 1.1 | 2026-10-05 | Correcciones AA de iteracion-3: ámbar y verde para texto, contorno de campos #818B9D / #6B7686 (antes propuesto #8A94A6, que no llegaba a 3:1 sobre la página). | App (2.35.2) · tokens.css |
| 2.0 | 2026-10-28 | Rebranding Cuotreka → Itzaka, una solución de Grupo Torres Muciño (el nombre anterior se pronunciaba mal: «cuo» se leía «cou»). Logo nuevo de talud-tablero sin texto (color, blanco, negro, ícono de app y versión simplificada para favicon) y regla del nombre escrito. Paleta de piedra: obsidiana como primario, tezontle como acento de marca, neutrales de cal y piedra; error carmín y pendiente ocre para separarse del tezontle; modo oscuro sobre obsidiana. Se eliminan el degradado y la cuadrícula de plano (los sustituyen los estratos). Proporción 60·30·10 corregida y nota de movimiento. Corrige la versión de la portada (decía 1.0). Tres tokens más, fuera del contrato shadcn, para que el tema de MUI siga siendo espejo exacto: --primary-soft (obsidiana suave para lo seleccionado; el tezontle suave queda solo para la navegación activa y «En curso»), --primary-softer y --text-disabled. | tokens.css y sitio de documentación; frontend y backend 3.10.0 (iteracion-20, integrado en develop; producción pendiente). Pendiente: la captura del editor de planos de la página pública. |
| 2.1 | 2026-11-01 | Correcciones técnicas, sin cambio de ningún valor de marca (aprobadas por la persona el 2026-11-01): el producto deja MUI por shadcn/ui con Tailwind CSS v4. Los íconos pasan a Lucide (sección 08); la corriente (secciones 11 y 14) y la fuente de verdad (sección 14) dicen cómo se dibuja ahora el producto; el bloque del producto de la sección 11 pasa al contrato de shadcn (catálogo de componentes y tabla «Niveles» de Tailwind: 768 y 1024, con 1280 y 1536 que afinan) y la app copia tokens.css tal cual en src/index.css. tokens.css suma --brand-surface y --brand-surface-foreground (obsidiana y blanco, iguales en claro y en oscuro), la superficie de marca que la app ya usa en el acceso. También suma --overlay (obsidiana en los dos modos): el velo de las ventanas modales al 50 %, en lugar del negro puro de los componentes del kit. | Frontend (iteración 28, en curso) · tokens.css · prototipo |
| 2.2 | 2026-11-01 | Las tres fotografías de estudio de las pantallas de acceso (sección 09), elegidas por la persona: la maqueta blanca con tezontle y obsidiana al crear la cuenta, verificar el código y aceptar una invitación; el plano con el cubo de concreto al iniciar sesión; la maqueta con la llave al recuperar la contraseña. Dónde va cada una, su punto de recorte y cómo va el texto (en la obsidiana sólida, nunca sobre la foto; en el teléfono, bajo el velo del fondo al 90 %), con sus versiones WebP en assets/acceso/. La dirección de arte suma la fotografía de estudio a la de obra, y la variante del logotipo por escenario (sección 05) separa el panel de la computadora del teléfono. Ruta ACTUALIZAR, cambio menor: no cambian tokens, paleta, tipografías ni logotipo; las fotos de obra de la v2.0 dejan el acceso. | Frontend (iteración 29, en curso: AuthLayout y public/acceso/) · Visual Spec §11. Pendiente: la pantalla de acceso del prototipo, que sigue con foto-obra.jpg. |
| 2.2.1 | 2026-11-01 | Corrección de texto de la sección 09 y de la variante del logotipo por escenario (sección 05). En la computadora la fotografía de acceso vuelve a ser el fondo de todo el panel, como antes de la 2.2, bajo un velo uniforme de obsidiana al 78 % y los estratos. Es el velo más ligero con el que todo el texto del panel pasa AA sobre el peor pixel de las tres fotos; manda la firma en blanco al 70 %. Deja de quedar como un bloque entre la banda de obsidiana y la firma. Ruta ACTUALIZAR, parche: no cambian tokens, paleta, tipografías, logotipo ni fotografías. | Frontend (iteración 30, item #2: AuthLayout) · Visual Spec §11 |