Color

Functional
Grass
#4AA033
Azure
#007DC6
Honey
#F8B400
Slate
#BED4E3
Dark Slate
#7895a9
Prussian
#0B4B75
Dark Navy
#162530
Cloud
#FFFFFF
Lunar Eclipse
#EFF3F6
Smoke
#DDDDDD
Stone
#ACACAC
Dark Stone
#63636A
Feedback
Light Grass
#D8EACC
Light Azure
#C5DBF2
Light Honey
#FBEECA
Light Danger
#DFA094
Danger
#D22200
Info coming

Data Visualization

Data should be clear, presented in a meaningful way, and not overly decorative.

Progress bar
Green indicates that the goal was hit, yellow is X% – X%, and red is less than X%.

Meter Charts


Categorical Color Combos
Coming soon

Grid System

Coming soon

Typography

Coming soon

Iconography

TypeIconCode
Cancel/Discard/Close
<mat-icon svgIcon="close"></mat-icon>
Edit
<mat-icon svgIcon="square-edit-outline"></mat-icon>
Caret Up
<mat-icon svgIcon="chevron-up"></mat-icon>
Caret Down
<mat-icon svgIcon="chevron-down"></mat-icon>
Plus
<mat-icon svgIcon="plus"></mat-icon>
Minus
<mat-icon svgIcon="minus"></mat-icon>
Coming soon

Buttons

Coming soon

Dialogs

Coming soon

Tooltips/Popovers

Coming soon

Form Elements

Coming soon

Data Tables

Coming soon

Navigation

Coming soon

Tabs

Coming soon

On-off Switches

Coming soon

Date & Time Pickers

Coming soon

Checkboxes

Coming soon

Alerts

Coming soon

Dropdown Menus

Coming soon

Pagination

Coming soon

Tab Content