This documentation provides a full spectrum of color palettes, suited for our UI design that work harmoniously with MaGIC brand colors.

There are 2 main palettes heavily used on MaGIC platform, which is Grayscale and Brand Color

MaGIC brand colors should be used sparingly on most UI elements. Ideally, they are limited to primary actions or accents within the application.

Certain colors have inherent meaning for a large majority of users, although we recognize that cultural differences are plentiful. For example, we use red (crimson) to communicate an error, green (medium sea green) to indicate success, yellow to indicate warning and blue (cadet blue) for general information.

Our grays can be used on most UI elements but should be limited to Background color, Text colors, Border color & SVG fill colors

These are logo SVGs that can be downloaded straight from the site.

These are sample symbol SVGs that can be downloaded straight from the site.

These are icons in SVGs that can be downloaded straight from the site. Change the icon color to white when designing with dark components.

These are Gnomes line that can be downloaded straight from the site. Gnome line are used to highlight branding presents and indication when selected component are on hover state.

These are a few example of form components.

These are an example of tabs components.

These are an example of accordion components.

These are a few example of card components. Note that card design are flexible and can be compose with other small components to create a unique component.

These are a few example table components. Table component consist of three (3) part. Header, Rows and Caption