Foundations
Colors

Colors


Colors

Colors make the UI easily understandable and help users to navigate through the app.

Text


text/primary
Colors.text.mainCalculating...
text/secondary
Colors.accent.mainCalculating...
text/disabled
Colors.state.disabledCalculating...

Accent


accent/primary
Colors.brand.mainCalculating...
accent/secondary
Colors.accent.mainCalculating...
accent/tertiary
Colors.state.disabledCalculating...
accent/dark-secondary
Colors.accent.darkCalculating...

Alert


critical/dark
Colors.alert.redDarkCalculating...
critical/primary
Colors.alert.redCalculating...
critical/bg
Colors.alert.redLightCalculating...

warning/dark
Colors.alert.yellowDarkCalculating...
warning/primary
Colors.alert.yellowCalculating...
warning/bg
Colors.alert.yellowLightCalculating...

success/dark
Colors.alert.greenDarkCalculating...
success/primary
Colors.alert.greenCalculating...
success/bg
Colors.alert.greenLightCalculating...

info/dark
Colors.alert.blueDarkCalculating...
info/primary
Colors.alert.blueCalculating...
info/bg
Colors.alert.blueLightCalculating...

Utility


disable/primary
Colors.state.disabledCalculating...
border/primary
Colors.state.disabledCalculating...
selected/primary
Colors.background.hoverLightCalculating...
bg/primary
Colors.background.mainCalculating...

Neutral


neutral/dark
Colors.neutral.greyDarkCalculating...
neutral/primary
Colors.neutral.greyCalculating...
neutral/bg
Colors.neutral.greyLightCalculating...