Guía de Estilos & Identidad Corporativa
Especificaciones técnicas de diseño, tipografía, interacción y tokens visuales de Jabatec.com. Diseñada para equilibrar el estilo global y servir de referencia para Antigravity 2.0.
Tokens de Color
Nuestros colores primarios, superficies neutrales de fondo y acentos de tecnologías.
Colores Principales & Superficies (Estilo Stitch)
Action Blue
var(--action-blue) | #0066cc
Color interactivo principal. Usado en enlaces, botones primarios (CTAs) y hover.
Focus Blue
var(--focus-blue) | #0071e3
Anillos de accesibilidad y foco activo en campos de formulario.
Sky Link Blue
var(--sky-blue) | #2997ff
Enlaces y elementos interactivos exclusivamente sobre fondos oscuros.
Near-Black Ink
var(--text-ink) | #1d1d1f
Tinta principal para titulares y cuerpos de texto sobre fondos claros.
Parchment
var(--bg-parchment) | #f5f5f7
Gris claro de fondo alternativo para dar ritmo a las secciones.
Pearl
var(--bg-pearl) | #fafafc
Fondo plano para botones secundarios o ghost buttons.
Near-Black Tile
var(--bg-dark-tile) | #272729
Fondo principal para secciones o placas de diseño oscuras.
Primary Navy
var(--primary) | #1a1f36
Azul noche de la marca heredado y usado en bloques tradicionales.
Colores del Ecosistema & Tecnologías
#f47023
#0073aa
#7f54b3
#0077b6
#2e7d32
Escala Tipográfica
Cargamos la tipografía Inter. Se aplica letreado negativo (Apple-tight) a partir de 19px.
font-size: 32px (48px Hero) | weight: 600 | letter-spacing: -0.025em | line-height: 1.07
Desarrollo Web Premium & Agentes IA.
font-size: 24px | weight: 600 | letter-spacing: -0.025em | line-height: 1.10
Garantizamos una Carga Instantánea
font-size: 19px | weight: 600 | letter-spacing: -0.015em | line-height: 1.20
Ecosistema de Agentes Virtuales
font-size: 14px | weight: 400 | line-height: 1.47
Creamos arquitecturas limpias y seguras en Joomla 5 y WordPress que resuelven los dolores de tu negocio. Maximizamos el rendimiento de tu embudo de ventas digital mediante una optimización minuciosa de Core Web Vitals y una integración quirúrgica de automatizaciones inteligentes con IA.
font-size: 12px | weight: 400 | line-height: 1.40
* El Kit Digital está sujeto a la aprobación de la entidad oficial Red.es. Los plazos de implementación pueden variar según la convocatoria de la subvención y los requisitos específicos del beneficiario.
Botones & Acciones
Estilos de botonera estandarizados con radios de borde fluidos y transiciones.
Primary CTA
Fondo Action Blue, radio de píldora (9999px).
Secondary CTA
Fondo Pearl, borde suave, radio de píldora.
Outline / Ghost
Borde Action Blue, fondo transparente.
Text Link
Enlace de texto clásico con transición de hover.
Tarjetas & Bento Grid
Estructuras para presentar servicios. Las tarjetas se elevan y ganan borde en hover.
Ecosistema Integrado
Esta es una tarjeta interactiva (con la clase .card-enlace). Al colocar el cursor encima se eleva sutilmente y muestra un borde activo azul, reaccionando además con un pequeño encogimiento al pulsar (active) para simular respuesta física.
Bento Layout (Mosaico Asimétrico)
Fajines de Ancho Completo (Full-Width Strips)
Técnica de ruptura de contenedor de Cassiopeia para crear secciones que se extienden al 100% de la pantalla con fondo blanco, manteniendo el contenido interno perfectamente alineado con la cuadrícula de 1200px.
<!-- Implementación en HTML usando la clase reutilizable -->
<section class="py-5 fajin">
<div class="container">
<!-- El fondo es blanco 100% y el contenido está en la rejilla de 1200px -->
</div>
</section>
/* Implementación CSS en custom26.css */
.fajin {
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
padding-left: calc(50vw - 50%) !important;
padding-right: calc(50vw - 50%) !important;
background-color: #ffffff !important;
}Formularios
Campos redondeados con anillos de foco azul de accesibilidad.
Material Symbols & Lucide
Iconografía premium, escalable y adaptada a la retícula tipográfica.