Colors

Use color intentionally. It’s not decoration. Color is supposed to be functional.

Colors and Shades in User Interface (UI) Design

The color system helps you apply color to your UI in a meaningful way. In this system, we have a primary and a secondary color to represent the brand. We derived different shades for every defined color in TaxBandits.

Dark and light variants of each color can be applied to UI in different ways. Color themes are designed to be harmonious, ensure accessible text, and distinguish UI elements and surfaces from one another.

General guidelines

Every color has specific guidelines for meaning. We honor these guidelines in order to maintain consistency across the product.
No Dark Shade should be used as background
Two additional shades defined: :active and :hover. These additional shades should only be used for very specific cases.

Color theme creation

TaxBandits Design System comes designed with a built-in, baseline theme that can be used as-is, straight out of the proverbial box.

This includes default colors for:

Primary and secondary colors
Variants of primary and secondary colors
Additional UI colors, such as colors for backgrounds, surfaces, errors, typography, and iconography.

For white label we have only derived primary and secondary colors tints and shades for matching their brands, and rest of the color will be same as TaxBandits Color System

Brand Colors

In rare cases, it's handy to use our base semantic colors. They are aliases for the respective 500 shade of each color and hold semantic meaning.

Primary Color

Primary 500

Hex: #D64000

RGB: rgba(214, 64, 0, 100%)

Variable: Primary/Orange

Secondary Color

Secondary 500

Hex: #D64000

RGB: rgba(214, 64, 0, 100%)

Variable: Primary/Orange

Primary Shades

Primary 100

Hex: #FEF6F2

RGB: rgba(214, 64, 0, 1)

Variable: orange-lighten-1

Primary 500

Hex: #D64000

RGB: rgba(214, 64, 0, 100%)

Variable: Primary/Orange

Secondary Shades

Secondary 100

Hex: #E5F2FF

RGB: rgba(229, 242, 255, 1)

Variable: ttertiary-lighten-1

Secondary 500

Hex: #0A77D6

RGB: rgba(10, 119, 214, 1)

Variable: Secondary

Secondary 600

Hex: #005AA9

RGB: rgba(0, 90, 169, 1)

Variable: Secondary darken

Semantic Colors

Success

In rare cases, it's handy to use our base semantic colors. They are aliases for the respective 500 shade of each color and hold semantic meaning.

Success 50

Hex: #F9FFFA

RGB: rgba(249, 255, 250, 1)

Variable: Success-lighten-3

Success 100

Hex: #EDFAF0

RGB: rgba(237, 250, 240, 1)

Variable: Success-lighten-1

Success 200

Hex: #D9F2DE

RGB: rgba(217, 242, 222, 1)

Variable: Success-lighten-2

Success 500

Hex: #EDFAF0

RGB: rgba(237, 250, 240, 1)

Variable: Success-lighten-1

Warning

In rare cases, it's handy to use our base semantic colors. They are aliases for the respective 500 shade of each color and hold semantic meaning.

Warning 100

Hex: #FFF0DA

RGB: rgba(255, 240, 218, 1)

Variable: Warning-lighten-2

Warning 200

Hex: #F8DFBB

RGB: rgba(248, 223, 187, 1)

Variable: Warning-lighten-1

Warning 500

Hex: #75492A

RGB: rgba(117, 73, 42, 1)

Variable: Warning

Error

In rare cases, it's handy to use our base semantic colors. They are aliases for the respective 500 shade of each color and hold semantic meaning.

Error 100

Hex: #FFF4F4

RGB: rgba(255, 244, 244, 1)

Variable: Danger-lighten-1

Error 200

Hex: #F7CDCD

RGB: rgba(247, 205, 205, 1)

Variable: Danger-lighten-2

Error 600

Hex: #CA140B

RGB: rgba(202, 20, 11, 1)

Variable: Danger

Info

In rare cases, it's handy to use our base semantic colors. They are aliases for the respective 500 shade of each color and hold semantic meaning.

Info 100

Hex: #F1F7FF

RGB: rgba(241, 247, 255, 1)

Variable: Info lighten 2

Info 200

Hex: #DDE9FA

RGB: rgba(221, 233, 250, 1)

Variable: info-lighten-1

Note

In rare cases, it's handy to use our base semantic colors. They are aliases for the respective 500 shade of each color and hold semantic meaning.

Note 100

Hex: #FFF9EB

RGB: rgba(255, 249, 235, 1)

Variable: Note-lighten-2

Note 200

Hex: #FDF1D5

RGB: rgba(253, 241, 213, 1)

Variable: Note-lighten-1

Note 500

Hex: #966C00

RGB: rgba(150, 108, 0, 1)

Variable: Note

Purple

In rare cases, it's handy to use our base semantic colors. They are aliases for the respective 500 shade of each color and hold semantic meaning.

Purple 200

Hex: #F8F3FF

RGB: rgba(61, 12, 123, 1)

Variable: Purple

Purple 500

Hex: #3D0C7B

RGB: rgba(253, 241, 213, 1)

Variable: Note-lighten-1

Byzantium

This Indicates the sent to agency message for our Application

Byzantium 200

Hex: #FFEFF7

RGB: rgba(61, 12, 123, 1)

Variable: Purple

Byzantium 500

Hex: #7C0E64

RGB: rgba(253, 241, 213, 1)

Variable: Note-lighten-1

Neutral Colors

In rare cases, it's handy to use our base semantic colors. They are aliases for the respective 500 shade of each color and hold semantic meaning.

Neutral 50

Hex: #FBFDFF

RGB: rgba(251, 253, 255, 1)

Variable: tertiary-lighten-3

Neutral 100

Hex: #F2F6FA

RGB: rgba(242, 246, 250, 1)

Variable: Disabled

Neutral 200

Hex: #C4D2E4

RGB: rgba(196, 210, 228, 1)

Variable: grey-lighten-2

Neutral 300

Hex: #EDFAF0

RGB: rgba(237, 250, 240, 1)

Variable: tertiary-lighten-1

Neutral 400

Hex: #4C6177

RGB: rgba(76, 97, 119, 1)

Variable: Grey

Neutral 500

Hex: #142535

RGB: rgba(20, 37, 53, 1)

Variable: Black

Primary

Lorem ipsum dolor sit amet consectetur adipisicing elit. Id illum non ratione quibusdam ipsum neque atque fuga, quas reprehenderit ex velit sit modi enim commodi, officiis quidem corrupti nulla ducimus?

Secondary

Tertiary

Success

Grey

Warning

Danger

Info

Purple

Neutral

White Label

What is White Label?

White label refers to a business practice where one company produces a product or service that other companies rebrand and market as their own. This approach allows businesses to focus on selling and promoting without investing in product development or infrastructure.

Note: In the image above, the highlighted sections represent the colors that our white-label clients can customize to match their brand and use in their own products.

Primary

#D23F00

#C24008

#FEF6F2

Secondary

#0A77D6

#014D90

#E5F2FF

Tertiary

#0E4678

#E5F2FF

#E9F0F7

#FBFDFF

Success

#017517

#EDFAF0

#D9F2DE

#F9FFFA

Grey

#4C6177

#94A9C3

#C4D2E4

#F4F6F8

Primary

This color used for primary action inour website, so that user can navigate easily

Color variables

var(--bs-primary)

var(--bs-primary-darken-1)

Secondary

This color used for primary action inour website, so that user can navigate easily

Color variables

var(--bs-secondary)

var(--bs-secondary-darken-1)

var(--bs-secondary-lighten-1)

Success

This color used for primary action inour website, so that user can navigate easily

Color variables

var(--bs-success)

var(--bs-success-lighten-1)

var(--bs-success-lighten-2)

var(--bs-success-lighten-3)

Grey

This color used for primary action inour website, so that user can navigate easily

Color variables

var(--bs-grey)

var(--bs-grey-lighten-1)

var(--bs-grey-lighten-2)

var(--bs-grey-lighten-3)

Warning

This color used for primary action inour website, so that user can navigate easily

Color variables

var(--bs-warning)

var(--bs-warning-lighten-1)

var(--bs-warning-lighten-2)

Danger

This color used for primary action inour website, so that user can navigate easily

Color variables

var(--bs-danger)

var(--bs-danger-lighten-1)

var(--bs-danger-lighten-2)

Info

This color used for primary action inour website, so that user can navigate easily

Color variables

var(--bs-info)

var(--bs-info-lighten-1)

var(--bs-info-lighten-2)

Purple

This color used for primary action inour website, so that user can navigate easily

Color variables

var(--bs-purple)

var(--bs-purple-lighten-1)