Marca

Guía de marca y diseño.

Lo que hace reconocible a Qontador: el logo, el verde, la tipografía y cómo hablamos. Para diseñadores, desarrolladores y agentes de IA.

1. La marca

Una Q geométrica de cuatro bloques. El superior izquierdo es verde; los otros tres van en el color del texto. Los bloques superior derecho e inferior izquierdo tienen la esquina exterior cortada en diagonal a 45°: es lo que la distingue de un cuadrado partido. Es la misma geometría del icono de la app, y la única válida.

Color sobre claro
Color sobre oscuro
Monocroma negra
Monocroma blanca

2. Logotipo

Marca más la palabra “Qontador” en Inter 700 con tracking −0.035em, alineada a la altura de la marca. Capital inicial, nunca en mayúsculas.

Qontador
Qontador

Espacio libre y tamaño mínimo

Deja libre al menos un bloque (28 % del ancho) alrededor. Tamaño mínimo: 16 px en pantalla, 6 mm en impresión. La marca sola sirve como favicon e icono de app.

Lo que no se hace

  • Cambiar el verde del bloque o colorear los otros tres bloques.
  • Usar la versión antigua con muescas y sin esquinas en diagonal.
  • Rotar, inclinar, estirar, añadir sombras, degradados o contornos.
  • Escribir “Qonta”, “QONTADOR” u “Onux DTE”.
  • Colocar la marca sobre fotos sin un velo que garantice contraste.

3. Color

El verde es acento, no fondo general: una base clara y cálida, verde en bloques, chips, enlaces y portadas, y negro casi puro para texto y estados oscuros.

accent-solid#3fc646Bloque del logo, iconos, acentos
accent#2ea032Verde de marca en fondos y elementos grandes
accent-text#1f7d24Texto y enlaces verdes sobre blanco (AA 5.2:1)
accent-contrast#062a08Texto sobre verde vivo; fondo de degradados
accent-soft#e8f8e9Chips y resaltados
text#0a0a0aTexto, botón primario, secciones oscuras
text-muted#4d4e56Texto secundario (AAA 8:1)
text-subtle#6b6f76Texto terciario (AA 4.8:1)
bg-sand#faf8f3Fondo cálido de secciones y tarjetas
bg-cream#f5f1ebBandas de énfasis
border#e6e2d8Bordes cálidos
bg#ffffffFondo base

Degradados de portada

135deg, #0b5d32 0%, #2ea032 58%, #7fe68a 100%
160deg, #0f4a37 0%, #1f9a4d 55%, #7fdc8a 100%
120deg, #15702a 0%, #3fc646 55%, #9fe8a6 100%
145deg, #062a08 0%, #1f7d24 50%, #4fcf5a 100%

4. Tipografía

Tu contabilidad, automatizada.

Bricolage Grotesque

Titulares del sitio público y pop-ups. Peso 600–700, tracking −0.02 a −0.03em.

Entran solos desde Gmail y quedan clasificados. Cruce de IVA al día y F-07 listo.

Inter

Todo el texto de interfaz y cuerpo: 15–16 px en web, 13–14 px en tablas de la app.

DTE-03-M001P001-000000000000128
0614-031126-101-0 · $1,291.00

Geist Mono

Números de control, códigos de generación, NIT y montos tabulares.

Escala de la app

Cinco roles y nada fuera de ellos. Sin mayúsculas con tracking, sin tamaños a mano, negrita solo en el logotipo, montos siempre tabulares y un solo titular por pantalla.

$1,291.00

Titular · 30/36 px, 600 · uno por pantalla

Compras y ventas por mes

Sección · 14 px, 500

Crédito fiscal $5,304.80 · 813 documentos

Cuerpo · 14 px, 400

4 nov · Crédito fiscal · Contado

Secundario · 12 px, atenuado

DTE-03-M001P001-000000000000128

Código · Geist Mono 12 px

5. Interfaz

Botones

PrimarioFantasmaVerde sobre oscuro

Primario negro con texto blanco; sobre fondos oscuros, blanco con texto negro. El verde como botón solo sobre oscuro. Píldora (999 px) en el sitio, 8 px en la app.

Tarjetas, inputs y movimiento

Tarjeta 16–20 pxInput 10 px · 44 px alto

Sombra de tarjeta suave y cálida; en elementos verdes, sombra verde al pasar el ratón. Movimiento de 150 a 300 ms con curva cubic-bezier(0.2, 0.8, 0.2, 1), siempre respetando prefers-reduced-motion. Iconos lucide a 1.5 de trazo. Contenedor de 1440 px.

6. Voz

Sí

  • Español de El Salvador, de tú. En el sitio público con tildes y signos de apertura.
  • Frases cortas con números reales. Hablar del producto en el orden en que se usa.
  • Las palabras del cliente: “tu contador”, “Hacienda”, “F-07”, “DTE”.
  • Admitir límites: decir la etapa vigente y no presentar como hecho lo que todavía revisa el usuario o su contador.

No

  • Cifras inventadas o testimonios sin permiso.
  • Mayúsculas para enfatizar; anglicismos con palabra en español.
  • “Qonta”, “QONTADOR”, “Onux DTE”. Siempre Qontador.
  • Prometer lo que no está construido.

7. Descargas

Marca, color (SVG) Marca, sobre oscuro (SVG) Marca, mono negro (SVG) Marca, mono blanco (SVG) Logotipo horizontal (SVG) Logotipo sobre oscuro (SVG) Marca 1024 px (PNG) Logotipo 2000 px claro (PNG) Logotipo 2000 px oscuro (PNG)

Marca y software propiedad de SPOT AI, S.A.S. de C.V.. Para usar el logo en prensa o alianzas, escribe a contacto.

Para IA y agentes

Dos archivos con las mismas reglas, listos para dárselos a un modelo o a un agente que diseñe o escriba para Qontador.

brand.json BRAND.md