Website Styleguide

More profit on your own terms.

Our mission is to help you make more profit your way through websites and marketing. Not only to gain more freedom, but also to express your vision and mission with your services or products.

We are a movement in which development, growth and your future are our North Star. Being able to give people peace and clarity. In their life and work. Creating a common vision in the sharing economy. Which ensures that we can make the world of tomorrow a little better for everyone. A community of like-minded people where creating a better future is central. For both personally and collectively.

HTML Heading Tags

Heading H1

Heading 1

4rem

Heading 2

3rem

Heading 3

2rem

Heading 4

1.5rem

Heading 5

1.25rem

Heading 6

1rem

Heading Styles

Aa Bb Cc Dd Ee

Heading Style H1

4rem

Aa Bb Cc Dd Ee

Heading Style H2

3rem

Aa Bb Cc Dd Ee

Heading Style H3

2rem

Aa Bb Cc Dd Ee

Heading Style H4

1.5rem

Aa Bb Cc Dd Ee

Heading Style H5

1.25rem

Aa Bb Cc Dd Ee

Heading Style H6

1rem

Text Tags

Sample text is being used as a placeholder for real text that is normally present.

Paragraph

Text Classes

Sample text is being used as a placeholder for real text that is normally present.

Text Size Large

1.5rem

Sample text is being used as a placeholder for real text that is normally present on your website.

Text Size Medium

1.25rem

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.

Text Size Regular

1rem

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

Text Size Small

0.875rem

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

Text Size Tiny

0.75rem

Text Styles

Sample text is being used as a placeholder for real text that is normally present.

Text Style Strikethrough

Sample text is being used as a placeholder for real text that is normally present.

Text Style Italic

Sample text is being used as a placeholder for real text that is normally present.

Text Style Muted

Sample text is being used as a placeholder for real text that is normally present.

Text Style All Caps

Sample text is being used as a placeholder for real text that is normally present.

Text Style No Wrap

Sample text is being used as a placeholder for real text that is normally present.

Text Style Link

Sample text is being used as a placeholder for real text that is normally present.

Text Style Quote

Text Weights

Sample text is being used as a placeholder for real text that is normally present.

Text Weight XBold

XBold

Sample text is being used as a placeholder for real text that is normally present.

Text Weight Bold

Bold

Sample text is being used as a placeholder for real text that is normally present.

Text Weight Semibold

Semibold

Sample text is being used as a placeholder for real text that is normally present.

Text Weight Medium

Medium

Sample text is being used as a placeholder for real text that is normally present.

Text Weight Normal

Normal

Sample text is being used as a placeholder for real text that is normally present.

Text Weight Light

Light

Text Alignmnet

Sample text is being used as a placeholder for real text that is normally present.

Text Align Left

Sample text is being used as a placeholder for real text that is normally present.

Text Align Center

Sample text is being used as a placeholder for real text that is normally present.

Text Align Right

Rich text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Sample text with a link 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. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

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 that is normally present.

Color Palette

black

#151e24

grey

#59606b

white

#ffffff

green900

#00997F

green700

#15AA90

green500

#20D8B5

green300

#97F1E2

green100

#EBFBF8

orange800

#E97353

orange600

#F1967E

orange300

#FCBFAF

orange100

#FEF4F2

blue900

#007F9E

blue700

#0FA5CA

blue500

#29C4EA

blue300

#88E1F8

blue100

#E9F8FC

purple

#FEF4F2

Text Colors

This is sample text

Text Color Black

#000000

This is sample text

Text Color Grey

#D2D3DA

This is sample text

Text Color White

#ffffff

Background Colors

background color black

#ffffff

background color grey

#f5f5f5

background color white

#f5f5f5

Buttons

Button Text

button

Button Text

button

is small

Button Text

button

is large

Button Text

button

is secondary

Button Text

button

is text

Button Text

button

is icon

Form

form component

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Icons

icon height small

1rem

icon height medium

2rem

icon height large

3rem

icon 1x1 small

1rem

icon 1x1 medium

2rem

icon 1x1 large

3rem

Structure Classes

page wrapper

main wrapper

container small

48rem

container medium

64rem

container large

80rem

padding global

2.5rem

padding section small

3rem

padding section medium

5rem

padding section large

8rem

button group

Max widths

max width full

None

max width full tablet

None

max width full mobile portrait

None

max width full mobile landscape

None

max width xxlarge

80rem

max width xlarge

64rem

max width large

48rem

max width medium

32rem

max width small

20rem

max width xSmall

16rem

max width xXSmall

12rem

Padding Direction Classes

padding bottom

padding top

padding vertical

padding horizontal

padding left

padding right

Padding Size Classes

padding 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

1.5rem

padding custom 2

2.5rem

padding custom 3

3.5rem

Margin Direction Classes

margin bottom

3.5rem

margin top

3.5rem

margin vertical

3.5rem

margin horizontal

3.5rem

margin left

3.5rem

margin right

3.5rem

Margin Size Classes

margin 0

3.5rem

margin tiny

3.5rem

margin xXSmall

3.5rem

margin xSmall

3.5rem

margin small

3.5rem

margin medium

3.5rem

margin large

3.5rem

margin xLarge

3.5rem

margin xXLarge

3.5rem

margin huge

3.5rem

margin xHuge

3.5rem

margin xXHuge

3.5rem

margin custom 1

3.5rem

margin custom 2

3.5rem

margin custom 3

3.5rem

Useful utility classes

This element is hidden

hide

hide tablet

hide mobile portrait

hide mobile landscape

overflow visible

overflow hidden

overflow auto

overflow scroll

pointer events on

pointer events off

div square

spacing clean

align center

z index 1

z index 2

display inline flex