Standardized Design of Electronic Procedures
Home
First steps
First steps
What is DINTEL?
Designers
Developers
Resources
Frequently Asked Questions
Foundations
Foundations
Color
Typography
Box shadow
Spacing
Grid
Border
Border radius
Iconography
Illustrations
Animations
Accessibility
Design tokens
Writing guidelines
Data visualization
Interface elements
Interface elements
Modules
Templates
Components
Updates
Contact
Foundations
Spacing
Spacing
Spacing is an important part of building Layout components and layouts. Setting spacing tokens helps to provide more homogeneous, coherent and consistent layouts.
The system scale is based on multiples of 2, 4 and 8. This allows for consistent spacing in both system components and layout compositions.
Component spacing
This scale is intended for the construction of system components. It is based on multiples of 2, 4 and 8 in order to establish appropriate spatial relationships and visual hierarchies for the different elements that make up the component.
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
Composition spacing
This scale is intended for the construction of layout compositions to aid in the distribution of components on the screens.
It is based on multiples of 8. A support of multiples of 4 will be used for the smallest details.
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
This website uses own and third party cookies to provide a better service. If you continue browsing we consider that you accept its use.
