# Color Palette

###### Comes with 60 unique color pallets, that uses one prime to generate all pallets.

## 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`

#### Hi Sunny,

how can I help you today?
Analyze my data

Create a new report

Summarize my Calendar

App Builder
Unlock limitless design potential with 16+ layout combinations and extensive customization options—tailor your dashboard to fit your exact needs.
Header position fixed
Navigation full height
Navigation position fixed
Navigation collapsed
Navigation Minified
Dark Navigation
Colorblind Mode
High Contrast Mode