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, lo que facilita su uso para todos los equipos.
Fundamentos
Definen las reglas centrales de nuestro lenguaje visual: colores, tipografía, espaciado, cuadrículas, movimiento y tokens. Nos brindan una base consistente desde la cual trabajar.
Componentes
Dan vida a las reglas fundamentales en elementos de interfaz reutilizables que resuelven problemas cotidianos de diseño.
Plantillas
Demuestran cómo los componentes y patrones funcionan juntos en contexto, proporcionando estructuras listas para usar para páginas y experiencias completas.
Patrones
Capturan soluciones comprobadas y mejores prácticas, asegurando que nuestro trabajo siga siendo consistente, accesible y centrado en el usuario en cada punto de contacto.
Fundamentos
Los átomos esenciales del Spaceship Design System. Definen las reglas visuales y estructurales sobre las que se construyen cada componente y patrón.
Color
Define paletas de marca y funcionales que garantizan armonía, accesibilidad y flexibilidad en todos los productos.
Tipografía
Establece jerarquía y claridad con una escala tipográfica que hace que el contenido sea fácil de leer y escanear.
Espaciado
Proporciona una escala sistemática para márgenes, relleno y ritmo de layout para mantener interfaces consistentes.
Cuadrículas
Crea layouts responsivos que se adaptan a distintos dispositivos mientras mantienen la estructura y la alineación..
Movimiento
Utiliza transiciones y animación para guiar la atención, comunicar el estado y hacer que las interacciones se sientan naturales.
Design Tokens
Traducen los valores fundamentales en código, sirviendo como una única fuente de verdad y facilitando actualizaciones rápidas y sencillas.
Tener fundamentos claros significa 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 Spaceship Design System. Cada uno resuelve un problema específico de la interfaz, desde botones y campos de entrada hasta navegación y mensajes de retroalimentación. Cada componente es accesible, responsivo y se adapta fácilmente a diferentes contextos o dispositivos.
Los componentes reutilizables garantizan que cada producto que creamos 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áginas de producto
Estructuras de página de alto nivel para landing pages y páginas de producto, donde los diseñadores principalmente actualizan el contenido y ajustan los módulos para adaptarlos a cada contexto.
Componentes compartibles
Las estructuras reutilizables más complejas, como tablas comparativas o tarjetas de precios, están diseñadas para manejar escenarios específicos de manera consistente en todos los productos.
Con estructuras listas para usar como punto de partida, los equipos pueden enfocarse menos en decisiones de diseño de layout y más en atender necesidades reales de los usuarios.
Patrones
Los patrones capturan lo que hemos aprendido de las pruebas, la retroalimentación y el 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 pago, 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 diseñada con atención.