Website Styleguide

Updaterad av: Adam Karlsson
01-18-2024

Headings

Jumbo Heading

Display Desktop
4rem

Heading H1

Heading 1
3,25rem

Heading H2

Heading 2
2.55rem

Heading H3

Heading 3
2.0rem

Heading H4

Heading 4
1.75rem
Heading H5
Heading 5
1.5rem
Heading H6
Heading 6
1.25rem

Heading Classes

Aa Bb Cc Dd Ee

Heading XLarge
4rem

Aa Bb Cc Dd Ee

Heading Large
2.875rem

Aa Bb Cc Dd Ee

Heading Medium
2.375rem

Aa Bb Cc Dd Ee

Heading Small
1.75rem
Aa Bb Cc Dd Ee
Heading XSmall
1.5rem
Aa Bb Cc Dd Ee
Heading XXSmall
1.25rem

Text size

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Text Size Large
1.5rem

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Text Size Medium
1.125rem

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Text Size Regular
1rem

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of  type and scrambled it to make a type specimen book.

Text Size Small
0.875rem

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Text Size Tiny
0.75rem

Text Weights

This is some text inside of a div block.
Text Weight XBold
XBold
This is some text inside of a div block.
Text Weight Semibold
SemiBold
This is some text inside of a div block.
Text Weight Regular
Regular

Extra Text Styles

This is some text inside of a div block.
Text Style Strikethrough
Strikethrough
This is some text inside of a div block.
Text Style Italic
Italic
This is some text inside of a div block.
Text Style All Caps
All Caps
This is some text inside of a div block.
Text Style Muted
Muted
This is some text inside of a div block.
Text Style No Wrap
No Wrap
Text Style Link
Link

Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

  • The rich text element allows you to create and format headings,
  • The rich text element allows you to create and format headings,
  • The rich text element allows you to create and format headings,

This is a link

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

This is a placeholder image.
List item met icon
List item met icon
List item met icon
  • Bullet list item
  • Bullet list item
  • Bullet list item
  • Numbered list item
  • Numbered list item
  • Numbered list item

Text Color & Placement

This is some text inside of a div block.
Text Color / C1
#00A677
This is some text inside of a div block.
Text Color / C2
#9CCBFD
This is some text inside of a div block.
Text Color / C3
#1386F5
This is some text inside of a div block.
Text Color / C4
#064B8E
This is some text inside of a div block.
Text Color / C5
#022850
This is some text inside of a div block.
Text Color / G100
#F7F8FA
This is some text inside of a div block.
Text Color / G300
#DBDEE6
This is some text inside of a div block.
text-color-g500
#B1BAC8
This is some text inside of a div block.
Text Color / G800
#4A556C
This is some text inside of a div block.
Text Color / G900
#041434
This is some text inside of a div block.
Text Align / Left
Left
This is some text inside of a div block.
Text Align / Center
Center
This is some text inside of a div block.
Text Align / Right
Right

Colours

Primary
#00a677
Secondary
#1D1C21
Text Color
#6E7B87
Primary BG
#f8f8f8
Secondary BG
#fafdfc

Buttons

Icon - Webflow Desktop viewport
Button / Primary
Small
Icon - Webflow Desktop viewport
Button / Primary
Icon - Webflow Desktop viewport
Button / Primary
Large
Icon - Webflow Desktop viewport
Button / Secondary
Small
Icon - Webflow Desktop viewport
Button / Secondary
Icon - Webflow Desktop viewport
Button / Secondary
Large
Icon - Webflow Desktop viewport
Button / Tertiary
Small
Icon - Webflow Desktop viewport
Button / Tertiary
Icon - Webflow Desktop viewport
Button / Tertiary
Large
Icon - Webflow Desktop viewport
Button / White
Small
Icon - Webflow Desktop viewport
Button / White
Icon - Webflow Desktop viewport
Button / White
Large
Icon - Webflow Desktop viewport
Button / Text
Small
Icon - Webflow Desktop viewport
Button / Text
Icon - Webflow Desktop viewport
Button / Text
Large

Forms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Icons

Icon / XXSmall
0.875rem
Icon / XSmall
1.5rem
Icon / Small
2rem
Icon / Medium
3rem
Icon / Large
4rem

Brand assets

Favicon
32px
Favicon
256px

Spacing

Spacing /0
0rem
Padding / Tiny
0.125rem
Padding / XXSmall
0.25rem
Padding / XSmall
0.5rem
Padding / Small
1rem
Padding / Medium
2rem
Padding / Large
3rem
Padding / XLarge
4rem
Padding / XXLarge
5rem
Padding / Huge
6rem
Padding / XHuge
8rem
Padding / XXHuge
12rem
Padding / Custom 1
0rem
Padding / Custom 2
0rem
Padding / Custom 3
0rem
Padding / Top
0rem
Padding / Bottom
0rem
Padding / Left
0rem
Padding / Right
0rem
Padding / Vertical
0rem
Padding / Horizontal
0rem
Margin / 0
0rem
Margin / Tiny
0.125rem
Margin / XXSmall
0.25rem
Margin / XSmall
0.5rem
Margin / Small
1rem
Margin / Medium
2rem
Margin / Large
3rem
Margin / XLarge
4rem
Margin / XXLarge
5rem
Margin / Huge
6rem
Margin / XHuge
7rem
Margin / XXHuge
8rem