On this page
Color
When used appropriately, color can help guide users towards successful completion of their tasks and workflows. Color use on a page or in an interface can communicate and reinforce meaning, create moments of visual emphasis, and overall aid can in someone’s understanding of a page’s structure and hierarchy. In addition, color is used to communicate the UW brand.
The Solstice design system includes several palettes of colors, each with their specific intended use. The color palettes in the design system are: brand accent, neutrals, semantic, and decorative colors.
Guiding Principles
- Use color sparingly and intentionally. Using too much color can be counter productive, making visual emphasis harder, and can create unnecessary cognitive burden on users.
- Use color to communicate meaning, to clarify the information hierarchy, and for visual emphasis.
- Reinforce meaning — Whenever possible, leverage the defined semantic color palettes to reinforce the meaning of a message or an object’s status (e.g. blue indicates an action). Doing this minimizes a user’s cognitive load. In general, always be consistent in the use of a color – only associate a single color with an object or state.
- Clarify information hierarchy – Similarly, subtle shifts in color values (darkness/lightness) create depth and spatial associations that can communicate distinct zones or layers to a user, and therefore clarify an information hierarchy. In this design system, this is accomplished using different values of the neutrals palette for panels and surfaces.
- Visual emphasis – For semantic colors, there are emphasis and subtle color groupings, that can be used to create different degrees of visual emphasis in surfaces.
- Don’t rely on color alone. Ensure accessibility by ensuring color alone isn’t used to communicate meaning, hierarchy, or emphasis. Supplement color usage with text, icons, sizing, graphic patterned backgrounds (e.g. information visualizations), and positioning of elements to communicate these to a user.
- Maintain sufficient color contrast. Ensure colors for body text has a sufficient contrast ratio to meet accessibility guideline WCAG 2.1 AA criteria 1.4.3 (for more information on this requirement, see UW’s Accessible Technology color contrast page). The color groupings in the design system have already been determined to meet this accessibility criteria.
Color Palettes
Subdued and Prominent Color Groups
For most color palettes, there are two different color groups: Subdued and Prominent. By default use the Subdued color group for most UI elements in most cases. Subdued colors also respect Dark Mode can change to provide more contrast.
However, when it is important to create a moment of visual emphasis, such as Layout or Actionable elements, the Prominent color group should be used. Promint colors do not change and are unaffected by Dark Mode settings.
Brand
Use for communicating the UW brand. While UW has an expanded brand accent color palette, we recommend limiting the usage of brand colors to Spirit Purple and Husky Gold (beige) to maintain a sleek visual design.
Prominent
| Color | Light | Dark |
|---|---|---|
#4b2e83$purple2 | -- | |
#b7a57a$beige | -- |
Subdued
| Color | Light | Dark |
|---|---|---|
#dbd5e6$purple2-100 | #0f091a$purple2-900 | |
#f1ede4$beige-100 | #252118$beige-900 |
Do:
- only use the base color (no variants)
- primarily use for boilerplate elements
- use sparingly
- use a subtle variation for other components outside of the boilerplate
Do not:
- use for actionable elements
- use borders for these colors
- use a second brand color, as this may be misinterpreted as having semantic meaning
Neutrals
Neutral colors are the default colors used for most surfaces, shadows, and typography. They don’t typically have a meaning associated with them, though they can imply things like disabled states.
Do:
- use for text, surfaces, borders, and dividers
Do not:
- use for actionable elements
- use for boilerplate backgrounds
Semantic
Semantic colors are used to denote which are actionable elements, messaging type (i.e. informational, warning, critical, or success), an object’s workflow state (e.g. draft, completed, suspended, canceled), and general system status (e.g. which elements have been recently updated or created). Therefore, each color in the semantic color palette has a distinct meaning but should have consistent use in all contexts.
Actionable
Action colors are used to pull focus to and communicate which are actionable UI elements. They should be reserved for things like buttons, links, calls-to-action, collapse controls, tabs, etc.
Note: Because Bootstrap by default provides action element colors for various states – e.g. onclick, onhover, selected – these are not defined here.
Prominent (default)
| Color | Light | Dark |
|---|---|---|
#2f68cb$blue2 | -- | |
#ffffff$white | -- |
Subdued
| Color | Light | Dark |
|---|---|---|
#cfe2ff$blue-100 | #031633$blue-900 | |
#052c65$blue-800 | #6ea8fe$blue-300 |
Related components: Button, Link
Messaging
Messaging colors are used to convey the status or outcome of a user action or system event. They help users quickly understand what’s happening and what they may need to do.
Success
Success is used to confirm that an action has been completed successfully. Success can also be used to convey confirmation messages or statuses that are positive and that do not require any immediate action from the user.
Subdued (default)
| Color | Light | Dark |
|---|---|---|
#d1e7dd$green-100 | #051b11$green-900 | |
#a3cfbb$green-200 | #0f5132$green-700 | |
#0a3622$green-800 | #75b798$green-300 |
Prominent
| Color | Light | Dark |
|---|---|---|
#198754$green | -- | |
#ffffff$white | -- |
Related components: Alert, Badge
Crictical
Critical is used as the color of highest importance which implies that an item needs immediate attention, or that an action is impossible, blocked, or has resulted in an error.
Subdued (default)
| Color | Light | Dark |
|---|---|---|
#f8d7da$red-100 | #2c0b0e$red-900 | |
#f1aeb5$red-200 | #842029$red-700 | |
#58151c$red-800 | #ea868f$red-300 |
Prominent
| Color | Light | Dark |
|---|---|---|
#cb444a$red2 | -- | |
#ffffff$white | -- |
Related components: Button, Alert, Badge
Warning
Warning colors are used to communicate future consequences of an action or statuses that are in-progress, pending, or require user intervention, but do not prevent a task from being completed.
Subdued (default)
| Color | Light | Dark |
|---|---|---|
#fff3cd$yellow-100 | #332701$yellow-900 | |
#ffe69c$yellow-200 | #997404$yellow-700 | |
#664d03$yellow-800 | #ffda6a$yellow-300 |
Prominent
| Color | Light | Dark |
|---|---|---|
#ffc107$yellow | -- | |
#000000$black | -- |
Related components: Alert, Badge
Info
Info colors are used to highlight non-critical information that help the user better understand the current context, or provide benefit, like tips or incentives.
Subdued (default)
| Color | Light | Dark |
|---|---|---|
#cff4fc$cyan-100 | #032830$cyan-900 | |
#9eeaf9$cyan-200 | #087990$cyan-700 | |
#055160$cyan-800 | #6edff6$cyan-300 |
Prominent
| Color | Light | Dark |
|---|---|---|
#0dcaf0$cyan | -- | |
#000000$black | -- |
Related components: Alert, Badge
Workflow States
For objects in a workflow, colors may be used to better communicate the state of an object (e.g. object colors, or badges attached to objects). The following color assignments offer guidance for typical workflow states:
Draft State
Item that is not in use or ready for review or initial state after creating the item.
Examples: Draft, In Progress, Not Started, Unscheduled
Subdued (default)
| Color | Light | Dark |
|---|---|---|
| #e2e3e5 | #161719 | |
| #2b2f32 | #a7acb1 |
Prominent
| Color | Light | Dark |
|---|---|---|
#6c757d$gray-600 | -- | |
#ffffff$white | -- |
Related components: Badge
Ready State
Item(s) created/drafted and awaiting further input or review.
Examples: Approved, Planned, Pending, Open, Final Edits
Suspended State
Item on hold, not in use but may be used in the future.
Examples: Suspended, Exempt, Inactive, Locked
Suspended State
Item on hold, not in use but may be used in the future.
Examples: Suspended, Exempt, Inactive, Locked
Completed State
Finished item now in use. No further changes expected.
Examples: Offered, Official, Completed, Scheduled, Active, Generated, Published
Canceled State
Blocked or discarded item.
Examples: Canceled, Error, Closed
Academic Terms (Quarters)
Academic terms are differentiated using distinct colors for each term. Sub-terms (e.g. Summer A and B terms) should use the color associated with the parent term. Note that while there is some proximity to other semantic colors, academic term colors should only be used in context, and ideally in conjunction with the quarter labels so as to clearly indicate their meaning.
| Color | Light | Dark |
|---|---|---|
| #ffc8b7 | -- | |
| #ccddff | -- | |
| #ccffcc | -- | |
| #fcf990 | -- |
Do:
- use in conjunction with a quarter/term label whenever space allows (see Color General Principles above)
- use only black text (#000000) labels
Do not:
- if no label is present, do not use colors against a gray background as they do not provide sufficient contrast to be accessible
Decorative Colors
When it is not necessary to communicate semantics, decorative colors can be used to differentiate objects in an interface – they are primarily used for data visualizations or objects like courses, schedule blocks, etc.
| Color | Light | Dark |
|---|---|---|
| #ac4bb9 | -- | |
| #008099 | -- | |
| #bd4e05 | -- | |
| #787a00 | -- | |
| #c84674 | -- | |
| #735696 | -- | |
| #a06b22 | -- | |
| #5b6ecd | -- |
Do:
- use only the base color (no variants), when possible (exception: heatmap visualizations)
- use only black or white text overlaid on a decorative color, depending on which provides the most contrast
- use in the order listed to maximize the visual distinctions between objects or data sets
Do not:
- use borders for decorative colors
Color Usage in Data Visualizations
Single Data Series: Use when there is a single data series. For example, a bar chart, column chart, or a single line chart.
- Note: To highlight one piece of data from a data set, use a combination of one decorative color and one color from the neutral palette. Use the decorative color for the data you want to highlight.
Multiple (Categorical) Data Sets: Use multiple decorative colors when you need to differentiate two or more unrelated data categories from each other.
Ranked or Density Data Sets: These type of data sets use steps within a single hue, and color lightness to indicate a range from low to high.