Global Presets UI Style Guide
Johann Daniel Lawaetz-Stiftung
01. Color palette
In this part of the style guide, you can modify each color inside the Text Module’s background settings. Use that same color code inside the Text Module below it to have a written version of the color code too. Use these color codes inside your Divi Theme Builder default color palette afterward.
#1e5494
#2ebf91
#de4b9a
#E55A45
#FFFFFF
#000000
#a1a0a3
02. Text styles
In the second part of this style guide wireframe, you can style your different text types. You’re also provided with a primary, secondary and tertiary option, each of which you can afterwards turn into individual presets.
Header
H1 – Brandon Grotesque 900 – Schwer – 3rem 48px
H1 – Brandon Grotesque 700 – Fetter Text – 3rem 48px
H2 – Brandon Grotesque 700 – Fetter Text – 2.5rem 40px
H2 – Brandon Grotesque 500 – Mittel 2.5rem 40px
H3 – Brandon Grotesque 700 – Fetter Text 2rem 32px
H3 – Brandon Grotesque 500 – Mittel 2rem 32px
H4 – Brandon Grotesque 500 – Mittel 1.5rem 24px
H4 – Brandon Grotesque 400 – Regulär 1.5rem 24px
Lawaetz-Stiftung
<span style=“font-weight: 400;“>Johann Daniel</span>
<span style=“font-weight: 900;“>Lawaetz-Stiftung</span>
Kooperationskompetenz
<h3>
<span style=“font-weight: 900;“>Kooperations</span>
<span style=“font-weight: 400;“>kompetenz</span>
</h3>
Überschriften Responsiv
h1 {
font-size: clamp(2rem, 1.4rem + 3vw, 3rem); /* ~48px */
}
h2 {
font-size: clamp(1.8rem, 1.2rem + 2.5vw, 2.5rem); /* ~40px */
}
h3 {
font-size: clamp(1.5rem, 1rem + 1.8vw, 2rem); /* ~32px */
}
h4 {
font-size: clamp(1.2rem, 0.8rem + 1.2vw, 1.5rem); /* ~24px */
}
Body
OpenSans 1rem 16px
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Open Sans Light (300) – The quick brown fox jumps over the lazy dog.
Open Sans Light Italic (300i) – The quick brown fox jumps over the lazy dog.
Open Sans Regular (400) – Regulär
Open Sans Regular Italic (400i)
Open Sans Medium (500) – Mittel
Open Sans Medium Italic (500i)
Open Sans SemiBold (600) – Semi Bold
Open Sans SemiBold Italic (600i)
Open Sans Bold (700) – Fetter Text
Open Sans Bold Italic (700i)
Open Sans ExtraBold (800) – Ultra Bold
Open Sans ExtraBold Italic (800i)
Paragraph – Open Sans Regular (400). 1234567890 !?&%$@ – ÄÖÜ äöü ß.
Bold text · Italic text · Underlined text
- Unordered List Item 1
- Unordered List Item 2
- Unordered List Item 3
- Ordered List Item 1
- Ordered List Item 2
- Ordered List Item 3
Blockquote – “The quick brown fox jumps over the lazy dog.”
Code style: console.log('Hello, world');
List
- Lorum Ipsum
- Lorum Ipsum
- Lorum Ipsum
- Lorum Ipsum
- Lorum Ipsum
- Lorum Ipsum
- Lorum Ipsum
- Lorum Ipsum
- Lorum Ipsum
03. Buttons
In the second part of this style guide wireframe, you can style your different text types. You’re also provided with a primary, secondary and tertiary option, each of which you can afterwards turn into individual presets.
Buttons
04. Hero-Section
In the second part of this style guide wireframe, you can style your different text types. You’re also provided with a primary, secondary and tertiary option, each of which you can afterwards turn into individual presets.
Kompetenzen
Gemeinsam wirksam.
Johann Daniel
Lawaetz-Stiftung