Este es el sistema oficial. Primary, accent, semánticos, neutrales, tags categóricos, gradientes y colores PDF — todo lo que aparece en cualquier deliverable de Psicometrikas vive dentro de este documento. Nada afuera del sistema debe llegar a producción.
Este indigo aparece en el logo, en los CTAs principales y en los headers de reportes. Si alguien no ve nada más de Psicometrikas, ve este color.
Cuando algo dice "esto es Psicometrikas" (logo, CTA principal, header de reporte, marca en la sidebar), va en #6366f1. Cuando hay hover o énfasis, sube a #4f46e5. Cuando hay que suavizar sin perder la marca (background de card destacada), baja a #eef2ff. Todos los primary con blanco cumplen mínimo AA-Large; para texto pequeño usar siempre primary-dark.
El acento es emerald #10b981. Se reserva para estados de éxito, tareas completadas, scores altos y confirmación de acciones. Nunca compite con el primary — lo complementa.
#10b981 sobre blanco solo tiene 2.54:1 — falla WCAG completo. Para texto verde sobre blanco (badges, labels de "completado", etc.) usar siempre --accent-dark (#059669) o combinar con background --accent-light. El accent base sirve para fills grandes (botones de éxito, iconos ≥24px, badges).
Danger (rojo), warning (ámbar) e info (azul) tienen roles no negociables. Cada aparición debe cargar el significado que le corresponde — nunca decorativo.
Rojo solo para errores críticos y red flags. Ámbar solo para pendientes / atención blanda. Azul solo para info y estados "en progreso" (nunca confundir con primary indigo — el indigo es marca, el azul info es sistema). Todos los semánticos base fallan AA sobre blanco → usar solo como fill o combinar con su light-bg correspondiente.
La escala neutral es donde vive el 80% del producto. Ocho niveles, cada uno con función definida.
Para etiquetar categorías de tests, competencias o cualquier taxonomía. Cada tag combina un background suave con texto oscuro del mismo tono. Nunca inventar un color nuevo: si aparece una categoría nueva, se le asigna uno de estos siete.
Todos los tag-pairs pasan AA sobre su bg soft (5.21:1 hasta 7.07:1). Cuando aparezca una categoría nueva de test, encajarla en uno de los siete existentes — no crear un octavo color. Si de verdad no encaja en ninguno, probablemente el sistema de categorías necesita revisión, no la paleta.
Los gradientes existen para dar peso a los momentos importantes. Solo hero, CTA footer, texto destacado y sección de dolor. Nunca decorativos, nunca en cards de contenido regular.
linear-gradient(180deg, #f8f9fb 0%, white 50%, #f0f0ff 100%)
linear-gradient(135deg, #6366f1, #818cf8, #a78bfa)
linear-gradient(135deg, #312e81, #6366f1, #7c3aed)
linear-gradient(180deg, #fff 0%, #fef2f2 100%)
El hero abre con el gradient suave. Si esa misma vista tiene un CTA footer con gradient, ya se acumularon dos — cortar uno. Los gradientes existen para dar peso, no para decorar. Cards de contenido, backgrounds de sección, botones normales: siempre colores planos.
Los PDFs usan valores RGB normalizados (0 a 1) mapeando 1:1 a los hex web. Esta tabla es la fuente para el builder de PDFs en apps/web/src/lib/pdf/builder.ts.
El builder de PDFs (700+ líneas hand-rolled) tiene su propia lista de constantes. Si algún color web cambia, actualizar también estas constantes RGB — no dejar solo una fuente al día.
Los pares críticos del sistema con su ratio real. Los que fallan AA se marcan explícitamente para que quien los use sepa que solo sirven como fill decorativo (nunca texto pequeño sobre blanco).
Accent (#10b981) 2.54:1 — solo para fills grandes. Para texto verde usar accent-dark (#059669) o combinar con accent-light bg. Warning (#f59e0b) 2.15:1 — nunca en texto sobre blanco. Muted (#9ca3af) 2.54:1 — sí funciona como placeholder o hint donde el fail está esperado por diseño (indica campo vacío / secundario), no se corrige.
Cinco pares de comparación con los errores más frecuentes cuando el sistema se relaja.
Botones principales usan --primary-dark (#4f46e5). 6.29:1 pass AA. Lo lees sin esfuerzo.
--primary con blanco es 4.47:1 — falla texto pequeño. En botones densos con label ≤14px, muchos usuarios se van a esforzar.
Badge "Completado" con background #ecfdf5 y texto #059669. 3.58:1 pass AA-Large + tag pattern.
#10b981 en texto sobre blanco es 2.54:1 — FAIL. Se ve pálido y los usuarios con visión reducida no lo distinguen.
Tag "Personalidad" = purple pair (#eef2ff + #4338ca). Tag "Ventas" = orange (#fff7ed + #c2410c). Nunca mezclar.
Usar un teal random para "ventas" rompe la asociación aprendida. Ventas es orange. Bienestar es teal. Cambiarlo confunde.
Alert de "respuestas sospechosas detectadas" con --danger. Validación de campo requerido vacío. Indicador de plaza vencida.
Usar rojo en un CTA "Contratar ahora" porque queremos que llame la atención rompe el sistema. Rojo = peligro. Ese CTA es primary indigo.
La landing abre con gradient hero. La sección de dolor usa gradient pain. Cada uno una vez.
Poner el gradient CTA-footer en cards de features "para dar variedad" satura el ojo. Cards normales van en color plano.
La fuente de verdad. Todos los valores viven en apps/web/src/app/globals.css. Nunca hardcodees hex — usá siempre las variables. Excepción: PDFs (que usan RGB normalizado) y assets estáticos.
/* ═══════════════════════════════════════════════════ Psicometrikas · Sistema de Color · v1.0 Fuente: brand-book.md sección 2 ═══════════════════════════════════════════════════ */ :root { /* ── Primarios ── */ --primary: #6366f1; /* brand */ --primary-dark: #4f46e5; /* hover, énfasis */ --primary-light: #eef2ff; /* soft bg */ /* ── Acento ── */ --accent: #10b981; /* emerald · éxito */ --accent-dark: #059669; --accent-light: #ecfdf5; /* ── Semánticos ── */ --danger: #ef4444; --danger-light: #fef2f2; --warning: #f59e0b; --warning-light: #fffbeb; --info: #3b82f6; --info-light: #eff6ff; /* ── Neutrales ── */ --text: #111827; --text-secondary: #4b5563; --muted: #9ca3af; --line: #e6e9ef; --line-light: #f0f2f5; --bg: #f8f9fb; --card: #ffffff; --card-hover: #fafbfc; /* ── Gradientes ── */ --grad-hero: linear-gradient(180deg, #f8f9fb 0%, white 50%, #f0f0ff 100%); --grad-text: linear-gradient(135deg, #6366f1, #818cf8, #a78bfa); --grad-footer: linear-gradient(135deg, #312e81, #6366f1, #7c3aed); --grad-pain: linear-gradient(180deg, #fff 0%, #fef2f2 100%); } /* ── Tags categóricos (7 pares) ── */ .tag-purple { background:#eef2ff; color:#4338ca; } .tag-teal { background:#ecfdf5; color:#047857; } .tag-orange { background:#fff7ed; color:#c2410c; } .tag-pink { background:#fdf2f8; color:#be185d; } .tag-blue { background:#eff6ff; color:#1d4ed8; } .tag-amber { background:#fffbeb; color:#b45309; } .tag-gray { background:#f3f4f6; color:#4b5563; } /* ── Uso típico ── */ .pk-btn-primary { background: var(--primary-dark); color: white; } .pk-body { color: var(--text); } .pk-text-sec { color: var(--text-secondary); } .pk-hint { color: var(--muted); }
Cuando alguien pida un color nuevo ("necesito un teal más claro para tal cosa"), o se agrega al brand-book.md oficial y se sincroniza acá, o se resuelve con los que ya existen. No hay colores "flotando" en components — todo pasa por CSS variables.
Este brandbook fue producido por KOJ Consulting a partir del brand-book.md oficial de Psicometrikas. Trabajamos con equipos que quieren interfaces que se sienten pensadas, no adivinadas.