Familias y jerarquía
Inter es la fuente por defecto del layout. Lexend Deca está cargada y disponible, pero su presencia no establece una segunda jerarquía global. El peso máximo aprobado para UI es 600 (font-semibold). Código y rutas usan monoespaciada.
Espaciado y radios
La escala y los breakpoints mostrados provienen de la configuración Tailwind resuelta. Las primitivas pueden definir medidas propias: los campos compactos utilizan 14 px de radio y el modal global 22/28 px según viewport. Conserva esas medidas reutilizando el componente.
Responsive
En móvil apila formularios, conserva etiquetas y evita truncar información necesaria. Usa la adaptación de CrmEditableTable y mantén las acciones fuera del scroll del cuerpo en modales.
Uso correcto
Reutiliza clases y componentes; reserva variaciones tipográficas para diferencias reales de jerarquía. Los encabezados de documentación pueden ser mayores que los de una pantalla operativa.
Evitar
No uses font-bold, font-extrabold ni font-black. La existencia de pesos mayores en la configuración de Tailwind no los convierte en estilos aprobados.
Títulos principales con texto rotativo
Usa un único h1 para el título principal completo. HeroRotatingMessage
coloca la frase activa en un span textual y entrega la primera frase en el
HTML del servidor. Los saltos de línea son espacios en el texto, presentados
con white-space: pre-line; no fragmentes las palabras en elementos separados
ni sustituyas el contenido por aria-label.
La animación desliza la frase saliente hacia arriba y la entrante desde abajo, sin mantener dos
frases simultáneas ni ocultar el título a tecnologías de asistencia. Usa altura
mínima, permitiendo que el texto crezca al ajustarse al ancho. Con movimiento
reducido, conserva la frase estática. El tamaño pertenece al h1 consumidor.
Ejemplo de composición (solo referencia):
<h1 className="text-[clamp(1.95rem,3.85vw,4.25rem)] font-semibold">
<span className="block">CRM Todo en uno:</span>{' '}
<HeroRotatingMessage
messages={['Gestiona y cierra\nmás ventas', 'Control total\nde tus clientes']}
align="center"
/>
</h1>Etiquetas de navegación
Los nombres de productos en ProductMenu son etiquetas de enlaces, no
secciones del documento. Se renderizan como párrafos con las mismas clases
tipográficas que tenían sus encabezados. Reserva h2 y h3 para el contenido
de la página; cambiar el tamaño visual no exige cambiar el nivel semántico.
<a href="/platform/crm">
<p className="font-lexend text-lg font-semibold">CRM</p>
<p>Ventas y relaciones con clientes.</p>
</a>