The Colors of the Design System

Design principles, and how to create an application that fits perfectly within the Design System ecosystem, include a color palette that comes from Finance Active's visual identity.

 

Palette

Color Name Hex Code

 

Primary #1C3966

 

Secondary #2EA7AA

 

Default #37404E

 

Success #4CAF50

 

Warning #FF8E00

 

Alert #ED412C

 

Info #008CBA

 

Filter #D3E4F8

 

Simulation #FDE3A7

 

Finact #B3A16E

 

Fairways #E95053

 

Insito #2EA7AA

 

Violet #9F1BB7

 

Neutral #888888

 

White #FFFFFF

 

Very Light Gray #F3F3F3

 

Light Gray #E6E6E6

 

Gray #CCCCCC

 

Medium Gray #6A7480

 

Dark Gray #37404E

 

Black #000000

 

Usage

You can use each color of the palette:

  • For texts with the .c- prefix, e.g. .c-primary.
  • For backgrounds with the .bg- prefix. The -light and -dark lighten or darken the color.

Usage.png

 

Hover

You can add a hover class on each element using a background class .bg-, i.e. .bg-hover.

 

See Finance Active's Design System for more details.

Was this article helpful?
0 out of 0 found this helpful