# Qontador · Guía de marca y diseño

Guía corta para personas y para agentes de IA que generen interfaz, imágenes o copy
de Qontador. Versión legible por máquina: `/brand/brand.json`. Página: https://qontador.com/marca

## Marca

- **Marca (isotipo):** una Q geométrica de cuatro bloques. El superior izquierdo es
  verde sólido `#3fc646`; los otros tres van en el color del texto (negro `#0a0a0a`
  sobre claro, blanco sobre oscuro). Los bloques superior derecho e inferior izquierdo
  tienen una esquina cortada en diagonal a 45° hacia afuera. **Nunca** la versión
  vieja con muescas ni esquinas rectas en esos bloques.
- **Logotipo:** marca + palabra "Qontador" en Inter 700, tracking -0.035em, misma
  altura que la marca. Capital inicial; nunca "QONTADOR", "Qonta" ni "Onux DTE".
- **Archivos:** `/brand/qontador-mark.svg`, `-white.svg`, `-mono-black.svg`,
  `-mono-white.svg`; `/brand/qontador-logo.svg`, `-white.svg`; PNG en
  `/brand/mark-1024.png`, `/brand/logo-2000.png`, `/brand/logo-dark-2000.png`.
- **Espacio libre:** un bloque (28 % del ancho) alrededor. **Tamaño mínimo:** 16 px
  en pantalla, 6 mm impreso.
- **Prohibido:** recolorear, rotar, estirar, sombras, degradados o contornos sobre la
  marca; colocarla sobre fotos sin velo que asegure contraste 4.5:1.

## Color

| Token | Hex | Uso |
|---|---|---|
| accent | #2ea032 | verde de marca en fondos y elementos grandes |
| accent-solid | #3fc646 | bloque del logo, iconos, acentos |
| accent-text | #1f7d24 | texto y enlaces verdes sobre blanco (AA) |
| accent-soft | #e8f8e9 | chips y resaltados |
| accent-contrast | #062a08 | texto sobre verde vivo y degradados profundos |
| text | #0a0a0a | texto principal, botones primarios, secciones oscuras |
| text-muted / subtle | #4d4e56 / #6b6f76 | texto secundario y terciario |
| bg / sand / cream | #ffffff / #faf8f3 / #f5f1eb | fondos |
| border | #e6e2d8 | bordes cálidos |

Degradados de portada (tarjetas del menú, acceso, pop-ups): 135° `#0b5d32 → #2ea032 → #7fe68a`;
160° `#0f4a37 → #1f9a4d → #7fdc8a`; 120° `#15702a → #3fc646 → #9fe8a6`; 145° `#062a08 → #1f7d24 → #4fcf5a`.
Regla: el verde es acento sobre una base clara; el negro casi puro marca los estados oscuros.

## Tipografía

- **Bricolage Grotesque** para titulares del sitio público (600–700, tracking -0.02 a -0.03em).
- **Inter** para todo el texto de interfaz y cuerpo (15–16 px web; 13–14 px en tablas).
- **Geist Mono** para números de control, códigos, NIT y montos tabulares.

## Interfaz

- Radios: botones 999 px (sitio) / 8 px (app); tarjetas 16–20 px; inputs 10 px; portadas 12 px.
- Botón primario negro con texto blanco; sobre oscuro, blanco con texto negro. Fantasma: borde `#e6e2d8`.
- Iconos lucide, trazo 1.5, 16–20 px. Movimiento 150–300 ms con `cubic-bezier(0.2, 0.8, 0.2, 1)` y
  respeto a `prefers-reduced-motion`.
- Contenedor 1440 px (escenario del hero 1600), margen `clamp(20px, 4vw, 96px)`; cortes 640 / 900 / 1024 / 1200.

## Voz

Español de El Salvador, tuteo. En el sitio público con tildes y signos de apertura; en la app
sin tildes donde el archivo no las usa. Frases cortas con números reales; sin cifras inventadas ni
testimonios sin permiso; sin mayúsculas para enfatizar; decir "tu contador", "Hacienda", "F-07",
"DTE" como lo dice el cliente; admitir límites con la etapa vigente (alfa hasta el 1 de enero de 2027) y sin presentar como hecho lo que el usuario o su contador todavía presenta.