Sistema de Diseño Clean
Documentación completa del sistema de diseño profesional de AIXA AI. Componentes, tipografía, colores y patrones basados en Helvetica Neue con modo claro y oscuro perfectamente integrados.
Paleta de Colores
Colores de Marca
Púrpura Principal
#9D4EDD
rgb(157, 78, 221)
var(--aixa-purple)
Verde Secundario
#06FFA5
rgb(6, 255, 165)
var(--aixa-green)
Colores Semánticos
Fondos
Primario
var(--color-bg-primary)
Secundario
var(--color-bg-secondary)
Terciario
var(--color-bg-tertiary)
Textos
Primario
var(--color-text-primary)
Secundario
var(--color-text-secondary)
Terciario
var(--color-text-tertiary)
Gradientes
linear-gradient(135deg, #9D4EDD, #06FFA5)
Gradiente principal de marca
Sistema Tipográfico
Familia Tipográfica
Helvetica Neue
La tipografía principal de AIXA AI es Helvetica Neue, una fuente suiza neogrotesca que transmite profesionalidad, claridad y modernidad. Perfecta para contenido B2B y lectura extensa.
Escala Tipográfica
Display XL
Clase: .text-display-xl
Tamaño: clamp(3rem, 8vw, 6rem)
Peso: 300 - Light
• Títulos hero principales
• Landing pages
• Máximo impacto visual
Display Large
Clase: .text-display-lg
Tamaño: clamp(2rem, 6vw, 4rem)
Peso: 300 - Light
• Títulos de página
• Headers importantes
• Secciones destacadas
Heading XL
Clase: .text-heading-xl
Tamaño: clamp(1.5rem, 4vw, 2.5rem)
Peso: 500 - Medium
• Títulos de sección
• H1 de contenido
• Encabezados principales
Heading Large
Clase: .text-heading-lg
Tamaño: clamp(1.25rem, 3vw, 2rem)
Peso: 500 - Medium
• H2 de contenido
• Subtítulos importantes
• Títulos de cards
Heading Medium
Clase: .text-heading-md
Tamaño: clamp(1.125rem, 2.5vw, 1.5rem)
Peso: 600 - Semibold
• H3 de contenido
• Subsecciones
• Elementos destacados
Body XL
Clase: .text-body-xl
Tamaño: 1.25rem (20px)
Peso: 400 - Normal
• Introducciones
• Texto destacado
• Leads de artículos
Body Large
Clase: .text-body-lg
Tamaño: 1.125rem (18px)
Peso: 400 - Normal
• Párrafos principales
• Contenido de blog
• Lectura extensa
Body
Clase: .text-body
Tamaño: 1rem (16px)
Peso: 400 - Normal
• Texto general
• Interfaces
• Descripciones
Small
Clase: .text-small
Tamaño: 0.875rem (14px)
Peso: 400 - Normal
• Etiquetas
• Metadatos
• Texto auxiliar
Extra Small
Clase: .text-xs
Tamaño: 0.75rem (12px)
Peso: 400 - Normal
• Notas al pie
• Copyright
• Información legal
Pesos Tipográficos
Light
300
Títulos display
Normal
400
Texto general
Medium
500
Encabezados
Semibold
600
Destacados
Tipografía en Acción
Este es un título principal
Subtítulo de sección importante
Este es un párrafo de introducción que utiliza el tamaño body-xl para destacar contenido importante y crear jerarquía visual clara.
Encabezado de subsección
Párrafo estándar con el tamaño base que es perfecto para lectura continua. La altura de línea está optimizada para facilitar la lectura en pantallas de diferentes tamaños.
Texto auxiliar o metainformación que proporciona contexto adicional sin distraer del contenido principal.
Sistema de Botones
Botones Primarios
Uso: Acciones principales, CTAs, confirmaciones
.btn-primary-clean
Botones Secundarios
Uso: Acciones secundarias, cancelar, opciones
.btn-secondary-clean
Botones Accent
Uso: CTAs especiales, acciones destacadas
.btn-accent-clean
Tamaños de Botones
Los tamaños se ajustan automáticamente en dispositivos móviles
Botones Interactivos
Con Icono Izquierdo
Con Icono Derecho
Solo Icono
Botón Carga
Estados de Botones
Normal
Hover
Focus
Disabled
Guía de Implementación
HTML/Astro
<button class="btn-primary-clean"> Botón Primario </button> <button class="btn-secondary-clean"> Botón Secundario </button> <button class="btn-accent-clean"> Botón Accent </button>
React/JSX
<button className="btn-primary-clean"> Botón Primario </button> <button className="btn-secondary-clean"> Botón Secundario </button> <button className="btn-accent-clean"> Botón Accent </button>
Mejores Prácticas
Usar botones primarios para la acción principal de la página
Máximo un botón accent por sección
Usar estados disabled para botones no disponibles
Evitar múltiples botones primarios en la misma vista
No usar botones accent para acciones destructivas
Evitar textos muy largos en botones
Sistema de Cards
Variantes Básicas
Card Default
Contenido de ejemplo para mostrar cómo se ve el texto dentro de una card estándar.
Card Subtle
Perfect para contenido secundario o elementos que necesitan menos prominencia visual.
Card Interactiva
Pasa el cursor sobre esta card para ver los efectos de hover y elevación.
Clases CSS
Card Clean Default
.card-clean
Card básica con sombra sutil, fondo primario y bordes suaves. Perfecta para contenido general.
Card Subtle
.card-subtle
Card con fondo secundario, ideal para contenido que necesita diferenciarse sutilmente.
Card Interactiva
.card-clean interactive-clean hover-lift
Card con efectos hover, elevación y transiciones suaves.
Cards Especiales
Card con Gradiente Border
Premium Card
Card especial con borde gradiente para elementos muy destacados.
Card con Icono
Con Icono
Card que incluye un icono destacado para categorización visual.
Stats Card
Satisfacción
Card optimizada para mostrar estadísticas importantes con máximo impacto visual.
Card con Badge
Con Badge
Card con badge flotante para indicar estado o categoría especial.
Layouts Avanzados
Card con Header y Footer
Card Header
Contenido principal de la card con estructura clara y separación visual.
Card Horizontal
Layout Horizontal
Card con distribución horizontal, ideal para listas de elementos con imagen o icono.
Estados Interactivos
Normal
Estado Normal
Card en estado base sin interacciones
Hover
Estado Hover
Card con efecto de elevación
Interactive
Interactive
Card con múltiples efectos
Guía de Implementación
HTML/Astro
<!-- Card básica --> <div class="card-clean"> <h3>Título</h3> <p>Contenido de la card</p> </div> <!-- Card interactiva --> <div class="card-clean interactive-clean hover-lift"> <h3>Card Interactiva</h3> <p>Con efectos hover</p> </div>
React/JSX
// Card básica <div className="card-clean"> <h3>Título</h3> <p>Contenido de la card</p> </div> // Card interactiva <div className="card-clean interactive-clean hover-lift"> <h3>Card Interactiva</h3> <p>Con efectos hover</p> </div>
Mejores Prácticas
✓ Recomendado
- •Usar card-clean para la mayoría de casos
- •Aplicar hover-lift solo a elementos clicables
- •Mantener consistencia en padding interno
- •Usar card-subtle para jerarquía visual
✗ Evitar
- •Anidar cards dentro de otras cards
- •Usar demasiados efectos hover juntos
- •Cards muy anchas sin contenido suficiente
- •Mezclar estilos de cards diferentes
Elementos de Formulario
Formulario Completo
Estados de Input
Mensajes de Validación
Campo válido
Este campo es requerido
Verifica el formato
Componentes de Formulario
Radio Buttons
Checkboxes
Toggle Switch
Guía de Implementación
CSS Classes
/* Input base */
.form-input {
@apply w-full px-4 py-3 bg-clean-secondary
border border-clean-medium rounded-lg
transition-colors text-clean-primary;
}
/* Focus state */
.form-input:focus {
@apply outline-none ring-2 ring-purple
ring-opacity-20 border-purple;
}
/* Error state */
.form-input.error {
@apply border-red-300 bg-red-50;
}Estructura HTML
<div class="form-field">
<label class="form-label">
Campo requerido *
</label>
<input
type="text"
class="form-input"
placeholder="Placeholder"
/>
<p class="form-error">
Mensaje de error
</p>
</div>Mejores Prácticas
✓ Recomendado
- •Usar labels descriptivos y claros
- •Proporcionar feedback inmediato en validación
- •Indicar campos requeridos con asterisco (*)
- •Usar placeholders como ayuda adicional
- •Agrupar campos relacionados lógicamente
✗ Evitar
- •Depender solo de placeholders sin labels
- •Formularios muy largos sin división
- •Validación solo al enviar el formulario
- •Mensajes de error genéricos o confusos
- •Inputs muy pequeños en dispositivos móviles
Sistema de Layout
Contenedores
Container Clean - Max Width: 1200px
Contenedor principal para la mayoría del contenido
.container-clean
Text Container - Max Width: 800px
Contenedor optimizado para lectura de texto
.max-w-4xl
Form Container - Max Width: 600px
Contenedor ideal para formularios
.max-w-2xl
Sistema de Espaciado
Escala de Espaciado
XS
0.5rem
SM
1rem
MD
1.5rem
LG
2rem
XL
3rem
2XL
4rem
3XL
6rem
Espaciado de Secciones
.section-clean
padding: 6rem 0
Espaciado estándar para secciones principales
.section-clean-sm
padding: 3rem 0
Espaciado reducido para subsecciones
.space-y-clean
margin-top: 1.5rem
Espaciado vertical entre elementos hijos
Grids Responsivos
Grid 1 Columna → 2 Columnas → 3 Columnas
Patrón responsivo común para tarjetas y contenido
grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Grid 1 Columna → 2 Columnas
Ideal para contenido de dos columnas
grid grid-cols-1 md:grid-cols-2Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Grid 2 Columnas → 4 Columnas
Para elementos pequeños como iconos o estadísticas
grid grid-cols-2 md:grid-cols-4Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Grid Asimétrico 1fr 2fr
Sidebar + contenido principal
grid grid-cols-1 lg:grid-cols-3Item 1
Item 2
Item 3
Item 4
Utilidades Flexbox
Flex Center
.flex-centerFlex Between
.flex-betweenFlex Col Center
.flex-col-centerBreakpoints Responsivos
| Breakpoint | Tamaño | Dispositivo | Prefijo |
|---|---|---|---|
| Base | 0px+ | Móviles pequeños | sin prefijo |
| SM | 640px+ | Móviles horizontales | sm: |
| MD | 768px+ | Tablets | md: |
| LG | 1024px+ | Laptops | lg: |
| XL | 1280px+ | Desktops | xl: |
| 2XL | 1536px+ | Pantallas grandes | 2xl: |
Patrones de Layout Comunes
Patrón Hero Section
Contenido Dos Columnas
Grid de Cards
Guía de Implementación
Estructura Base
<section class="section-clean bg-clean-primary">
<div class="container-clean">
<h2 class="text-heading-xl mb-8">
Título de Sección
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Contenido -->
</div>
</div>
</section>Mobile First
/* Mobile first approach */
.element {
/* Base: mobile styles */
grid-cols-1
/* Tablet */
md:grid-cols-2
/* Desktop */
lg:grid-cols-3
/* Large screens */
xl:grid-cols-4
}Mejores Prácticas
✓ Recomendado
- •Usar container-clean para contenido principal
- •Aplicar mobile-first en todos los layouts
- •Mantener consistencia en espaciado
- •Usar gaps consistentes en grids
✗ Evitar
- •Hardcodear anchos fijos en píxeles
- •Saltarse breakpoints intermedios
- •Layouts que no funcionan en móvil
- •Mezclar diferentes sistemas de espaciado
Sistema de Iconografía
Tamaños de Iconos
16px (w-4 h-4)
Pequeño
20px (w-5 h-5)
Mediano
24px (w-6 h-6)
Estándar
32px (w-8 h-8)
Grande
48px (w-12 h-12)
Extra Grande
Guía de Uso por Tamaño
Pequeño
Iconos auxiliares, inline con texto
Mediano
Iconos en botones, formularios
Estándar
Iconos principales, navegación
Grande
Iconos destacados, headers
Extra Grande
Iconos hero, elementos decorativos
Iconos Principales
IA/Cerebro
AI
Workflow
Process
Automatización
Technology
Configuración
System
Analytics
Data
Completado
Status
Iconos de Interfaz
Menú
Cerrar
Buscar
Usuario
Información
Flecha Derecha
Enlace Externo
Descargar
Colores de Iconos
Púrpura
text-purple
Acciones principales, elementos destacados
Verde
text-green
Estados positivos, confirmaciones
Primario
text-clean-primary
Iconos principales de interfaz
Secundario
text-clean-secondary
Iconos auxiliares, información
Terciario
text-clean-tertiary
Iconos de menor importancia
Iconos en Contexto
Iconos con Texto
Iconos en Botones
Estados y Variaciones
Estado Normal
Icono estándar sin interacciones
Estado Activo
Icono seleccionado o activo
Estado Deshabilitado
Icono no disponible o deshabilitado
Guía de Implementación
Uso con Lucide React
import { Zap, Settings, Check } from 'lucide-react';
// Icono básico
<Zap className="w-6 h-6 text-purple" />
// Icono con texto
<div className="flex items-center gap-2">
<Check className="w-5 h-5 text-green" />
<span>Completado</span>
</div>
// Icono en botón
<button className="btn-primary-clean">
<Settings className="w-5 h-5 mr-2" />
Configurar
</button>SVG Personalizado
<svg
className="w-6 h-6 text-purple"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M13 10V3L4 14h7v7l9-11h-7z"
/>
</svg>Mejores Prácticas
✓ Recomendado
- •Usar iconos de la misma librería para consistencia
- •Aplicar tamaños apropiados según contexto
- •Usar colores semánticos consistentes
- •Proporcionar alt text para iconos informativos
- •Mantener stroke-width consistente (2px estándar)
✗ Evitar
- •Mezclar estilos de iconos diferentes
- •Usar iconos muy pequeños en móvil (<20px)
- •Depender solo de iconos sin texto explicativo
- •Usar demasiados colores en un grupo de iconos
- •Iconos decorativos con texto explicativo redundante
Efectos Visuales
Efectos Interactivos
Texto con Gradiente
Texto Gradiente
Texto con gradiente de marca usando background-clip
.text-gradientPasa el cursor aquí
Hover Lift
Elevación sutil al hacer hover, perfecta para cards interactivas
.hover-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }Efecto de escala
Hover Scale
Escalado suave para elementos interactivos
.hover-scale:hover { transform: scale(1.02); }Interactivo suave
Interactive Clean
Transiciones suaves para elementos interactivos
.interactive-clean { transition: all 0.2s ease; }Efectos de Fondo
Backdrop Blur
Backdrop Blur Effect
Efecto de desenfoque de fondo para elementos flotantes
.backdrop-blur-clean { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }Animaciones
Fade In Up
Fade In Up Animation
Animación de entrada desde abajo con fade
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }Pulse Glow
Efecto de pulsación con glow para elementos destacados
animate-pulse + animate-ping con opacity diferenteEfectos de Botones
Botón con Glow
Efecto de resplandor en hover para botones especiales
Botón Shimmer
Efecto de brillo que se desplaza por el botón
Orbes Decorativos
Orbes de Gradiente
Elementos decorativos para crear profundidad y ambiente visual en fondos de sección.
Contenido sobre orbes decorativos
Implementación
.gradient-orb {
position: absolute;
background: var(--aixa-gradient-subtle);
border-radius: 50%;
filter: blur(100px);
opacity: 0.3;
pointer-events: none;
}Efectos Especiales
Red Neuronal CSS
Fondo animado de red neuronal creado completamente con CSS para compatibilidad y performance.
Red Neuronal Animada
Características
- • Animaciones CSS puras (sin JavaScript)
- • Adaptable a light/dark mode
- • Performance optimizada
- • Completamente personalizable
Uso
<div className="neural-network-css">Estados de Focus
Anillos de Focus Accesibles
Estados de focus visibles y accesibles para navegación por teclado.
Elemento focusable
CSS Focus Ring
.focus-ring:focus-visible {
outline: 2px solid var(--aixa-purple);
outline-offset: 2px;
border-radius: var(--border-radius);
}Guía de Implementación
CSS Personalizado
/* Efectos básicos */
.hover-lift:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.hover-scale:hover {
transform: scale(1.02);
}
.interactive-clean {
transition: all 0.2s ease;
}
.text-gradient {
background: var(--aixa-gradient-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}Uso en HTML
<!-- Texto con gradiente --> <h2 class="text-gradient"> Título destacado </h2> <!-- Card interactiva --> <div class="card-clean hover-lift interactive-clean"> <h3>Card con efectos</h3> <p>Contenido de la card</p> </div> <!-- Botón con efectos --> <button class="btn-primary-clean hover-scale"> Botón interactivo </button>
Consideraciones de Performance
✓ Optimizado
- •Usar transform en lugar de cambiar position
- •Preferir opacity para fade effects
- •will-change: transform para animaciones complejas
- •Usar CSS animations para loops continuos
✗ Evitar
- •Animar width, height o layout properties
- •Demasiadas animaciones simultáneas
- •Efectos que no respetan prefers-reduced-motion
- •Box-shadow muy extensas o múltiples
Resumen de Implementación
Quick Start
Incluye clean-system.css y comienza a usar las clases inmediatamente.
import 'clean-system.css'
Componentes
Sistema completo de componentes reutilizables y consistentes.
Documentación
Guías detalladas, ejemplos y mejores prácticas para cada componente.
Características Principales
Sistema Semántico
Variables CSS que se adaptan automáticamente a light/dark mode
Tipografía Profesional
Basado en Helvetica Neue con escalas fluidas y responsive
Accesibilidad Integrada
Estados de focus, contrast ratios y navegación por teclado
Mobile First
Diseñado primero para móviles y escalado progresivamente
Performance Optimizado
CSS optimizado, bundle mínimo y lazy loading inteligente
Fácil Mantenimiento
Arquitectura modular y componentes desacoplados
Comenzar a Usar
1. Instalar Estilos
// En tu archivo principal CSS
@import '/src/styles/clean-system.css';
// O en tu componente
import '../styles/clean-system.css';
Incluye el archivo CSS principal que contiene todas las variables y clases del sistema.
2. Usar Componentes
<!-- Estructura básica -->
<section class="section-clean bg-clean-primary">
<div class="container-clean">
<h2 class="text-heading-xl text-gradient">
Título
</h2>
<button class="btn-primary-clean">
Acción
</button>
</div>
</section>
Comienza con la estructura básica y utiliza las clases documentadas.
¿Listo para implementar el Sistema Clean?
Comienza a crear interfaces profesionales y consistentes con nuestro sistema de diseño completo.