Tipografía Inter en toda la plataforma, spacing múltiplo de 4, radios controlados, componentes con specs claros y motion sutil. Todo lo que no es color vive acá.
Inter es la fuente de UI. Se carga desde Google Fonts optimizado por Next.js. Stack completo: "Inter", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif
Body a menos de 14px web está prohibido — sacrifica legibilidad por estilo. Uppercase con letter-spacing solo para tags/labels, nunca para body. Números en tablas: font-variant-numeric: tabular-nums cuando sea posible (alineación mejor).
Los reportes PDF usan Helvetica built-in — sin embed. El builder de PDFs (700+ líneas hand-rolled en apps/web/src/lib/pdf/builder.ts) no soporta fonts custom. Si querés Inter en PDF, requiere refactor grande.
El builder no las soporta. Toda decisión tipográfica en PDF se resuelve con las tres variantes de Helvetica + variaciones de tamaño (8/9/10/11/14/18/24/32pt) y color. Si un reporte necesita «algo más», primero pensar en jerarquía y contraste antes de sugerir un embed de font.
Todo el spacing sale de múltiplos de 4. Todos los radios salen de una escala de cuatro valores. Cualquier valor fuera de estas escalas es una excepción documentada.
Cada radio tiene su rol. Si necesitás uno intermedio, revisá si el componente es realmente único.
La app es principalmente flat con acentos. Sombras solo para separar cards del fondo (sm), hover states (md), modals/popovers (lg), y drag handles (xl). Nunca combinadas ni acumuladas.
Los componentes que aparecen en cada pantalla del producto. Cada uno con sus specs de padding, radius, color y estados. Si algún componente nuevo necesita salirse, primero se documenta en el brand-book.md oficial.
CTA principal. --primary-dark filled, texto blanco, radius 12px, padding 12/24. Hover: transform Y -1px + sombra sm.
Acción secundaria. --primary-light bg, --primary-dark text. Mismo padding y radius que primary.
Transparent bg, --line border, --text color. Alternativa neutra cuando no querés jerarquía de acción.
--danger bg, blanco. Solo acciones destructivas (borrar plaza, revocar acceso). Nunca decorativo.
Radius 999px. Reservado para CTAs de landing (hero, footer), no producto.
Cada estado usa su par light-bg + dark-text. Nunca solid semantic sin justificación.
Para taxonomías (categorías de tests, competencias). Cada tag usa su par oficial. Nunca inventar.
Border --line, radius 8px. Focus: border --primary + halo 3px con --primary a 12% alpha.
White bg, 1px --line border, radius 12px. Padding 16-32px según densidad. Hover: translateY -1px + sh-md.
Mide dominancia, influencia, estabilidad y cumplimiento. 28 preguntas.
Librería estándar. 16-20px inline con texto, 24-28px en cards. Color: heredar currentColor.
Emoji vive en landing como iconografía categórica de tests (🧠 cognitivo, 💡 personalidad). Íconos Lucide viven en producto, reportes y emails. Si en un mismo componente aparecen los dos, hay que elegir. La regla: si es marketing o categorización de tests → emoji. Si es UI de producto → Lucide.
Transiciones cortas (150-300ms), easing suave (ease-out), atadas a acción del usuario. Nada de decoración animada permanente. Si el usuario nota la animación, es demasiado.
Elevación de 1-2px con transform. Signal claro de "clickeable".
transform: translateY(-1px);
Loop de 2.5s. Solo cuando no hay otra jerarquía compitiendo.
@keyframes pulse · 2.5s
Fade + translate 8px para state change o rotativos.
opacity + translateY(8px)
Timing entre 150ms (feedback rápido) y 300ms (transition de state). Ease-out siempre. Sin bounces, sin springs, sin scroll-driven decorativos. El motion confirma acciones — no llama atención.
Red neuronal abstracta + 3 barras verticales, en trazo blanco sobre indigo redondeado. Representa el cruce entre psicometría (cerebro) y datos (barras).
Si actualizás el SVG, regenerá el PNG antes de mergear. El builder PDF depende del PNG. Nunca dejar uno actualizado sin el otro. Nunca deformar el logo, cambiar sus colores, rotarlo, agregar sombras/glow o aplicar filtros.
Espacio libre mínimo alrededor del logo: 25% del ancho del logo en los 4 lados. En lockup con "Psicometrikas": weight 700, 18-20px web, color --text sobre fondos claros, separación logo↔texto 12px. Sobre fondos oscuros: no hay versión invertida oficial aún — pendiente.
Tres composiciones típicas donde todo lo anterior se junta. Cada mockup usa exclusivamente tokens del sistema.
Dominancia, influencia, estabilidad, cumplimiento.
Inteligencia emocional, percepción y manejo.
30 subfactores de personalidad profunda.
Todo lo de arriba usa exclusivamente tokens documentados. Tipografía Inter en sus escalas correctas, colores del sistema oficial, radius, spacing, badges semánticos y tags categóricos. Cualquier pantalla nueva del producto debe reconocerse como del mismo linaje en 2 segundos.
Este brandbook fue producido por KOJ Consulting a partir del brand-book.md oficial de Psicometrikas.