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.
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.