🍪

In this website we use cookies to track the visits.
Do you agree?
You can find more informations in our cookie policy and privacy policy!

How colors work
in mini

Obviously they works like you decide but... let's have a look to mini basic color's isea.

Main colors

A semiotic palette

Main color

Its darker version

Its darkest 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

  • Links
  • Buttons

Fourth color

Its darker version

It's generally used for

  • Backgrounds
  • Effects

Black

False black

Grey

False white

White

Semaphore colors

Success

Warning

Danger

They're generally used for

  • Good / Mmmh / Bad things

A couple of interesting things...

Gingerbread

Used for

  • GDPR/Cookies stuff

Acid Green

Always useful...

Stars color

Used in .starsBg class

Used for

  • Beautiful CSS-animated backgrounds

And gradients

...Wonderful gradients

Main gradient

Secondary 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 editing the this.scss file you can eneble the :root variables to change colors and many many more things.

Example