Styleguide
Buttons
Normal Buttons
Construct via data-variant e.g. data-variant="dark-blue-outline"
Rounded outline buttons
Typography
Utopia Fluid type system
Fontsize interpolation starting from screen size of 320px to 1860px
Headlines
H1
Narrow Black, Step 5:
61.8475px → 128.0047px
H2
Narrow Black, Step 3:
37.7487px → 63.2856px
H3
Narrow Black, Step 2:
29.4912px → 44.4984px
Subtitles
H4, Subtitle 01
Wide Medium, Step 1: 23.04px → 31.2884px
How to: h4 + "subtitle" class
H5, Subtitle 02
Wide Medium, Step 0: 18px → 22px
How to: h5 + "subtitle" class
Copy
copy, body text, <p>
Regular, Step 0: 18px → 22px
Elit cupidatat dolore labore semibold sint dolore laborum minim pariatur ut minim voluptate sunt. Exercitation consequat aliquip velit Lorem velit sint ex consequat aliquip et nulla exercitation. Lorem magna labore consectetur commodo voluptate velit eu sunt mollit amet commodo.
small copy <small>
Regular, Step -1: 14.75px → 16.065px
Elit cupidatat dolore labore semibold sint dolore laborum minim pariatur ut minim voluptate sunt. Exercitation consequat aliquip velit Lorem velit sint ex consequat aliquip et nulla exercitation. Lorem magna labore consectetur commodo voluptate velit eu sunt mollit amet commodo.
Mark
mark, body text, <tag class="mark">
Step --2: ~ 10px
Werbung Markierung