Webflow Style Guide

Diet X is our latest recipes blog Webflow Template created for modern food bloggers and food influencers looking to have a top-notch website. It was designed & developed by the amazing team at BRIX Agency.

Colors

Primary Colors

Primary 1
#4A3AFF

Secondary Colors

Secondary 1
#DFDCFF
Secondary 2
#FBE3E7
Secondary 3
#3527D8

Neutral Colors

Neutral 800
#0D0A2C
Neutral 700
#232046
Neutral 600
#484569
Neutral 500
#807E9A
Neutral 400
#BEBDD4
Neutral 300
#E5E5EF
Neutral 200
#F7F7FB
Neutral 100
#FFFFFF

Typography

Special Text

Display 1 Text

Display 1 - 80px/94px

Display 2 Text

Display 2 - 68px/76px

Display 3 Text

Display 3 - 32px/36px

Rich Text

Heading H1 - Aa Bb Cc Dd

Heading 1 - 50px/58px

Heading H2 - Aa Bb Cc Dd

Heading 2 - 36px/40px

Heading H3 - Aa Bb Cc Dd

Heading 3 - 26px/30px

Heading H4 - Aa Bb Cc Dd

Heading 4 - 22px/25px
Heading H5 - Aa Bb Cc Dd
Heading 5 - 18px/20px
Heading H6 - Aa Bb Cc Dd
Heading 6 - 18px/20px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus.

Paragraph Small - 16px/28px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph Default - 18px/30px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph Large - 24px/36px

Bold - Lorem ipsum dolor sit amet

Bold Text

Italic - Lorem ipsum dolor sit amet

Italic Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquet euismod ut id ullamcorper nunc diam. Amet a ac ut pharetra. Amet, accumsan, nisl in elementum volutpat integer. Cursus est elementum maecenas ut.
Block Quote
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur.
  • Lorem ipsum dolor sit amet, consectetur adipiscing.
Bullet List
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Lorem ipsum dolor sit amet, consectetur.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing.
Numbered List
Menu Food - Diet X Webflow Template
This is a figure caption
Figure and Figure Caption

Icon Font

Line icons rounded

Line icons square

Filled icons

Social media icons

Buttons

Small
Button Primary - Small
Default
Button Primary - Default
Large
Button Primary - Large
Small
Button Secondary - Small
Default
Button Secondary - Default
Large
Button Secondary - Large

Explore our collection of 200+ Premium Webflow Templates