Main colors

A semiotic palette

Main color

Its darker version

It's generally used for

  • Branding
  • CTAs

Secondary color

Its darker version

It's generally used for

  • Contrasts
  • Backgrounds

Third color

Its darker version

It's generally used for

  • Users
  • Actions

Fourth color

Its darker version

It's generally used for

  • Backgrounds
  • Effects

Links & Buttons

Its darker version

Black

White

False black

Dark Grey

Grey

Light grey

False white

Semaphore colors

Info

Success

Warning

Danger

Bad

They're generally used for

  • Info / Good / Mmmh / Wrong / Bad things

A couple of interesting things...

Gingerbread

Used for

  • GDPR/Cookies stuff

Acid Green

Always useful...

Stars background

Used in .stars-bg class

Used for

  • Beautiful CSS-animated backgrounds

And gradients

...Wonderful gradients

main gradient

first-to-third gradient

third gradient

fourth gradient

Default colors have been chosen for multiple reasons; the first one is that by mixing them you can make many beautiful and effective websites, different from each others.

Technically speaking

To implement colors in your web page, the easyest way is to use CSS classes.

Each color has a color code, you can check them in the following list

color codes

You can match the color codes to other classes to define elements styling.

You can find the code patterns in the following list

class patterns

As mentioned before, by addingyour stylesheet file you can eneble the :root variables to change colors and many many more things.

Example