Logo

Dark and light logo examples.

Logo Light Mode
Logo Dark Mode

Typefaces

Global typography.

Fonts

HEadings

Varela

Body, BUTTONS, LABELS
ICONS

Headings - H1 to H6

Your go to online financial advisor.

Jumbo H1 / 80px / 1.3 EM

Your go to online financial advisor.

H1 / 60px / 1.3 EM

Your go to online financial advisor.

H2 / 50px / 1.3 EM

Your go to online financial advisor.

H3 / 40px / 1.3 EM

Your go to online financial advisor.

H4 / 30px / 1.3 EM
Your go to online financial advisor.
H5 / 20px / 1.3 EM
Your go to online financial advisor.
H6 / 16px / 1.3 EM

Paragraphs - Small, Normal & Big

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.

Small Paragraph/ 14px / 1.8 EM

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.

Global Paragraph/ 16px / 1.8 EM

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.

Big Paragraph/ 20px / 1.8 EM

Labels - Small, Normal & Big

This is some text inside of a div block.
Small Label/ 12px / 1.4 EM
This is some text inside of a div block.
Normal Label/ 14px / 1.6 EM
This is some text inside of a div block.
Normal Label/ 16px / 1.8 EM

Links - Normal, Caps & Nav

Go to Jazz it up a little
Normal Link/ 14px / 1.6 EM
Go to Jazz it up a little
Normal Link/ 14px / 1.6 EM
Go to Jazz it up a little
Nav Link/ 14px / 1.6 EM / 20px padding

Misc

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.
Global Block QUote / 12px / 1.4 EM

Rich Element - Testing how styles fit together

Can you rework to make finances be more accessible.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum. 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.

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.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

We try your eye, but can you change everything?Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

  • Ut enim ad minima veniam, quis nostrum exercitationem.
  • Ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

Buttons

Some variations.

SEE all
SCRIBBLE button
SEE all
button WHite OUTLINED
SEE all
button VIOLET
SEE all
button small
SEE all
button small LIGHT GREY
SEE all
button small LIGHT GREY
Let's call
button small BLACK
Know more
button small UNDERLINED Blue
Know more
button small Blue

Colors

Global colors.

LIGHT BLACK / #191919
lavender / #f8e5ff
pALE GREEN / #a0ffaa
VIOLET / #d48dfc
White SMOKE / #eef0f4
White SMOKE / #eef0f4

Iconography

All icons as images, and text from Fontawesome.

Margins and paddings

Add all margins andpaddings at one place to keep them consistent.

Illustrations

Add all illustrations at one place to keep them consistent.