UI Colors

User Interface Colors

Pelican attempts to provide more clarity in the user interface by introducing three colors called UI, UI Light, and UI Priority. These are used on form controls, priority interface actions, and supporting interface elements.

Like Brand Colors and Status colors, these can be changed. Change with great care as they have been chosen in accordance with usability and color contrast guidelines.

Using UI Colors

UI

The UI color is often used as:

• Border colors on Form Controls
• Auxiliary choice buttons among several buttons in a row when Brand or Status themed buttons must also appear
• The smaller buttons immediately adjacent to user interface elements

UI Light

The UI Light color is often used as:

• The disabled color for Form Controls
• The background color to UI color uses
• Some items’ border colors

UI Priority

The UI Priority color is taken from calls to action and link colors around the web. It’s often used as:

• Activated Form Controls
• Buttons which need to appear more prominently than other UI buttons
• Links in text

UI Color Class List

The UI Colors are implemented as background colors and as text colors. The classes needed to apply these colors are listed here.

Resources

• Bootstrap Documentation - Color