Type Scale, Perfect Fourth, Base 18
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph text lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas rutrum ultricies massa, sed fringilla massa consectetur vitae. Praesent nec mauris vel dui tempor commodo a eu neque. Pellentesque volutpat purus lorem, quis lobortis est feugiat nec. Curabitur et gravida purus, feugiat sodales ex. In ultrices dolor sit amet interdum pharetra. Fusce nec viverra ante. Suspendisse vitae nibh id velit rhoncus gravida. Pellentesque eget nisi at dui rhoncus tempor. Morbi dignissim lacinia ornare. Integer rutrum sodales libero eu pellentesque. In efficitur velit vitae ex vestibulum, quis consectetur justo sagittis. Donec nec dui et elit suscipit scelerisque. Duis rhoncus volutpat vulputate. Proin consectetur tempus condimentum. Pellentesque tempus sapien arcu, ac molestie ex dapibus dapibus. Donec faucibus libero elit, nec hendrerit nisl fermentum a…
Section with scene margin – 160px at 1920px screen, 160px is the master number to control everything else
Section with scene padding – 160px at 1920px screen, 160px is the master number to control everything else
Section with padding-top and bottom L – master*1.624 at 1920px screen
Section with margin-top and bottom L – master*1.624 at 1920px screen
Section with margin-top and bottom M – master*0.6 at 1920px screen
Section with padding-top and bottom S – master*0.250 at 1920px screen
Section with padding-top and bottom XS – master*0.250 at 1920px screen
Container MAX, width 1400px at 1920px screen
Container MEDIUM, width around 1050px at 1920px screen
Container SMALL, width around 730px at 1920px screen
Container EXTRA, width around 1744px at 1920px screen
Heading 2 padding bottom 32px at 1920
Some lorem ipsum text here to mimic some paragraph below a headline Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue magna, convallis non orci at, fringilla molestie magna. Phasellus ut nisi sed libero fermentum tristique. Proin tempus lacinia aliquam. Nullam nec est ac diam ornare mattis. Mauris eu tellus eu diam ultricies blandit. Vivamus rhoncus euismod lorem ac congue. Maecenas eu aliquam tortor, vitae luctus neque. Cras ac orci diam. Maecenas lorem lectus, auctor quis diam ut, aliquet commodo ante. Aenean feugiat ipsum id nisi dignissim, nec aliquam sem iaculis.
Heading 3 padding bottom 26px at 1920
Some lorem ipsum text here to mimic some paragraph below a headline Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue magna, convallis non orci at, fringilla molestie magna. Phasellus ut nisi sed libero fermentum tristique. Proin tempus lacinia aliquam. Nullam nec est ac diam ornare mattis. Mauris eu tellus eu diam ultricies blandit. Vivamus rhoncus euismod lorem ac congue. Maecenas eu aliquam tortor, vitae luctus neque. Cras ac orci diam. Maecenas lorem lectus, auctor quis diam ut, aliquet commodo ante. Aenean feugiat ipsum id nisi dignissim, nec aliquam sem iaculis.
Heading 4 padding bottom 20px at 1920
Some lorem ipsum text here to mimic some paragraph below a headline Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue magna, convallis non orci at, fringilla molestie magna. Phasellus ut nisi sed libero fermentum tristique. Proin tempus lacinia aliquam. Nullam nec est ac diam ornare mattis. Mauris eu tellus eu diam ultricies blandit. Vivamus rhoncus euismod lorem ac congue. Maecenas eu aliquam tortor, vitae luctus neque. Cras ac orci diam. Maecenas lorem lectus, auctor quis diam ut, aliquet commodo ante. Aenean feugiat ipsum id nisi dignissim, nec aliquam sem iaculis.
Heading 5 padding bottom 14px at 1920
Some lorem ipsum text here to mimic some paragraph below a headline Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue magna, convallis non orci at, fringilla molestie magna. Phasellus ut nisi sed libero fermentum tristique. Proin tempus lacinia aliquam. Nullam nec est ac diam ornare mattis. Mauris eu tellus eu diam ultricies blandit. Vivamus rhoncus euismod lorem ac congue. Maecenas eu aliquam tortor, vitae luctus neque. Cras ac orci diam. Maecenas lorem lectus, auctor quis diam ut, aliquet commodo ante. Aenean feugiat ipsum id nisi dignissim, nec aliquam sem iaculis.
Heading 6 padding bottom 8px at 1920, btw heading 6 has to be the same size as P, just different style
Some lorem ipsum text here to mimic some paragraph below a headline Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue magna, convallis non orci at, fringilla molestie magna. Phasellus ut nisi sed libero fermentum tristique. Proin tempus lacinia aliquam. Nullam nec est ac diam ornare mattis. Mauris eu tellus eu diam ultricies blandit. Vivamus rhoncus euismod lorem ac congue. Maecenas eu aliquam tortor, vitae luctus neque. Cras ac orci diam. Maecenas lorem lectus, auctor quis diam ut, aliquet commodo ante. Aenean feugiat ipsum id nisi dignissim, nec aliquam sem iaculis.
2 Columns container, gap of 72px at 1920
3 Columns container, gap of 56px at 1920
4 Columns container, gap of 40px at 1920
5 Columns container that should never be used but just in case, gap of 24px at 1920
6 Columns container should never be used
3 Button sizes visualizer
Small button in a container under a paragraph
Some lorem ipsum text here to mimic some paragraph below a headline Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue magna, convallis non orci at, fringilla molestie magna. Phasellus ut nisi sed libero fermentum tristique. Proin tempus lacinia aliquam. Nullam nec est ac diam ornare mattis. Mauris eu tellus eu diam ultricies blandit. Vivamus rhoncus euismod lorem ac congue. Maecenas eu aliquam tortor, vitae luctus neque. Cras ac orci diam. Maecenas lorem lectus, auctor quis diam ut, aliquet commodo ante. Aenean feugiat ipsum id nisi dignissim, nec aliquam sem iaculis.
Default button in a container under a paragraph
Some lorem ipsum text here to mimic some paragraph below a headline Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue magna, convallis non orci at, fringilla molestie magna. Phasellus ut nisi sed libero fermentum tristique. Proin tempus lacinia aliquam. Nullam nec est ac diam ornare mattis. Mauris eu tellus eu diam ultricies blandit. Vivamus rhoncus euismod lorem ac congue. Maecenas eu aliquam tortor, vitae luctus neque. Cras ac orci diam. Maecenas lorem lectus, auctor quis diam ut, aliquet commodo ante. Aenean feugiat ipsum id nisi dignissim, nec aliquam sem iaculis.
Large button in a container under a paragraph
Some lorem ipsum text here to mimic some paragraph below a headline Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue magna, convallis non orci at, fringilla molestie magna. Phasellus ut nisi sed libero fermentum tristique. Proin tempus lacinia aliquam. Nullam nec est ac diam ornare mattis. Mauris eu tellus eu diam ultricies blandit. Vivamus rhoncus euismod lorem ac congue. Maecenas eu aliquam tortor, vitae luctus neque. Cras ac orci diam. Maecenas lorem lectus, auctor quis diam ut, aliquet commodo ante. Aenean feugiat ipsum id nisi dignissim, nec aliquam sem iaculis.