Colores

Nuestra paleta es intencionalmente restringida. Usamos neutros como base, con color reservado para significado y énfasis.

Fondo: #FAFAFA (blanco cálido) para páginas, #FFFFFF para tarjetas y superficies elevadas.
Texto: #0A0A0A para texto primario, #71717A para secundario, #A1A1AA para deshabilitado.
Acento: Azul para ingeniería, Violeta para diseño, Naranja para marketing, Esmeralda para éxito.
Semántico: Verde para positivo, Amarillo para advertencia, Rojo para error; usados con moderación.
Visualización de datos: Escala de intensidad azul para valor del visitante, colores de fuentes de tráfico para gráficos de atribución.

Tipografía

Dos tipografías cubren todas nuestras necesidades. No incorporamos nuevas fuentes sin una justificación sólida.

Inter: Nuestra fuente de trabajo. Cuerpo de texto, elementos de interfaz, botones, etiquetas. Pesos 400-700.
Instrument Serif: Para dramatismo. Títulos principales, números decorativos, citas destacadas. Usada con moderación.

La escala tipográfica sigue una proporción modular: 12, 14, 16, 18, 20, 24, 30, 36, 48, 60, 72px. Las alturas de línea son 1.5 para cuerpo, 1.2 para encabezados.

Espaciado

Usamos una cuadrícula base de 8px. Valores de espaciado comunes: 8, 16, 24, 32, 48, 64, 96. La consistencia en el espaciado crea ritmo visual.

El ritmo vertical importa más que el horizontal. Las secciones tienen relleno generoso (64-96px). Los componentes tienen espaciado interno más ajustado (16-24px).

Componentes

Nuestra librería de componentes es mínima por diseño. Tenemos botones, tarjetas, entradas y algunos componentes especializados. Cuando necesite algo nuevo, primero pregunte si un componente existente puede funcionar.

Botones: Primario (azul sólido), Secundario (contorneado), Fantasma (solo texto). Tres tamaños: sm, md, lg.
Tarjetas: Fondo blanco, sombra sutil, esquinas redondeadas (8px). Los estados al pasar el cursor elevan ligeramente.
Entradas: Bordes limpios, relleno generoso, estados de enfoque claros con anillo azul.
Modales: Centrados con desenfoque de fondo. Usados con moderación para confirmaciones y tareas enfocadas.

Movimiento

Las animaciones sirven a una función, no a la decoración:

Duración: 150ms para microinteracciones, 300ms para transiciones, 500ms para cambios de página.
Aceleración: ease-out para entradas, ease-in para salidas, ease-in-out para bucles.
Movimiento reducido: Todas las animaciones respetan las preferencias del usuario a través de prefers-reduced-motion.

Iconos

Usamos Lucide Icons exclusivamente. Son consistentes, bien diseñados y tienen una excelente cobertura. El tamaño predeterminado es 20px, grosor de trazo 1.5.