Styleguide

Silvr — 2021

HTML HEADING TAGS
Heading H1

H1
Lorem ipsum dolor sit amet

Heading H2

H2
Lorem ipsum dolor sit amet

Heading H3

H3
Lorem ipsum dolor sit amet

Heading H4

H4
Lorem ipsum dolor sit amet

Heading H5
H5
Lorem ipsum dolor sit amet
Heading H6
H6
Lorem ipsum dolor sit amet
HEADING CLASSES
heading-h1

Lorem ipsum dolor sit amet

heading-h2

Lorem ipsum dolor sit amet

heading-h3

Lorem ipsum dolor sit amet

heading-h4

Lorem ipsum dolor sit amet

heading-h5
Lorem ipsum dolor sit amet
heading-h6
Lorem ipsum dolor sit amet
OTHER HTML TAGS
Paragraph

Global Paragraph
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Link
Global Link
Bloque Quote
Global Block Quote
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
TEXT CLASSES
p-lg

Paragraph size large
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

p-md
Default paragraph size

Paragraph size medium
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

p-sm

Paragraph size small
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

text-style-underline

Lorem ipsum dolor sit amet

text-style-italic

Lorem ipsum dolor sit amet

text-style-allcaps

Lorem ipsum dolor sit amet

text-style-strikethrough

Lorem ipsum dolor sit amet

text-style-2lines

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

text-style-3lines

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Rich Text
text-rich-text

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
This is a placeholder image
TEXT WEIGHTS
text-weight-bold

Text weight bold
Lorem ipsum dolor sit amet

text-weight-semibold

Text weight semibold
Lorem ipsum dolor sit amet

text-weight-regular

Text weight regular
Lorem ipsum dolor sit amet

TEXT ALIGNEMENTS
text-align-left

Text align left
Lorem ipsum dolor sit amet

text-align-center

Text align center
Lorem ipsum dolor sit amet

text-align-right

Text align right
Lorem ipsum dolor sit amet

Neutral PALETTE
bg-color-neutral-900
bg-color-neutral-600
bg-color-neutral-500
bg-color-neutral-400
bg-color-neutral-300
bg-color-neutral-200
bg-color-neutral-100
bg-color-neutral-000
Blue PALETTE
bg-color-blue-500
bg-color-beige-400
bg-color-beige-300
bg-color-beige-200
bg-color-beige-100
Beige PALETTE
bg-color-beige-500
bg-color-beige-400
bg-color-beige-300
bg-color-beige-200
bg-color-beige-100
bg-color-beige-gradient
Copper PALETTE
bg-color-copper-500
bg-color-copper-400
bg-color-copper-300
bg-color-copper-200
bg-color-copper-100
Yellow PALETTE
bg-color-yellow-500
bg-color-yellow-400
Buttons
button
is-secondary

Button text

button
is-link
p-lg

Link text

button
is-small

Button text

button
is-secondary

Button text

button
is-link
p-lg

Link text

Icons
icon
icon-1x1
Social media icons
WEBFLOW ELEMENTS
Unordered List

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit

Ordered List

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit

  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit

  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Forms
Form
form
Label
form_field-input
form_field-input.is-text-area
form_field-input.is-select
form_checkbox
form_checkbox-icon
form_checkbox-icon
Checked
form_checkbox-icon
button
is-form
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Custom Components
tag_label.is-alone

Lorem

tag

Lorem ipsum

tag
tag_label

Lorem ipsum

Lorem

tag.is-active

Lorem ipsum

tag.is-active
tag_label

Lorem ipsum

Lorem

text-list

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit

SPACING MARGIN CLASSES
margin-0
margin-4
margin-8
margin-12
margin-16
margin-24
margin-32
margin-48
margin-64
margin-80
margin-128
margin-160
SPACING PADDING CLASSES
padding-0
padding-4
padding-8
padding-16
padding-24
padding-32
padding-64
padding-128
DIRECTION MARGIN CLASSES
margin-top
margin-bottom
margin-left
margin-right
margin-vertical
margin-horizontal
DIRECTION Padding CLASSES
padding-top
padding-bottom
padding-left
padding-right
padding-vertical
padding-horizontal
CUSTOM CLASSES
clickable-off
Disable click / tap event
clickable-on
Enable click / tap event
div-square
Make the div perfectly squared
Children might need to be positioned as absolute
text-inline
Make the div display inline
align-center
Align element with margin auto left and right
hide
Hide element on all breakpoints
t-hide
Hide element on tablet and smaller
ml-hide
Hide element on mobile landscape and smaller
m-hide
Hide element on mobile portrait
is-z-index-5
Makes element position relative with a z-index of 5
is-z-index-10
Makes element position relative with a z-index of 10
text-no-wrap
Makes span of text not wrap

Style Guide

standard
Element
Padding
standard
Element
Padding

Containers

1260px

Colors

#131313
text/head
#1454cc
button
Secondary
500
#727477
Neutral
500
#5F4F3D
Primary
800
#D4A000
Primary
700
#FFDA00
Primary
500
#FFFFFF
#F7FAFC
#FFF7EF
Tertiary
100
#FEF0E2
background
Tertiary 200
#FFF3F0
Highlight
100

Typography

Heading

H1—Use for Page headers

H1
Garnett Medium
40px
44px lineheight
-2% spacing
Use stylistic alternates (code in Webflow)
-webkit-font-feature-settings: "salt";
H1
Garnett Medium
44px
48px lineheight
-2% spacing
Use stylistic alternates (code in Webflow)
-webkit-font-feature-settings: "salt";

H2—Use for section / chapter headers

H2
Garnett Medium
32px
36px lineheight
-1% spacing
Use stylistic alternates (code in Webflow)
-webkit-font-feature-settings: "salt";
H2
Garnett Medium
32px
36px lineheight
-1% spacing
Use stylistic alternates (code in Webflow)
-webkit-font-feature-settings: "salt";

H3—Use for short Headers in Combination with Body

H3
Garnett Medium
28px
32px lineheight
0% spacing
Use stylistic alternates (code in Webflow)
-webkit-font-feature-settings: "salt";
H3
Garnett Medium
28px
32px lineheight
0% spacing
Use stylistic alternates (code in Webflow)
-webkit-font-feature-settings: "salt";

H4 - Use for longer Headlines in combination with Body

H4
Garnett Medium
24px
32px lineheight
0% spacing
Use stylistic alternates (code in Webflow)
-webkit-font-feature-settings: "salt";
H4
Garnett Medium
22px
28px lineheight
0% spacing
Use stylistic alternates (code in Webflow)
-webkit-font-feature-settings: "salt";
H5 - Use in combination with “Body Large”
H5
Garnett Medium
20px
28px lineheight
0% spacing
Use stylistic alternates (code in Webflow)
-webkit-font-feature-settings: "salt";
H5
Garnett Medium
18px
24px lineheight
0% spacing
Use stylistic alternates (code in Webflow)
-webkit-font-feature-settings: "salt";
H6 - Same size as “Body”, use for highlights
H6
Garnett Medium
16px
24px lineheight
0.2px spacing
Use stylistic alternates (code in Webflow)
-webkit-font-feature-settings: "salt";
H6
Garnett Medium
14px
20px lineheight
0% spacing
Use stylistic alternates (code in Webflow)
-webkit-font-feature-settings: "salt";

Text

Body Large,—use for shorter texts

Body
Garnett Regular
20px
28px lineheight
0% spacing
Use stylistic alternates (code in Webflow)
-webkit-font-feature-settings: "salt";
Body
Garnett Regular
18px
20px lineheight
0% spacing
Use stylistic alternates (code in Webflow)
-webkit-font-feature-settings: "salt";

Body —(Regular) use for most texts

Body
Garnett Regular
16px
24px lineheight
0.2px spacing
Use stylistic alternates (code in Webflow)
-webkit-font-feature-settings: "salt";
Body
Garnett Regular
14px
20px lineheight
0% spacing
Use stylistic alternates (code in Webflow)
-webkit-font-feature-settings: "salt";

Body —(Bold) Highlight

Body
Garnett Medium
16px
24px lineheight
0.2px spacing
Use stylistic alternates (code in Webflow)
-webkit-font-feature-settings: "salt";
Body
Garnett Medium
14px
20px lineheight
2% spacing
Use stylistic alternates (code in Webflow)
-webkit-font-feature-settings: "salt";

Body —(Regular) use for most texts

Small
Garnett Regular
14px
20px lineheight
0,4px spacing
Use stylistic alternates (code in Webflow)
-webkit-font-feature-settings: "salt";
Body
Garnett Regular
14px
20px lineheight
0% spacing
Use stylistic alternates (code in Webflow)
-webkit-font-feature-settings: "salt";
Link Size
Body
Garnett Medium
16px
28px lineheight
0% spacing
Use stylistic alternates (code in Webflow)
-webkit-font-feature-settings: "salt";
Body
Garnett Medium
14px
20px lineheight
0% spacing
Use stylistic alternates (code in Webflow)
-webkit-font-feature-settings: "salt";
Caption size - please use for Captions only
Caption
Gilroy Regular
14px
20px lineheight
0.3px spacing
Caption
Gilroy Regular
12px
18px lineheight
0% spacing

Icons

Icon
Icon
Icon
Icon

Bullet Point

IconIconIconIcon

Social Media

IconIconIconIconIconIcon
IconIconIconIconIconIcon

Button

Finanzierung anfragen
Finanzierung anfragen
Finanzierung anfragen
Finanzierung anfragen
Finanzierung anfragen
Weiterlesen
Weiterlesen
Weiterlesen
Weiterlesen