Diseño que funciona,
no que decora.
Bienvenido a la referencia técnica de Eleva. Este documento establece las reglas físicas y visuales para crear interfaces consistentes, accesibles y escalables.
Claridad Radical
Elimina el ruido. Si un borde, un color de fondo o un icono no aporta información crítica, elimínalo. El contenido es el rey; la UI es solo el soporte.
Feedback Inmediato
Cada interacción tiene una reacción. Usamos estados de :active y :focus claros. El sistema debe sentirse vivo y responder físicamente al toque.
Consistencia Cross-Platform
Aunque usamos una base de diseño unificada, respetamos las convenciones de cada plataforma. En Web (PWA) no existen los botones de "atrás" físicos, por lo que la navegación debe ser explícita en la UI.
Jerarquía de Capas (Z-Index)
Layout & Espacio
El ritmo vertical y horizontal define la calidad profesional. Todo se basa en múltiplos de 4pt.
Reglas Críticas para WebApps (PWA)
Prevención de Zoom en iOS
El error #1 en diseño móvil web es que la pantalla haga zoom al tocar un input. Esto ocurre porque la fuente es menor a 16px.
font-size: 17px; (o mínimo 16px) en todos los inputs de texto. Además, usa viewport-fit=cover en el meta tag.
Safe Areas (La Isla Dinámica)
El layout debe respetar la "Isla Dinámica" y la barra inferior del iPhone.
padding-bottom: env(safe-area-inset-bottom);
padding-top: env(safe-area-inset-top);
El mito del "Fold"
Los usuarios hacen scroll. No intentes embutir toda la información en los primeros 600px. Dale espacio al contenido. Lo que importa es que el contenido superior invite a hacer scroll (cortando elementos a la mitad para sugerir continuidad).
El Grid de Columnas
Escritorio (Desktop)
Usamos un contenedor centrado con un ancho máximo de 1000px a 1200px. El layout interior puede usar 12 columnas o bloques flexibles.
gap: 24px;
Móvil (Mobile)
Diseño de una sola columna. El margen lateral (padding) es sagrado: nunca menos de 20px en móviles modernos.
padding: 0 20px;
Tabla de Referencia de Espaciado
| Token | Valor (px) | Uso Común |
|---|---|---|
--space-xs | 4px | Espacio entre icono y texto. |
--space-s | 8px | Padding interno de botones o badges. |
--space-m | 16px | Separación estándar entre elementos de lista. |
--space-l | 24px | Separación entre tarjetas o secciones internas. |
--space-xl | 40px+ | Separación entre grandes secciones de contenido. |
Tipografía y Rendimiento
La elección de la tipografía afecta directamente a la velocidad de carga. Usamos "System Stacks" para lograr 0ms de bloqueo de renderizado.
max-width del párrafo, no del contenedor.
Estrategia Multi-OS (System Fonts)
Apple (iOS/macOS)
San Francisco
Limpia, neutra y altamente legible. Soporta tracking automático.
Android
Roboto
Más geométrica y alta. Funciona excelente en tarjetas Material Design.
Windows
Segoe UI
Humanista y clara. Optimizada para renderizado ClearType en monitores.
Escala de Texto
44px / Bold / -1.2px Tracking
26px / Semibold / -0.5px Tracking
El cuerpo de texto principal es de 17px. Es el estándar de oro para legibilidad en móviles y escritorio. Nunca uses gris puro (#000000) para texto largo, usa #1D1D1F para reducir contraste excesivo.
17px / Regular / 1.5 Line-Height
font-variant-numeric: tabular-nums;
13px / Medium / +0.5px Tracking
Color Semántico
No elijas colores porque "se ven bien". Elígelos por su función: Acción, Estado o Estructura.
Color de Marca (Action)
Úsalo para elementos interactivos (botones, enlaces, estados activos). Nunca para fondos grandes (fatiga visual).
Estados (Feedback)
Paleta Extendida de Acción
Para notas, tips o badges de "Nuevo". Menos agresivo que el azul.
Para onboarding o elementos decorativos que requieren "frescura".
Para estados deshabilitados o información secundaria.
Regla 60-30-10
Contraste y Texto
Diseñando el Vacío (Empty States)
No dejes al usuario con una pantalla blanca cuando no hay datos. Educa y guía.
No hay archivos aún
Sube tu primer documento para comenzar a colaborar.
Componentes UI
Elementos interactivos listos para usar. Observa los estados Hover y Active.
1. Botones
Primary: Solo uno por pantalla (la acción principal).
Secondary: Acciones alternativas (Cancelar, Volver).
Touch Target: Altura mínima de 44px siempre.
2. Campos de Texto (Inputs)
font-size: 17px en móviles. Si usas menos de 16px, iOS hará zoom al hacer tap, rompiendo el layout.
Estados del Input
3. UI Mockups Avanzados
Native Alert (Prioridad)
Regla: Usa alertas nativas del sistema siempre que sea posible para confirmaciones simples. Son familiares y no requieren diseño extra.
Widget Dashboard
Estados de Carga (Loading)
Skeleton Screens
Usa esqueletos para cargas iniciales de contenido. Reduce la percepción de espera.
Spinners / Actividad
Usa spinners solo para acciones cortas (ej. Guardar cambios).
Estructura: Listas vs Tarjetas
Listas Agrupadas
Usa listas (Inset Grouped) cuando tengas muchos ítems homogéneos (ej. Configuración, Contactos). Es más eficiente en espacio vertical.
Tarjetas (Cards)
Usa tarjetas cuando el contenido sea heterogéneo (ej. Feed de noticias, Dashboard). Permite mezclar imágenes, texto y botones.
Patrones y Adaptabilidad
El diseño debe adaptarse al dispositivo. Una WebApp debe sentirse como una aplicación nativa en Windows y Android, no solo en iOS.
Estrategia de Navegación
En Móvil, la navegación principal debe estar abajo (Thumb Zone). En Escritorio, usa el lateral o top bar. Nunca uses menú hamburguesa para opciones principales si caben en una Tab Bar (máx 5 elementos).
Adaptabilidad Plataforma
Experiencia Móvil (Universal)
Parámetros Móviles
Zonas de Alcance: Los elementos críticos deben estar en la mitad inferior. La esquina superior izquierda es la zona más difícil de alcanzar (evita poner acciones primarias ahí).
Universal Desktop WebApp
Contenido Fluido
Parámetros de Escritorio
Do's & Don'ts
Ejemplos visuales de buenas prácticas vs. errores comunes.
El texto largo siempre a la izquierda para facilitar la lectura.
Título Correcto
Este texto es fácil de escanear.
El texto centrado es difícil de leer en párrafos de más de 3 líneas.
Título Incorrecto
Este texto es difícil de leer.
En pantallas pequeñas, los botones primarios deben ser fáciles de tocar.
Botones estrechos son difíciles de acertar con el pulgar.
Usa font-weight y escala para la jerarquía, no solo colores diferentes.
No uses 5 colores diferentes en una tarjeta para intentar diferenciar datos.
Acompaña iconos críticos con texto. Evita ambigüedad.
No asumas que el usuario sabe qué significa un icono abstracto.
Mantén el label fuera del input. El placeholder desaparece al escribir.
Si usas el placeholder como etiqueta única, el usuario olvida qué escribe.
Área clickable mínima de 44px, incluso si el icono es pequeño.
No limites el click solo a los pixeles visibles del icono.
Usa un degradado negro (scrim) detrás del texto sobre imágenes.
El texto blanco sobre fotos claras es invisible.
Muestra la estructura del contenido mientras carga.
No dejes al usuario adivinando si la app se congeló.
Jerarquiza: 1 botón relleno (Primario), los demás outline o ghost.
Si todo es importante, nada es importante.
