Los reportes son el activo más importante de la marca — es donde el cliente ve el resultado del proceso. Este documento define layout, portada, headers, elementos característicos y colores del builder de PDFs.
Todo reporte se apoya en las mismas medidas. Estas no cambian, aunque el contenido sí.
La portada define autoridad. Logo prominente, título del reporte que se lee de un jalón, meta clara (candidato + vacante + fecha).
Cada sección de un reporte abre con un título y una barra de acento indigo. Es la firma visual que unifica todo el documento.
Los reportes tienen cuatro elementos que se repiten y que definen la personalidad visual: cards de info, tablas, barras de competencia, citas de evidencia.
Para destacar hallazgos clave o resúmenes ejecutivos. Nunca se usan solo para "hacer más lindo" — cada card debe representar un insight concreto.
Header: Helvetica-Bold 9pt UPPERCASE. Rows: fondo blanco con bottom-border LINE de 0.5pt. Sin border-top ni border-right — mantener limpia la vista.
Para dimensiones psicométricas normalizadas 0-100%. El fill siempre PRIMARY (nunca colores semánticos — es descripción, no juicio). La etiqueta a la izquierda, el percentil numérico a la derecha.
Cuando el reporte cita evidencia de un instrumento específico (p.ej. "según el HEXACO..."), la cita va en Helvetica-Oblique 9pt color MUTED, precedida de una comilla azul PRIMARY como marcador visual. Nunca destaca sobre el body — respalda.
Los PDFs generados desde /demo (público, sin auth) llevan un watermark "DEMO" en gris translúcido, cruzando la página en diagonal. Nunca aparece en PDFs de clientes reales.
Es la línea que separa "muestra pública" de "producto pagado". Si un cliente real recibe un PDF con el watermark, es un bug crítico. Si un demo público sale sin watermark, es un problema de licencia/branding. La lógica que decide vive en el builder — nunca hardcodear una excepción manual.
Estas constantes viven en el builder PDF y se usan para todo color en cualquier reporte. Sincronizan con los hex del sistema web pero se expresan en el rango que el builder requiere.
// PDF Color constants · brand-book.md §2.7 // Fuente única: sincronizar con globals.css PRIMARY = [0.39, 0.40, 0.95] // #6366f1 indigo AI_PURPLE = [0.42, 0.27, 0.76] // #6b45c2 IA blocks ACCENT = [0.06, 0.72, 0.51] // #10b981 emerald RED = [0.94, 0.27, 0.27] // #ef4444 alertas AMBER = [0.96, 0.62, 0.04] // #f59e0b warnings TEXT = [0.07, 0.09, 0.15] // #111827 body MUTED = [0.61, 0.63, 0.69] // #9ca3af secundario LINE = [0.90, 0.91, 0.94] // #e6e9ef líneas BG = [0.97, 0.98, 0.98] // #f8f9fb fondo
El builder de PDFs (700+ líneas hand-rolled en apps/web/src/lib/pdf/builder.ts) tiene su propia lista de constantes. Si algún color web cambia en globals.css, actualizar también estas constantes RGB en el builder — no dejar solo una fuente al día.
Este brandbook fue producido por KOJ Consulting a partir del brand-book.md oficial de Psicometrikas.