Impressionistic colors

State Preview Postfix Button Text Background Alerts
Success *-success btn-success color-success bg-success alert-success
Warning *-warning btn-warning color-warning bg-warning alert-warning
Danger *-danger btn-danger color-danger bg-danger alert-danger
Info *-info btn-info color-info bg-info alert-info
Primary *-primary btn-primary color-primary bg-primary alert-primary
Secondary *-secondary btn-secondary color-secondary bg-secondary alert-secondary
Fusion *-fusion btn-fusion color-fusion bg-fusion alert-fusion
Dark *-dark btn-dark color-dark bg-dark alert-dark
Light *-light btn-light color-white bg-light alert-light

Success pallet

Success color pallet will be used for positive feedback and user assurance. We have selected teal with a hint of green to stand out and cast the shadow of quality, healing, freshness and peace
Background Postfix Example usage
*-success-50 bg-success-50
*-success-100 bg-success-100
*-success-200 bg-success-200
*-success-300 bg-success-300
*-success-400 bg-success-400
*-success-500 bg-success-500
*-success-600 bg-success-600
*-success-700 bg-success-700
*-success-800 bg-success-800
*-success-900 bg-success-900

Warning pallet

Warning color pallet lets users know to be catious and careful. It can envoke the feeling of curiosity, confidence, sociability, and bravery
Background Postfix Example usage
*-warning-50 bg-warning-50
*-warning-100 bg-warning-100
*-warning-200 bg-warning-200
*-warning-300 bg-warning-300
*-warning-400 bg-warning-400
*-warning-500 bg-warning-500
*-warning-600 bg-warning-600
*-warning-700 bg-warning-700
*-warning-800 bg-warning-800
*-warning-900 bg-warning-900

Danger pallet

This color as an attention getter. Use this color as less as possible to have maximum impact. This color is connected to ecitement, love, strength, and energy
Background Postfix Example usage
*-danger-50 bg-danger-50
*-danger-100 bg-danger-100
*-danger-200 bg-danger-200
*-danger-300 bg-danger-300
*-danger-400 bg-danger-400
*-danger-500 bg-danger-500
*-danger-600 bg-danger-600
*-danger-700 bg-danger-700
*-danger-800 bg-danger-800
*-danger-900 bg-danger-900

Secondary pallet

Bootstrap uses this color for secondary elements. It is a neutral color that is used to balance the primary colors.
Background Postfix Example usage
*-secondary-50 bg-secondary-50
*-secondary-100 bg-secondary-100
*-secondary-200 bg-secondary-200
*-secondary-300 bg-secondary-300
*-secondary-400 bg-secondary-400
*-secondary-500 bg-secondary-500
*-secondary-600 bg-secondary-600
*-secondary-700 bg-secondary-700
*-secondary-800 bg-secondary-800
*-secondary-900 bg-secondary-900

Info pallet

This particular pallet helps you build trust, it has the ability to project competence, peace, loyalty and strength to your users
Background Postfix Example usage
*-info-50 bg-info-50
*-info-100 bg-info-100
*-info-200 bg-info-200
*-info-300 bg-info-300
*-info-400 bg-info-400
*-info-500 bg-info-500
*-info-600 bg-info-600
*-info-700 bg-info-700
*-info-800 bg-info-800
*-info-900 bg-info-900

Primary pallet

This is the primary color of the app, and is widely used in almost all of the elements. The color shows ambition, sprituality, royalty and luxury
Background Postfix Example usage
*-primary-50 bg-primary-50
*-primary-100 bg-primary-100
*-primary-200 bg-primary-200
*-primary-300 bg-primary-300
*-primary-400 bg-primary-400
*-primary-500 bg-primary-500
*-primary-600 bg-primary-600
*-primary-700 bg-primary-700
*-primary-800 bg-primary-800
*-primary-900 bg-primary-900

Fusion pallet

Fusion is a alternation of primary pallet. It is dramatic and bold. It has class and a sense of formality combined with security.
Background Postfix Example usage
*-fusion-50 bg-fusion-50
*-fusion-100 bg-fusion-100
*-fusion-200 bg-fusion-200
*-fusion-300 bg-fusion-300
*-fusion-400 bg-fusion-400
*-fusion-500 bg-fusion-500
*-fusion-600 bg-fusion-600
*-fusion-700 bg-fusion-700
*-fusion-800 bg-fusion-800
*-fusion-900 bg-fusion-900

Light pallet

Bootstrap uses this color for light elements. It is a light color that is used to balance the primary colors.
Background Postfix Example usage
*-light-50 bg-light-50
*-light-100 bg-light-100
*-light-200 bg-light-200
*-light-300 bg-light-300
*-light-400 bg-light-400
*-light-500 bg-light-500
*-light-600 bg-light-600
*-light-700 bg-light-700
*-light-800 bg-light-800
*-light-900 bg-light-900