Colors

Ais Components uses a focused, black-and-gold color palette that can be used to render beautiful pages. By limiting the number of colors, we can build clean and consistent applications. AIS developers should embrace the challenge of working within our color palette.

Black text on a white background provides a crisp foundation. Pops of gold lead the eye to primary elements, and warm grays serve to provide page structure and soften secondary elements. Darker elements can provide contrast, but developers must be careful not to overwhelm the page. Semantic colors like danger (red) or success (green) must be used judiciously as they can easily throw a page out of balance.

Color Palette

Primary Colors

Use the primary colors for prominent page elements like table headers on listing pages, the primary action on a form, or informational alerts.

• primary
• bg-primary
• text-primary
• border-primary

• secondary
• bg-secondary
• text-secondary
• border-secondary

Grays

Use the gray palette to add structure to a page and take emphasis off secondary controls. ui-gray-50 is the background for our default variant. It is seen in default buttons, table headers, and alerts. Table striping also uses ui-gray-50.

ui-gray-900 is the same as secondary. It is a near-black gray used to reduce eye-strain. Add opacity to ui-gray-900 to de-emphasize secondary elements.

• ui-gray-50
• bg-ui-gray-50
• text-ui-gray-50
• border-ui-gray-50

• ui-gray-100
• bg-ui-gray-100
• text-ui-gray-100
• border-ui-gray-100

• ui-gray
• bg-ui-gray
• text-ui-gray
• border-ui-gray

• ui-gray-cool
• bg-ui-gray-cool
• text-ui-gray-cool
• border-ui-gray-cool

• ui-gray-900
• bg-ui-gray-900
• text-ui-gray-900
• border-ui-gray-900

Semantic Colors

After years of using Bootstrap and MAUI conventions, semantic colors are deeply ingrained in our UI practices. For better or worse, these techniques do not fully mesh with our new palette. We don't want gold/yellow associated with "warning", and red is called out in the brand manual as a color we should not use. Additionally, red and green markers have accessibility issues. Moving forward, these semantic markers must be used more judiciously.

Rules of thumb:

• Use primary, secondary, or default colors for elements you want to draw attention too. This includes alerts that are always present on a page.
• Use icons to add cues to controls and elements. We have standard icons for save, delete, cancel, and other actions.
• Use semantic colors on transient elements such as toasts or modals. Instead of having a "danger" delete button, move the "danger" designation into the modal where the action is confirmed. Conversely, allow success and failure states appear and disappear with a toast message.
• When using a semantic color, limit yourself to one color. For instance, it is okay to have a "danger" delete button for a specific resource -- especially if it is below the fold. However, it would be bad to have a "danger" delete button on each row of a table where you should prefer an icon. It is also not advised to mix buttons with semantic variants. We don't want a "success", "info", and "danger" buttons next to each other.

• info
• bg-info
• text-info
• border-info

• success
• bg-success
• text-success
• border-success

• warning
• bg-warning
• text-warning
• border-warning

• danger
• bg-danger
• text-danger
• border-danger

Semantic Colors - Light

The light versions of the semantic colors serve as backgrounds for our component variants. AisAlert uses the light colors by default. Other components, like AisButton use the outline modifier to trigger a mode that uses the lighter colors as a background.

• info-light
• bg-info-light
• text-info-light
• border-info-light

• success-light
• bg-success-light
• text-success-light
• border-success-light

• warning-light
• bg-warning-light
• text-warning-light
• border-warning-light

• danger-light
• bg-danger-light
• text-danger-light
• border-danger-light