Uihub

Appearance

Color ​

Usage ​

See design usage guidelines

Use colors to express emotions, reflect your brand identity, and create visual continuity across components and products.

Find below the vairous colors that were used throughout the design system.

Primary Colors ​

.bg-primary-normal.bg-primary-normal-hover.bg-primary-normal-active.bg-primary-dark.bg-primary-dark-hover.bg-primary-dark-active.bg-primary-darker.bg-primary-light.bg-primary-light-hover.bg-primary-light-active

Grey Color ​

.bg-grey-normal.bg-grey-normal-hover.bg-grey-normal-active.bg-grey-dark.bg-grey-dark-hover.bg-grey-dark-active.bg-grey-darker.bg-grey-light.bg-grey-light-hover.bg-grey-light-active

Error Colors ​

.bg-error-normal.bg-error-normal-hover.bg-error-normal-active.bg-error-dark.bg-error-dark-hover.bg-error-dark-active.bg-error-darker.bg-error-light.bg-error-light-hover.bg-error-light-active

Success Colors ​

.bg-success-normal.bg-success-normal-hover.bg-success-normal-active.bg-success-dark.bg-success-dark-hover.bg-success-dark-active.bg-success-darker.bg-success-light.bg-success-light-hover.bg-success-light-active

Warning Colors ​

.bg-warning-normal.bg-warning-normal-hover.bg-warning-normal-active.bg-warning-dark.bg-warning-dark-hover.bg-warning-dark-active.bg-warning-darker.bg-warning-light.bg-warning-light-hover.bg-warning-light-active

Info ​

.bg-info-normal.bg-info-normal-hover.bg-info-normal-active.bg-info-dark.bg-info-dark-hover.bg-info-dark-active.bg-info-darker.bg-info-light.bg-info-light-hover.bg-info-light-active

Text Colors ​

  • .text-primary-normal
  • .text-primary-normal-hover
  • .text-primary-normal-active
  • .text-primary-dark
  • .text-primary-dark-hover
  • .text-primary-dark-active
  • .text-primary-darker
  • .text-primary-light
  • .text-primary-light-hover
  • .text-primary-light-active
  • .text-error-normal
  • .text-error-normal-hover
  • .text-error-normal-active
  • .text-info-dark
  • .text-error-dark-hover
  • .text-error-dark-active
  • .text-error-darker
  • .text-error-light
  • .text-error-light-hover
  • .text-error-light-active
  • .text-success-normal
  • .text-success-normal-hover
  • .text-success-normal-active
  • .text-success-dark
  • .text-success-dark-hover
  • .text-success-dark-active
  • .text-success-darker
  • .text-success-light
  • .text-success-light-hover
  • .text-success-light-active
  • .text-warning-normal
  • .text-warning-normal-hover
  • .text-warning-normal-active
  • .text-warning-dark
  • .text-warning-dark-hover
  • .text-warning-dark-active
  • .text-warning-darker
  • .text-warning-light
  • .text-warning-light-hover
  • .text-warning-light-active
  • .text-grey-normal
  • .text-grey-normal-hover
  • .text-grey-normal-active
  • .text-grey-dark
  • .text-grey-dark-hover
  • .text-grey-dark-active
  • .text-grey-darker
  • .text-grey-light
  • .text-grey-light-hover
  • .text-grey-light-active
  • .text-info-normal
  • .text-info-normal-hover
  • .text-info-normal-active
  • .text-info-dark
  • .text-info-dark-hover
  • .text-info-dark-active
  • .text-info-darker
  • .text-info-light
  • .text-info-light-hover
  • .text-info-light-active

Usage Guidelines ​