{
  "name": "Qontador",
  "owner": "SPOT AI, S.A.S. de C.V.",
  "version": "1.40",
  "updated": "2026-11-05",
  "canonical": "https://qontador.com/marca",
  "design_system": {
    "url": "https://claude.ai/artifact/EFhKoeJ4bq6NHNENesFBce",
    "rule": "Fuente vinculante del diseno: tokens, componentes y bitacora de decisiones (project/decisiones.md). Todo cambio visual se decide o se anota alli y se refleja en BRAND.md y en este archivo en el mismo PR."
  },
  "logo": {
    "mark": {
      "description": "Q geometrica de cuatro bloques: el superior izquierdo verde solido; los otros tres en el color del texto (negro sobre claro, blanco sobre oscuro). Los bloques superior derecho e inferior izquierdo llevan una esquina en diagonal (45 grados) hacia afuera. Nunca con muescas ni esquinas rectas en esos dos bloques.",
      "viewBox": "0 0 100 100",
      "files": {
        "color_on_light": "/brand/qontador-mark.svg",
        "color_on_dark": "/brand/qontador-mark-white.svg",
        "mono_black": "/brand/qontador-mark-mono-black.svg",
        "mono_white": "/brand/qontador-mark-mono-white.svg",
        "png_1024": "/brand/mark-1024.png",
        "png_512": "/icon-512.png"
      },
      "geometry": {
        "green_block": [
          2,
          2,
          28.3,
          28.3
        ],
        "gap": 8.7,
        "chamfer": 28.3,
        "corner_radius": 1.6
      },
      "clear_space": "Un bloque (28.3 % del ancho de la marca) libre alrededor.",
      "min_size_px": {
        "screen": 16,
        "print_mm": 6
      }
    },
    "wordmark": {
      "text": "Qontador",
      "font": "Inter",
      "weight": 700,
      "letter_spacing": "-0.035em",
      "case": "Capital inicial, nunca mayusculas completas",
      "files": {
        "color_on_light": "/brand/qontador-logo.svg",
        "color_on_dark": "/brand/qontador-logo-white.svg",
        "png_light": "/brand/logo-2000.png",
        "png_dark": "/brand/logo-dark-2000.png"
      }
    },
    "donts": [
      "No cambiar el verde del bloque ni colorear los otros tres bloques.",
      "No usar el logo viejo con muescas (sin diagonales).",
      "No rotar, inclinar, estirar ni aplicar sombras, degradados o contornos a la marca.",
      "No escribir 'Qonta', 'QONTADOR' ni 'Onux DTE'.",
      "No colocar la marca sobre fotos sin un velo que asegure contraste 4.5:1."
    ]
  },
  "color": {
    "accent": {
      "hex": "#2ea032",
      "role": "Verde de marca para fondos y elementos grandes"
    },
    "accent_solid": {
      "hex": "#3fc646",
      "role": "Verde vivo del bloque del logo, iconos y acentos"
    },
    "accent_text": {
      "hex": "#1f7d24",
      "role": "Verde para texto y enlaces sobre blanco (AA 5.2:1)"
    },
    "accent_soft": {
      "hex": "#e8f8e9",
      "role": "Fondo verde suave para chips y resaltados"
    },
    "accent_contrast": {
      "hex": "#062a08",
      "role": "Verde profundo para texto sobre verde vivo y degradados"
    },
    "text": {
      "hex": "#0a0a0a",
      "role": "Texto principal y bloques del logo sobre claro"
    },
    "text_muted": {
      "hex": "#4d4e56",
      "role": "Texto secundario (AAA 8:1)"
    },
    "text_subtle": {
      "hex": "#6b6f76",
      "role": "Texto terciario (AA 4.8:1)"
    },
    "bg": {
      "hex": "#ffffff",
      "role": "Fondo base"
    },
    "bg_sand": {
      "hex": "#faf8f3",
      "role": "Fondo calido para secciones y tarjetas"
    },
    "bg_cream": {
      "hex": "#f5f1eb",
      "role": "Bandas de enfasis"
    },
    "bg_dark": {
      "hex": "#0a0a0a",
      "role": "Secciones invertidas, pie y mega menu abierto"
    },
    "border": {
      "hex": "#e6e2d8",
      "role": "Bordes calidos"
    },
    "gradients": {
      "cover_1": "linear-gradient(135deg, #0b5d32 0%, #2ea032 58%, #7fe68a 100%)",
      "cover_2": "linear-gradient(160deg, #0f4a37 0%, #1f9a4d 55%, #7fdc8a 100%)",
      "cover_3": "linear-gradient(120deg, #15702a 0%, #3fc646 55%, #9fe8a6 100%)",
      "cover_4": "linear-gradient(145deg, #062a08 0%, #1f7d24 50%, #4fcf5a 100%)"
    },
    "rule": "El verde es acento, no fondo general: una pagina clara con verde en bloques, chips, enlaces y portadas. Negro casi puro (#0a0a0a) para texto y para estados oscuros.",
    "chart_purchases": {
      "hex": "#4a4a4a",
      "role": "Serie Compras de la grafica (token --grafica-compras, oklch 0.3 claro / 0.8 oscuro)"
    },
    "chart_sales": {
      "hex": "#1f7d24",
      "role": "Serie Ventas de la grafica (token --grafica-ventas = marca-texto)"
    },
    "balance_due": {
      "hex": "#c0392b",
      "role": "Saldo a pagar (token --saldo-pagar, oklch 0.55 0.18 25); siempre con la palabra «a pagar»"
    },
    "balance_credit": {
      "hex": "#1f7d24",
      "role": "Saldo a favor (token --saldo-favor = marca-texto); siempre con la palabra «a favor»"
    }
  },
  "typography": {
    "display": {
      "family": "Bricolage Grotesque",
      "use": "Titulares del sitio publico (h1, h2, pop-ups), peso 600-700, tracking -0.02 a -0.03em"
    },
    "text": {
      "family": "Inter",
      "use": "Todo el texto de interfaz y cuerpo; 15-16px en web, 13-14px en tablas de la app"
    },
    "mono": {
      "family": "Geist Mono",
      "use": "Numeros de control, codigos de generacion, NIT, montos tabulares"
    },
    "scale": {
      "public": {
        "h1": "clamp(40px, 6vw, 88px)",
        "h2": "clamp(28px, 3.4vw, 44px)",
        "body": "15-16px / 1.55"
      },
      "app": {
        "titular": {
          "class": "t-titular",
          "size": "30px; 36px desde 768px",
          "weight": 600,
          "tracking": "-0.025em",
          "use": "Uno por pantalla: el dato que responde la pregunta"
        },
        "seccion": {
          "class": "t-seccion",
          "size": "14px",
          "weight": 500,
          "use": "Titulos de tarjetas y bloques"
        },
        "cuerpo": {
          "class": "t-cuerpo",
          "size": "14px (inputs 16px en movil)",
          "weight": 400,
          "use": "Texto, filas y notas"
        },
        "secundario": {
          "class": "t-secundario",
          "size": "12px",
          "weight": 400,
          "color": "muted",
          "use": "Fechas, etiquetas de campo, pies"
        },
        "codigo": {
          "class": "t-codigo",
          "family": "Geist Mono",
          "size": "12px",
          "use": "Numero de control, NIT, codigo de generacion"
        }
      },
      "rules": [
        "Sin mayusculas con tracking: van en minusculas como secundario",
        "Sin tamanos a mano (text-[10px], text-[13px])",
        "font-bold solo en el logotipo",
        "Montos siempre tabulares",
        "Un solo h1 por pantalla y es el Titular"
      ]
    }
  },
  "ui": {
    "radius": {
      "button": "999px en sitio publico, 8px en la app",
      "card": "16-20px",
      "input": "10px",
      "cover": "12px"
    },
    "shadow": {
      "card": "0 1px 3px rgba(10,10,10,0.04), 0 8px 24px -12px rgba(10,10,10,0.08)",
      "hover": "0 24px 48px -24px rgba(6,42,8,0.5) en elementos verdes"
    },
    "buttons": {
      "primary": "Negro #0a0a0a con texto blanco; en fondo oscuro, blanco con texto negro; verde solo para CTA sobre oscuro",
      "ghost": "Borde #e6e2d8, texto #0a0a0a"
    },
    "icons": {
      "set": "lucide-react",
      "stroke": 1.5,
      "size": "16-20px en interfaz; 18px en insignias"
    },
    "motion": {
      "duration": "150-300ms",
      "easing": "cubic-bezier(0.2, 0.8, 0.2, 1)",
      "rule": "Siempre respetar prefers-reduced-motion"
    },
    "layout": {
      "container": "1440px",
      "hero_stage": "1600px",
      "gutter": "clamp(20px, 4vw, 96px)",
      "breakpoints": [
        640,
        900,
        1024,
        1200
      ]
    },
    "tables": {
      "wide": "Contenedor tabla-adaptable (container query): col-terciaria se oculta hasta 896px (NRC, montos en cero todo el periodo); col-secundaria hasta 736px (tipo, numero de control, NIT, conteos). Totales, nombres, gravadas, IVA y total siempre visibles; la exportacion lleva todas las columnas."
    }
  },
  "voice": {
    "language": "Espanol de El Salvador, tuteo",
    "public_site": "Con tildes y signos de apertura. Frases cortas, concretas, con numeros reales. Sin promesas que no esten construidas.",
    "app": "Sin tildes donde el archivo no las usa (estilo historico de la app); etiquetas cortas; nunca jerga interna.",
    "product_name": "Qontador, siempre con Q mayuscula y el resto en minuscula.",
    "do": [
      "Hablar de lo que hace el producto en el orden en que se usa",
      "Decir 'tu contador', 'Hacienda', 'F-07', 'DTE' como los usa el cliente",
      "Admitir limites con la etapa vigente (alfa hasta el 1 de enero de 2027) y sin presentar como hecho lo que el usuario o su contador todavia presenta"
    ],
    "dont": [
      "Cifras inventadas o testimonios sin permiso",
      "Mayusculas para enfatizar",
      "Anglicismos cuando hay palabra en espanol"
    ]
  }
}