Diseño Normalizado de Trámites Electrónicos
Inicio
Primeros pasos
Primeros pasos
¿Qué es DINTEL?
Diseñadores
Desarrolladores
Recursos
Preguntas frecuentes
Fundamentos
Fundamentos
Color
Tipografía
Elevaciones
Espaciado
Retícula
Borde
Radio
Iconografía
Ilustraciones
Animación
Accesibilidad
Tokens de diseño
Contenidos digitales
Visualización de datos
Elementos de interfaz
Elementos de interfaz
Módulos
Plantillas
Componentes
Actualizaciones
Contacto
Fundamentos
Espaciado
Espaciado
El espaciado es una parte importante de la contrucción de componentes y composiciones de Layout. Establecer tokens de espaciado ayuda a ofrecer diseños más homogéneos, coherentes y consistentes.
La escala del sistema está basada en múltiplos de 2, 4 y 8. Esto permite establecer espaciados coherentes tanto en componentes del sistema como en las composiciones de layout.
Espaciado de componentes
Esta escala está pensada para la construcción de componentes del sistema. Se basa en múltiplos de 2, 4 y 8 para poder establecer relaciones espaciales y jerarquías visuales apropiadas para los diferentes elementos que forman el componente.
025
jcr:85180b0a-accc-4ace-9842-35709908bf29
2px
050
jcr:1244fa33-51b2-4cd1-9b3d-085564539a75
4px
075
jcr:90bd6192-8d4e-46da-b4c4-337d34b4b2c1
6px
100
jcr:85d247ce-67bb-46da-914e-1aeca5bc10b4
8px
150
jcr:89b9bb49-7cf2-4c67-9da0-1557b9d38842
12px
200
jcr:fce5104e-2067-40d9-8685-2afa772bf460
16px
300
jcr:8450ac70-1778-4e6d-8043-afd48b9f168c
24px
400
jcr:04aedd2a-2559-4c12-9527-7014c8d8fe29
32px
500
jcr:2c254f43-6804-4790-83d0-f99700a7de33
40px
600
jcr:7a122833-20e1-4975-be42-fefbd9846f04
48px
Espaciado de composición
Esta escala está pensada para la construcción de composiciones de layout para ayudar en la distribución de los componentes en las pantallas.
Se basa en múltiplos de 8. Se tendrá un apoyo de múltiplos de 4 para los detalles más pequeños.
100
jcr:449872d4-afaa-4ae7-afe6-28e67368b5f2
8px
150
jcr:0f4cb823-e497-4095-9268-26fa9fdeb37e
12px
200
jcr:c12e99f7-72be-4b9c-a80f-4ae4ecf1b266
16px
300
jcr:b4c25cf8-5a04-4498-b306-2c1906cf5c2e
24px
400
jcr:0eafc1af-ae85-48c3-a9df-fa1c856e246e
32px
500
jcr:2aec4d57-9ca0-4ef0-a371-931763525610
40px
600
jcr:40c942cc-aad8-44b6-a634-6dba49f8bde8
48px
700
jcr:5664f2a4-9ecd-49da-8625-cb28de0b3801
56px
800
jcr:ffc5a4a8-f494-4bdf-a937-a3f033333dc8
64px
900
jcr:3b56eca1-ea69-4eb6-b7cb-2527afd18278
72px
1000
jcr:85249ebb-8c27-4605-9942-6fdd2ae176a8
80px
Este sitio web utiliza cookies propias y de terceros para ofrecer un mejor servicio. Si continúa navegando consideramos que acepta su uso.
