Module
Sistema de diseño
Diseñado por
Estilos
Tamaños y escala
Número maestro 4
- Las medidas de alturas, anchuras, radios y otras propiedades se expresan en valores numéricos múltiplos de 4.
- 4 es el primer número compuesto, siendo sus divisores el 1, el 2 y él mismo. La suma de sus divisores propios es 3 < 4, por eso se trata de un número defectivo y sublime.
- Si se multiplica un número por 4 se obtiene el cuádruple del número inicial, y divide un número por 4 se obtiene un cuarto del número inicial.
Bordes
Las proporciones de un componente cambian entre las escalas de escritorio y móvil, el ancho del borde sigue siendo el mismo en cualquier vista.
Tipografía
La proporción de la tipografía también se basa en la relación de escala móvil y escritorio, siendo en la vista móvil 25% más grande que su contraparte de escritorio.
Escala según plataforma
Móvil
Los componentes móviles son más grandes que sus homólogos de escritorio por la interacción táctil. Esto significa que un componente móvil es un 25% más grande que su homólogo de escritorio.
Escritorio
Los componentes de escritorio son accionados con el uso de ratón y teclado, esto implica que pueden ser alcanzados más fácilmente, por esta razón tienen un tamaño más reducido manteniendo la proporción.
Temas
¿Qué es un tema?
Un tema es una personalización intencional y sistemática con atributos visuales únicos. El uso de temas permite al sistema de diseño adaptarse a estrategias para las empresas al personalizar los atributos visuales específicos. Los temas ayudan a que los productos se alineen con diferentes audiencias y necesidades de los usuarios, provocando respuestas emocionales.
Tema Claro (Theme Light)
Tema Oscuro (Theme Dark)
Colores
El uso de colores se basa en la percepción visual, diseño inclusivo y accesibilidad. Se utilizan las relaciones entre los colores y sus propiedades para crear una base escalable en el sistema de diseño.
Principales
El uso de colores se basa en la percepción visual, diseño inclusivo y accesibilidad. Se utilizan las relaciones entre los colores y sus propiedades para crear una base escalable en el sistema de diseño.
Semánticos
El conjunto de colores semánticos está pensado para transmitir un mensaje que los usuarios pueden interpretar según el estado o instancia donde sea usado.
Neutrales
Son un conjunto de grises que se pueden combinar con cualquier color. Ayudan a evitar la mala interpretación de los colores debido a la adaptación cromática y al contraste simultáneo.
Animación
El movimiento aporta significado y da sensación de vida a la experiencia del usuario. Debe tener propósito, ser intuitivo y fluido. El uso de animaciones, transiciones y movimiento debería ayudar a los usuarios a ser más productivos sin ralentizar sus flujos de trabajo.
Intención
Las animaciones ayudan a los usuarios a alcanzar sus objetivos al mostrar conexiones entre estados o vistas, llamar la atención sobre detalles importantes o brindar contexto.
Deducción
El movimiento resulta familiar y esperado. Refleja rasgos del mundo real como la aceleración, la gravedad y el volumen para lograr una sensación natural.
Integración
El movimiento encaja naturalmente en la experiencia sin crear distracciones. La cantidad de movimiento utilizado debe ser suficiente para transmitir la intención y nada más.
Spanish 
English