Colors

We have different colors that are divided into two parts, the first part is the surface colors that cover the overall theme of an application or website, the second part is the gamut colors that are used in different components and sections.

Layout Surfaces

Surface colors are used for use in layouts and some components. For example, we use surfaces for the default color in components. Surfaces also have two constant colors called light and dark, which are black and white. The dark and light themes do not change and always have fixed values. These colors are used in some specific components.

Lightest

Lighter

Light

Surface

Dark

Darker

Darkest

Color Surfaces

Color Surfaces are a set of color palettes used to establish the overall visual theme, background, text, and border color of an application or website. A user provides a base color for each Surface category (e.g., primary, secondary, success, warning, danger), and the system automatically generates a seven-shade gradient, ranging from Lightest Surface to Darkest Surface. These gradients provide a range of colors suitable for layouts and certain components, ensuring visual consistency. The Surface colors are used to provide a consistent backdrop for more specific component colors and are designed to work as foundational elements, rather than for detailed styling.

primary

Surface Lightest

Surface Lighter

Surface Light

Surface

Surface Dark

Surface Darker

Surface Darkest

secondary

Surface Lightest

Surface Lighter

Surface Light

Surface

Surface Dark

Surface Darker

Surface Darkest

success

Surface Lightest

Surface Lighter

Surface Light

Surface

Surface Dark

Surface Darker

Surface Darkest

warning

Surface Lightest

Surface Lighter

Surface Light

Surface

Surface Dark

Surface Darker

Surface Darkest

danger

Surface Lightest

Surface Lighter

Surface Light

Surface

Surface Dark

Surface Darker

Surface Darkest

Color spectrum

We have preset colors for most components and branding that you can change as you wish. Usually, the primary and secondary colors are your brand colors, and the remaining colors indicate successful operations, ghost, and warnings. There is also a neutral color called ghost in the color scheme that is used for special situations. Each color spectrum has two text colors, the contrast text color is suitable for the color range 400 to 50 and the text color is used for the range 500 to 950.

Branding Colors

primary 50

primary 100

primary 200

primary 300

primary 400

primary 500

primary 600

primary 700

primary 800

primary 900

primary 950

secondary 50

secondary 100

secondary 200

secondary 300

secondary 400

secondary 500

secondary 600

secondary 700

secondary 800

secondary 900

secondary 950

Conceptual colors

success 50

success 100

success 200

success 300

success 400

success 500

success 600

success 700

success 800

success 900

success 950

warning 50

warning 100

warning 200

warning 300

warning 400

warning 500

warning 600

warning 700

warning 800

warning 900

warning 950

danger 50

danger 100

danger 200

danger 300

danger 400

danger 500

danger 600

danger 700

danger 800

danger 900

danger 950