Eventival Styleguide / Visual Language / Colors

Colors

In the code use var(--clr-<name>) to use the color. If you need to make the background color, just use the bg-<color name> as class (e.g class="bg-mandy") to apply.

Pallete

#eaefff zircon

#ccf0ff onahau

#c6e9fc french-pass

#55c0ed picton-blue

#009fe3 cerulean

#0386bc lochmara

#e6f2ce tahuna-sands

#a6d350 conifer

#80b915 lime

#70a015 christi

#9DF6B9 magic-mint

#9DF6B9 salem

#fcc6c6 cupid

#ea656e mandy

#db2633 alizarin-crimson

#b91521 thunderbird

#fff6da varden

#ffebcc sunshade-10

#ffd9a0 creme-brulee

#ffad2d sunshade

#e59b28 fire-bush

#fff white

#f8f9fa athens-gray

#f2f2f2 black-5

#eaeaea gallery

#D9D9D9 alto

#bebebe silver

#888888 gray

#6b6b6b dove-gray

#585858 scorpion

#0000 black

Colors of modules

People

#FF9B00 text

#ffad2d primary

#ffebcc secondary

Companies

#0386bc text

#55c0ed primary

#c6e9fc secondary

Films

#70a015 text

#a6d350 conifer

#e6f2ce tahuna-sands

Film packages

#0fa83e text

#12d24e primary

#9DF6B9 secondary

Events

#b91521 text

#db2633 primary

#fcc6c6 secondary

Projects

#304796 text

#4F69C6 primary

#cad1ee secondary

Colors of states

Each state has assigned a color in the light and dark version. To give an item the color of state, use the classes that are visible below, they all starts with "bg-". If you need to change the color of the text use the "td" - text default or "tw" - text white classes.

Default state

#eaeaea bg-default-light

#bebebe bg-default-dark

Custom state

#ffebcc bg-custom-light

#ffad2d bg-custom-dark

Success state

#e6f2ce bg-success-light

#80b915 bg-success-dark

Warning state

#fcc6c6 bg-warning-light

#db2633 bg-warning-dark

Info state

#c6e9fc bg-info-light

#009fe3 bg-info-dark