Palette

Main colors

Default text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis in mauris vitae dapibus. Vivamus placerat sapien a felis laoreet, eu gravida tortor laoreet. Curabitur vulputate mauris non risus accumsan, et varius metus ullamcorper. Integer lectus lorem, dapibus quis dictum venenatis, volutpat non velit. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Integer vehicula dignissim nisl in egestas. Nullam porta erat ut ligula aliquam, et fringilla sapien laoreet. Morbi et purus et purus tristique dignissim.

Text dark: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis in mauris vitae dapibus. Vivamus placerat sapien a felis laoreet, eu gravida tortor laoreet. Curabitur vulputate mauris non risus accumsan, et varius metus ullamcorper. Integer lectus lorem, dapibus quis dictum venenatis, volutpat non velit. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Integer vehicula dignissim nisl in egestas. Nullam porta erat ut ligula aliquam, et fringilla sapien laoreet. Morbi et purus et purus tristique dignissim.

Text-primary: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis in mauris vitae dapibus. Vivamus placerat sapien a felis laoreet, eu gravida tortor laoreet. Curabitur vulputate mauris non risus accumsan, et varius metus ullamcorper. Integer lectus lorem, dapibus quis dictum venenatis, volutpat non velit. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Integer vehicula dignissim nisl in egestas. Nullam porta erat ut ligula aliquam, et fringilla sapien laoreet. Morbi et purus et purus tristique dignissim.

Text-secondary: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis in mauris vitae dapibus. Vivamus placerat sapien a felis laoreet, eu gravida tortor laoreet. Curabitur vulputate mauris non risus accumsan, et varius metus ullamcorper. Integer lectus lorem, dapibus quis dictum venenatis, volutpat non velit. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Integer vehicula dignissim nisl in egestas. Nullam porta erat ut ligula aliquam, et fringilla sapien laoreet. Morbi et purus et purus tristique dignissim.

Text-tertiary: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis in mauris vitae dapibus. Vivamus placerat sapien a felis laoreet, eu gravida tortor laoreet. Curabitur vulputate mauris non risus accumsan, et varius metus ullamcorper. Integer lectus lorem, dapibus quis dictum venenatis, volutpat non velit. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Integer vehicula dignissim nisl in egestas. Nullam porta erat ut ligula aliquam, et fringilla sapien laoreet. Morbi et purus et purus tristique dignissim.

Warning block: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis in mauris vitae dapibus. Vivamus placerat sapien a felis laoreet, eu gravida tortor laoreet. Curabitur vulputate mauris non risus accumsan, et varius metus ullamcorper. Integer lectus lorem, dapibus quis dictum venenatis, volutpat non velit. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Integer vehicula dignissim nisl in egestas. Nullam porta erat ut ligula aliquam, et fringilla sapien laoreet. Morbi et purus et purus tristique dignissim.

Error block: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis in mauris vitae dapibus. Vivamus placerat sapien a felis laoreet, eu gravida tortor laoreet. Curabitur vulputate mauris non risus accumsan, et varius metus ullamcorper. Integer lectus lorem, dapibus quis dictum venenatis, volutpat non velit. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Integer vehicula dignissim nisl in egestas. Nullam porta erat ut ligula aliquam, et fringilla sapien laoreet. Morbi et purus et purus tristique dignissim.

Confirm block: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis in mauris vitae dapibus. Vivamus placerat sapien a felis laoreet, eu gravida tortor laoreet. Curabitur vulputate mauris non risus accumsan, et varius metus ullamcorper. Integer lectus lorem, dapibus quis dictum venenatis, volutpat non velit. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Integer vehicula dignissim nisl in egestas. Nullam porta erat ut ligula aliquam, et fringilla sapien laoreet. Morbi et purus et purus tristique dignissim.

Info block: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis in mauris vitae dapibus. Vivamus placerat sapien a felis laoreet, eu gravida tortor laoreet. Curabitur vulputate mauris non risus accumsan, et varius metus ullamcorper. Integer lectus lorem, dapibus quis dictum venenatis, volutpat non velit. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Integer vehicula dignissim nisl in egestas. Nullam porta erat ut ligula aliquam, et fringilla sapien laoreet. Morbi et purus et purus tristique dignissim.

Info block: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis in mauris vitae dapibus. Vivamus placerat sapien a felis laoreet, eu gravida tortor laoreet. Curabitur vulputate mauris non risus accumsan, et varius metus ullamcorper. Integer lectus lorem, dapibus quis dictum venenatis, volutpat non velit. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Integer vehicula dignissim nisl in egestas. Nullam porta erat ut ligula aliquam, et fringilla sapien laoreet. Morbi et purus et purus tristique dignissim.


Texts colors

Main color shemes

  • Default text
  • text-primary
  • text-secondary
  • text-tertiary

Meaningfull color shemes

  • text-negative
  • text-warning
  • text-positive
  • text-info
  • text-disabled
  • text-strike
  • text-link

shades of greys

  • text-dark
  • text-dark85
  • text-darkgrey
  • text-mediumgrey
  • text-anothergray
  • text-light
  • text-lightgrey
  • text-light
  • text-white

rainbow

  • text-blueprimary
  • text-middleblue
  • text-lightblue1
  • text-green
  • text-yellow
  • text-orange
  • text-red
  • text-red2
  • text-purple

Background colors

Color sheme

  • Default bg
  • bg-primary
  • bg-secondary
  • bg-tertiary

Meanfull colors

  • bg-error
  • bg-confirm
  • bg-warning
  • bg-infocolor

Shades of grey

  • bg-error
  • bg-positivecolor
  • bg-primarycolor
  • bg-darkgrey
  • bg-mediumgrey
  • bg-mediumgrey
  • bg-infocolor
  • bg-blueprimary
  • bg-middleblue
  • bg-lightblue1
  • bg-green
  • bg-yellow
  • bg-orange
  • bg-red
  • bg-red2
  • bg-purple
  • bg-redbox
  • bg-dark
  • bg-dark85
  • bg-darkgrey
  • bg-mediumgrey
  • bg-anothergray
  • bg-lightgrey
  • bg-light
  • bg-white

Rainbow

  • bg-error
  • bg-positivecolor
  • bg-primarycolor
  • bg-secondarycolor
  • bg-darkgrey
  • bg-mediumgrey
  • bg-mediumgrey
  • bg-infocolor
  • bg-blueprimary
  • bg-middleblue
  • bg-lightblue1
  • bg-green
  • bg-yellow
  • bg-orange
  • bg-red
  • bg-red2
  • bg-purple
  • bg-redbox
  • bg-dark
  • bg-dark85
  • bg-darkgrey
  • bg-mediumgrey
  • bg-anothergray
  • bg-lightgrey
  • bg-light
  • bg-white

Bordered boxes

  • bordered
  • border-blueprimary
  • border-middleblue
  • border-lightblue1
  • border-green
  • border-yellow
  • border-orange
  • border-red
  • border-red2
  • border-purple
  • border-redbox
  • border-white
  • border-light
  • border-lightgrey
  • border-anothergray
  • border-mediumgrey
  • border-darkgrey
  • border-dark
  • border-error
  • border-confirm
  • border-primary
  • border-secondary
  • border-tertiary