Dark Color Schemes

On This Page

Introduction

Dark color schemes provide a modern, professional appearance that reduces eye strain and creates visual consistency across your site. Appian offers three dark color schemes: Charcoal, Navy, and Plum. These schemes were specifically designed to give a more professional and polished look than using plain black. Each color scheme has predefined colors that you can apply to various components and layouts throughout your site.

This page provides:

Information on where to select dark color schemes in your application.
Guidance on using dark color schemes consistently throughout your site.
Examples and hex codes for each dark color scheme.

Where to select dark color schemes

You can apply dark color schemes in the following locations:

Choose a dark color scheme color for the backgroundColor parameter of the following components:
- Certain layouts: Card layout, form layout, wizard layout, header content layout, and pane layout (configured in the pane component).
- Title bar templates: Full header template, image header template, and sidebar template.
In a site object, when configuring the navigation bar, choose a dark color scheme to set predefined colors for the navigation bar background color, selected page highlight color, accent color, and loading bar color.

Creating a consistent dark color scheme

Appian offers three dark color schemes: Charcoal, Navy, and Plum. To create a consistent style and user experience across your site, use the same color scheme for your site branding and all user interfaces. Avoid mixing dark and non-dark color scheme pages.

To apply a dark color scheme to your site:

In your site object, under Background Color, click TRY A DARK COLOR SCHEME.
For Dark Color Scheme, choose Charcoal, Navy, or Plum, then click DONE. The navigation bar background color, selected page highlight color, accent color, and loading bar color update to use predefined hex codes.
In the interface for each site page, use a form, wizard, pane, or header content layout with the backgroundColor parameter set to the same color scheme: "CHARCOAL_SCHEME", "NAVY_SCHEME", or "PLUM_SCHEME".
1. If you're using a card header in your header content layout, enter the site navigation bar's hex code as the value of the card header's style parameter.
2. If you're using a form or wizard layout, use a full header bar, image header bar, or sidebar template with the backgroundColor parameter set to the same color scheme.
Put the page's contents into card layouts with the style parameter of each card layout set to the same color scheme.

Limitations

The following interface elements cannot use dark color schemes:

Record lists
Related action modals
The news tab in records
The related actions tabs in records

These elements use the default white background. For sites that include any of these elements, use the default background on all site pages.

Card styling with dark color schemes

When using dark color schemes, cards should not use borders or shadows. Instead, the predefined colors use a slightly lighter tint of the dark background color to help cards stand out.

For detailed card styling guidelines, see the Card Layout guidance in the SAIL Design System.

Dark color schemes details

For each dark color scheme, we've provided an example of the scheme used in a site dashboard and the list of hex codes for the color scheme.

The hex codes correspond to the site's header bar color, selected highlight color, accent color, and loading bar color. For more information on configuring these site branding colors, see Designing Sites and Portals.