Tarjeta de servicio
Ícono con halo, título, descripción y un resultado en color de acento al pie.
Resultado destacado al final
Sistema de diseño
UI Kit de XBIT
Todo lo que un desarrollador necesita para construir páginas nuevas sin romper la identidad. Los valores viven en assets/styles.css como variables CSS: cambia el token y cambia toda la web.
Marca
El logotipo es puramente tipográfico: XBIT en Montserrat Light con interletrado amplio, y debajo SOLUCIONES DIGITALES justificado al ancho exacto del nombre. Sin símbolo. El degradado azul → verde azulado es el segundo elemento de identidad.
Provisional
Es una reconstrucción tipográfica a partir de una imagen del logotipo, no el archivo original. Reemplázala en cuanto tengas el SVG de marca.
Sobre fondo claro
XBIT
XBIT
Sobre el degradado de marca
XBIT
Color
Un solo acento saturado y neutros con sesgo azul. El color semántico está reservado para estados y nunca se usa como decoración. Los valores cambian según el tema; en el código siempre se referencia el token, nunca el hexadecimal.
Origen
El azul #0963AD y la tipografía Montserrat salen del dossier corporativo de XBIT. Son la identidad real de la empresa, no una propuesta.
Acento
Superficies · tema oscuro
Superficies · tema claro
Rampa para datos
Cuatro pasos del azul al cian. Se usa en gráficos y mockups para que las series se distingan sin salir de la identidad. Nunca para texto ni para estados.
Bandas y profundidad
Las secciones alternan --bg y --bg-2 para dar ritmo sin líneas duras. Las tarjetas usan --surface-raise, un degradado casi imperceptible, y sombras teñidas de azul en lugar de gris. Las zonas oscuras llevan un grano finísimo que les quita el aspecto de negro plano.
Semánticos
Tipografía
Montserrat es la tipografía de marca de XBIT, tomada del dossier corporativo: geométrica, abierta y con buen peso en tamaños grandes. Se usa en titulares, interfaz y texto corrido, apoyándose en el peso y el tamaño para marcar jerarquía. JetBrains Mono queda reservada para etiquetas técnicas, cifras, tags y la consola.
Software hecho a tu medida
Cuatro líneas de trabajo
IA aplicada y automatización
Construimos sistemas, apps e integraciones sobre tu proceso real, y les sumamos inteligencia artificial donde de verdad ahorra tiempo. El texto corrido no pasa de 68 caracteres por línea: más allá de eso el ojo pierde el renglón al volver.
Por qué nos llaman
78% · 1,482 · 2 sem
Espaciado y radios
Escala base de 4 px. Las secciones respiran con --pad-sec, que va de 4rem en móvil a 7.5rem en escritorio. Los radios se mantienen bajos: el sistema es anguloso a propósito.
Escala de espacio
4px · 0.25rem
8px · 0.5rem
16px · 1rem — separación dentro de tarjetas
24px · 1.5rem — padding de tarjeta
48px · 3rem — bloque a bloque
112px · 7rem — sección a sección
Radios
6px
12px
18px
100px
6px botones y campos · 12px tarjetas · 18px la consola · 100px solo píldoras y filtros.
Botones
Un solo botón sólido por pantalla visible: el de agendar. Todo lo demás es fantasma o silencioso. El halo aparece solo al pasar el cursor, nunca en reposo.
Formularios
Etiqueta siempre visible arriba del campo, nunca dentro. El marcador de posición muestra un ejemplo real, no repite la etiqueta. Los mensajes de error dicen qué pasó y cómo arreglarlo.
Campos
Estados y mensajes
Revisa el correo: parece que le falta algo.
Listo. Te escribimos hoy mismo con dos horarios para elegir.
Nota auxiliar: máximo cuatro campos a propósito.
Tarjetas
Borde de 1 px, sin sombra en reposo. La variante .lift agrega elevación y halo al pasar el cursor, y se usa solo cuando la tarjeta es clicable o representa algo navegable.
Tarjeta simple
Sin elevación al pasar el cursor. Para contenido que se lee, no se pulsa.
- Punto incluido
- Otro punto incluido
Mockups de interfaz
Interfaces representativas dibujadas en HTML, no imágenes: siempre nítidas, ligeras y adaptadas al tema. Marco 16:10, sustituible por capturas reales de 1280 × 800 px.
94%CUMPLIMIENTO1,200USUARIOS18CURSOS
documento 01OK
documento 02OK
documento 03REVISAR
documento 04OK
Íconos
Trazo de 1.5 px, esquinas vivas, caja de 24 px, sin relleno. Dentro de una caja de 2.6 rem con borde y halo interior cuando encabezan una tarjeta. Nunca se usan emojis como íconos.
Datos y tablas
Toda cifra usa tabular-nums para que las columnas no bailen. Las tablas anchas se desplazan dentro de su contenedor: el cuerpo de la página nunca se mueve en horizontal.
| Criterio | Opción A | Opción XBIT |
|---|---|---|
| Alcance | Descripción neutra de la alternativa. | Nuestra propuesta, resaltada. |
| Propiedad | Descripción neutra de la alternativa. | Nuestra propuesta, resaltada. |
Banda de indicadores
Movimiento
Todo el espectáculo vive en el hero: la consola que se escribe sola, el halo azul y la línea de escaneo. Fuera de ahí solo hay revelados suaves y microinteracciones. Nada se mueve en bucle debajo del primer scroll.
Duraciones
Revelado 500 ms · botones 120 a 200 ms · tarjetas 220 ms. Curva cubic-bezier(.22,1,.36,1) para entradas.
Escalonado
Elementos hermanos entran con 60 ms de diferencia usando las clases .d1, .d2 y .d3. Nunca más de cuatro pasos.
Sin bucles fuera del hero
Nada que se repita indefinidamente mientras se lee. Distrae y delata una plantilla.
Movimiento reducido
Con prefers-reduced-motion se desactivan animaciones y transiciones, y la consola aparece completa de una vez.
Reglas de uso
Lo que mantiene el sistema coherente cuando el sitio crezca a páginas internas.
Sí
Referenciar siempre tokens (var(--accent)), nunca hexadecimales sueltos en los componentes.
No
Definir un color solo dentro de un bloque de tema. Si el token no existe en los tres estados, la página se rompe en uno de ellos.
Sí
Envolver en .zone-dark cualquier bloque que deba verse oscuro siempre, como el hero, el CTA final y el pie.
No
Más de un botón sólido por pantalla visible. Si todo grita, nada destaca.
Sí
Cifras concretas en los resultados: «78% menos digitación» en lugar de «mayor eficiencia».
No
Fotos de banco de imágenes, degradados morados, hexágonos ni íconos de cerebro con circuitos.
Sí
Contraste mínimo AA de 4.5:1 en texto y foco de teclado siempre visible.
No
Carruseles automáticos ni texto sobre imagen sin capa de contraste.