Cerrar Sesión |
UX/UI
Usos de los colores
Regla 60 - 30 - 20
Se usa esta regla para mantener la armonía de los colores en los diseños. No aplica para pantallas de onboarding o finales.
60% - #FFFFF
Corresponde al color dominante en el diseño. Se usa como fondo de la pantalla.
30% - #212529
Corresponde al color secundario del diseño. Es el 2do color que se ve mayormente en la pantalla.
10% - #199E8F Y #CA9B24
Corresponde al color de acento. Es el color que menos predomina en el diseño ya que se usa para resaltar secciones específicas de la pantalla como componentes importantes. Se usa en botones, checkboxes, links, entre otros.
Estructura
Aplicación
Color principal
Este color mantiene una coherencia visual que establece una identidad sólida, permitiendo destacarse frente a la competencia y fortalecer la relación con los usuarios.
Se usa en componentes de interacción (desencadenan una acción). Ej: Botones
Se usa en componentes de interacción (desencadenan una acción). Ej: Botones
Variantes del color principal
Aplicación
Paleta de colores
Color secundario
Paleta de colores
Colores semánticos
El uso de distintos colores para el texto establecen una jerarquía visual, guiando al usuario a la información más importante primero.
Paleta de colores
Aplicación
Textos
El uso de distintos colores para el texto establecen una jerarquía visual, guiando al usuario a la información más importante primero.
Paleta de colores
Se utiliza en textos de mayor jerarquía como títulos y subtítulos.
Se utiliza en textos de menor jerarquía como body.
Se utiliza en textos complementarios como en captions y overline text.
Íconos
El uso de distintos colores para el texto establecen una jerarquía visual, guiando al usuario a la información más importante primero.
Paleta de colores
Se utiliza en íconos de mayor jerarquía.
Se utiliza en íconos de menor jerarquía o complementarios.
Disabled
El uso de distintos colores para el texto establecen una jerarquía visual, guiando al usuario a la información más importante primero.
Paleta de colores
Backgrounds
El uso de distintos colores para el texto establecen una jerarquía visual, guiando al usuario a la información más importante primero.
Paleta de colores
Se utiliza como fondo de los cards interactivos.
Se utiliza como fondo de toda la página web.
Outline
Paleta de colores
Se utiliza en los strokes de cards sin relleno y en dividers.
Se utiliza como stroke de las cards que tienen relleno.
Neutral
Estructura para UX/UI
Nos permiten definir la distancia entre elementos para crear bloques visuales de fácil reconocimiento.
Utilizamos espacios en múltiplos de 4 (Del 4, 8, 12, 16, ... 128)
Spacer
Múltiplos de 4
Catálogo
Lucide Icons
Los íconos ayudan a representar gráficamente un área, contenido o acción permitiendo una mejor visibilidad y comprensión al momento que deseamos tener la atención de los usuarios.
Estructura para UX/UI
Es la forma en la que definimos la estructura general de nuestras interfaces basándonos en los espacios y retículas de diferentes dispositivos.
Mobile
4 Columns
Spacing (16px)
Margin (16px)
Tablet (Portrait)
8 Columns
Spacing (24px)
Margin (32px)
Tablet (Landscape)
12 Columns
Spacing (24px)
Margin (32px)
Desktop > 1366
12 Columns
Spacing (24px)
Margin (24px)
Rangos de Desktop screens:
Large (1440 + dp); Medium (1240 - 1439dp); Small (905 - 1239dp)
Catálogo
Elementos de diseño reutilizables que nos permiten crear consistencia en la construcción de productos digitales. Da clic en el componente para conocerlo a detalle.
Generales
Entrada de datos
Visualizar datos
Retroalimentación
