Webflow Style Guide

Selfolio is our premium modern startup Webflow Template
created for companies in the fintech, tech and corporate industries.
It was designed & developed by the team of expert designers &
developers at Wealcoder Agency.

Colors

Main Colors

Background Primary
Color Primary
#FF5A24
Background Dark
Color Dark
#07060E
Background Dark Light
Color Dark Light
#999999
Background White
Color White
#ffffff

Typography

Text

Text Block
font-family: Manrope
font-size: 18px ;  line-height: 1.5em;
This is some text inside of a div block.

Headings

Heading H1
font-family: Manrope
font-size: 120px ;  line-height: 1.1em;

Heading

Heading H2

font-family: Manrope
font-size: 60px ;  line-height: 1.1em;

Heading

Heading H3

font-family: Manrope
font-size: 40px ; line-height: 1.3em;

Heading

Heading H4

font-family: Manrope
font-size: 28px ;  line-height: 1.3em;

Heading

Heading H5

font-family: Manrope
font-size: 22px ;  line-height: 1.4em;
Heading

Font Family

Class Name

Font Kanit
This is some text inside of a div block.
Font Manrope
This is some text inside of a div block.
Font Plus Jakarta Sans
This is some text inside of a div block.
Font Ogg Trial
This is some text inside of a div block.

Font Weight

Class Name

Font Black
This is some text inside of a div block.
Font Bold
This is some text inside of a div block.
Font Semi Bold
This is some text inside of a div block.
Font Medium
This is some text inside of a div block.
Font Light
This is some text inside of a div block.

Rich Text Style

Heading H1

Heading H2

Heading-3

Heading-4

Heading-5
Heading-6

ecorated in shades of decadent jewels, dripping with lights and a bangin' sound system, Saturdays go hand in hand with SEDUCTION. Prepare yourself

Purus non enim praesent elemenntum facilisis leo. Quis lectus nulla at volutpat. Nunc scelerisquecicerra mauis in aliquam sem fringilla. Nam at lectus duis convallis convallis tellus. Fames acturpic egistas integer eget aliquet nibh tristique.

Being clear in your head of what you want to achieve will aid you big time in moving forward with your plan. However, a crucial thing to consider here is to set realistic goals.  By setting realistic goals, we mean that you should consider your resources such as budget and time. Before moving forward with your architectural plan.

Success needs hard work. Don’t listen to these ‘get rich quick’ schemes. You need to build your character and work hard on yourself and your business to achieve greatness. Work hard and work smart. Do the right things and do them in the right way. Don’t procrastinate. Take bold actions. Work long hours and craft your legacy.

  1. In enim justo, rhoncus ut, imperdiet a, venenatis vitae.
  2. Nullam dictum felis eu pede mollis pretium.
  3. Integer tincidunt. Cras dapibus.
  • In enim justo, rhoncus ut, imperdiet a, venenatis vitae.
  • Nullam dictum felis eu pede mollis pretium.
  • Integer tincidunt. Cras dapibus

Paragraph Link — Bold Text — Italic Text

Body Text Style

Text Xxl

font-family: kanit
font-size: 26px;  line-height: 1.3em
Lorem ipsum dolor

Text Xl

font-family: kanit
font-size: 24px; line-height:1.3em
Lorem ipsum dolor

Text Lg

font-family: kanit
font-size: 22px; line-height: 1.4em
Lorem ipsum dolor

Text Md

font-family: kanit
font-size: 20px; line-height: 1.4em
Lorem ipsum dolor

Text Sm

font-family: kanit
font-size: 18px ; line-height:1.4em
Lorem ipsum dolor

Text Xs

font-family: kanit
font-size: 16px: line-height: 1.5em
Lorem ipsum dolor

Buttons

Buttons Style

Button Primary
Button Secondary
Button Green
Button Submit