Jerarquía
El Sistema de Diseño de Spaceship está construido en capas, cada una agregando claridad, estructura y propósito. Forman una jerarquía que guía cómo diseñamos, construimos y escalamos productos, desde la decisión visual más pequeña hasta el recorrido de usuario más amplio.
Siguiendo los principios de Atomic Design, hemos estructurado nuestros recursos principales en las siguientes categorías, facilitando su uso para todos los equipos.
Fundamentos
Definen las reglas principales de nuestro lenguaje visual — colores, tipografía, espaciado, cuadrículas, movimiento y tokens. Nos brindan una base coherente desde la cual trabajar.
Componentes
Llevan a la vida las reglas fundamentales en elementos de interfaz reutilizables que resuelven problemas de diseño cotidianos.
Plantillas
Demuestran cómo los componentes y patrones funcionan juntos en contexto, proporcionando estructuras listas para páginas y experiencias completas.
Patrones
Capturan soluciones comprobadas y mejores prácticas, asegurando que nuestro trabajo siga siendo coherente, accesible y centrado en el usuario en cada punto de contacto.
Fundamentos
Los átomos esenciales del Sistema de Diseño de Spaceship. Definen las reglas visuales y estructurales sobre las que se construye cada componente y patrón.
Color
Define paletas de marca y funcionales que aseguran armonía, accesibilidad y flexibilidad en todos los productos.
Tipografía
Establece jerarquía y claridad con una escala tipográfica que facilita la lectura y el escaneo del contenido.
Espaciado
Proporciona una escala sistemática para márgenes, rellenos y ritmo de diseño para mantener interfaces coherentes.
Cuadrículas
Crea diseños responsivos que se adaptan a diferentes dispositivos mientras mantienen la estructura y alineación.
Movimiento
Utiliza transiciones y animaciones para guiar la atención, comunicar el estado y hacer que las interacciones se sientan naturales.
Tokens de diseño
Traducen los valores fundamentales en código, sirviendo como una única fuente de verdad y facilitando actualizaciones rápidas y sencillas.
Fundamentos claros significan menos barreras, más inclusión y más tiempo dedicado a resolver problemas reales en lugar de empezar desde cero.
Componentes
Estos son los elementos reutilizables del Sistema de Diseño de Spaceship. Cada uno resuelve un problema específico de interfaz — desde botones e inputs hasta navegación y mensajes de retroalimentación. Cada componente es accesible, responsivo y fácilmente adaptable a diferentes contextos o dispositivos.
Los componentes reutilizables aseguran que cada producto que construimos se lance más rápido y se sienta conectado con el panorama general.
Plantillas
Las plantillas son el puente entre los bloques de construcción y la experiencia del usuario. Combinan fundamentos y componentes en contextos de página completa, demostrando cómo funciona el sistema en la práctica.
Plantillas de página de producto
Estructuras de página de alto nivel para páginas de aterrizaje y de producto, donde los diseñadores principalmente actualizan el contenido y ajustan los módulos para adaptarse a cada contexto.
Componentes compartibles
Estructuras reutilizables más complejas, como tablas comparativas o tarjetas de precios, están diseñadas para manejar escenarios específicos de manera coherente en todos los productos.
Con estructuras listas para usar desde el inicio, los equipos pueden enfocarse menos en decisiones de diseño y más en atender las necesidades reales de los usuarios.
Patrones
Los patrones capturan lo que hemos aprendido de pruebas, retroalimentación y uso en el mundo real, convirtiéndolo en soluciones reutilizables y estandarizadas. Cada patrón se basa en la intención del usuario, ya sea simplificar el proceso de compra, manejar errores o guiar a los usuarios a través de formularios.
Al definir soluciones comprobadas, los patrones hacen que nuestro trabajo tenga propósito, asegurando que cada experiencia no solo sea funcional, sino también cuidadosamente diseñada.