Lightning Design System Color Guidelines

Whether or not you’re constructing a customer-facing web site, designing a advertising electronic mail, or growing a product, in some unspecified time in the future, you’re going to speak about colours and branding. Which may be daunting for some of us, particularly non-designers. Nevertheless it doesn’t must be. Anybody can be taught a number of fundamentals to make these conversations much less overwhelming and to make the method extra goal. In our work growing Lightning Design System Shade Tips, the designers at Salesforce have created a number of guiding ideas for choosing colours which you can undertake.

Earlier than we get to the ideas, we’d like a mini lesson on shade concept. Mainly, shade concept gives construction to understanding shade and shade utilization. By rooting shade choices in clear rationale, it minimizes potential opinion conflicts, reduces subjectivity, and, importantly, saves time.

Rules scale back subjectivity

Inside visible design, shade conveys emotion, focuses the viewer’s consideration, and guides consumer actions. However, notion is subjective, which implies that visible design is subjective, too. The extra you possibly can outline the how and why behind a choice, the much less room there’s for interpretation. The ideas you create and outline are as much as you. However the next content material will share the ideas we use and why we use them:

Intentionality

The why behind a shade determination, usually pushed by the next three ideas indirectly. Instance state of affairs:

• Query: Why don’t we use pink for icons? 
• Rationale: We use pink to deliberately sign an error. If we use pink in different contexts, it will scale back the impression of our error messages.

Hierarchy

The visible construction of a format and the way that navigation guides the consumer and creates intentional consideration. Instance state of affairs:

• Query: Why are our tabs styled with a light-weight blue background? Can we make it brighter?
• Rationale: We will, however on this surroundings, we would like the first button to face out greater than the tabs in order that we reduce  cognitive load and disrupt the circulation of visible scanning.

Branding

Connects and roots the expertise in a well-recognized and established visible language. Instance state of affairs:

• Query: Why is our button that blue?  
• Rationale: That’s our model shade.

Accessibility

Follows Internet Content material Accessibility Tips (WCAG). Instance state of affairs:

• Query: Why don’t we make that shade lighter? I believe it appears to be like higher. 
• Rationale: If we have been to do this, we wouldn’t be assembly WCAG pointers, and following these pointers is required. Trying higher isn’t at all times probably the most inclusive method for customers.

There are numerous further issues which may have an effect on your conversations round shade. Some embrace scale, model, and messaging. Figuring out the size of the impression of your shade choices will assist you to decide the colour themes and the way they interaction. Work together with your model staff (might be inside or an company) to grasp how greatest to signify the design within the consumer interface. Associated, determine what colours will signify messaging patterns like success, warning, error, amongst different important states. Make acutely aware selections about how else these colours may exist – or not – within the visible language. If there are cases the place messaging colours overlap with model, collaborate with the model staff to determine what shade(s) to make use of.

Let’s dig into the 4 ideas

Salesforce has an easy-to-use, but subtle shade system that helps designers discover consistency, continuity, and that means with their shade choices. The Salesforce shade system additionally simplifies assembly shade distinction accessibility necessities in an intuitive approach. These ideas prolong from our work to develop a shade system.

1. Good shade selections are intentional

Shade conveys each acutely aware and unconscious that means, so intentionality is essential to serving to customers construct shade associations. For instance, pink is usually related to errors in Western cultures or in stoplights. So, utilizing pink within the consumer interface (UI) for an “Settle for” button would trigger hesitation and confusion. 

Good shade selection can be deliberately cohesive. Select colours as a part of the higher complete, in order that nobody determination operates alone. That is known as shade continuity, and it’s the spine of how customers affiliate shade inside an expertise. In case you keep continuity, your use of shade carries itself inside and throughout any expertise.

For instance, we use blue for our buttons and hyperlinks so our customers affiliate the colour with interactive parts. Within the Salesforce expertise, that shade drives motion. These choices develop into discovered behaviors inside our shade system, and so they help acutely aware and unconscious navigation. Ideally, customers can perceive that means simply by glancing at a UI object.

Intentionality additionally means having a transparent perspective about shade utilization. In case you add shade with out associating it with a perform, customers may develop their very own concepts about that means. That may trigger issues down the highway if you make any shade adjustments to the UI. The exception is that if the colour is used for expressive causes like in an illustration. 

2. Colours can point out hierarchy at a look

Use shade distinction to make sure parts stand out. The upper an object’s distinction, the extra consideration it attracts. Ranges of distinction assemble hierarchy inside an expertise.

Colours information the consumer to key visible parts, however a display screen with too many competing colours creates visible noise. Don’t over-use shade the place it isn’t needed. We would like customers to give attention to what’s necessary to most effectively obtain their objectives.

For instance, the blue used for Salesforce buttons and hyperlinks strongly contrasts with the vast majority of colours in our consumer expertise. This hierarchy of distinction helps customers find an motion simply. Inside a “gentle” UI, it’s frequent to make use of lighter impartial colours for backgrounds. On this instance, the background is primarily white and grey. These shade selections allow the blue to face out extra, which elevates customers’ visible navigation.

3. Colours signify your model

A model can signify its look, really feel, and ethos by means of its colours. The emblem is likely to be the marquee expression, so further colours have to enrich it. The Salesforce model makes use of one shade inside its brand, Cloud Blue, whereas another manufacturers are composed of a number of colours.

There are various ranges of name illustration. Whether or not delicate or loud, the colours talk a sense to the consumer and cement that feeling to an affiliation. For instance, vibrant and shiny colours convey power and pleasure, whereas subdued and darkish colours can convey a cool, modern aesthetic. Shade selections are essential choices that affect how customers expertise a model.

The aim is to simplify shade, so folks have extra time to give attention to what they do greatest.

4. Resolve for accessibility from the beginning

Good shade selection considers accessibility originally of the design section. Salesforce shade palettes adhere to accessibility pointers and design patterns that meet these necessities routinely.

Our palettes function as a complete, as a substitute of a single resolution. It’s a shade system that solves for shade options past our Salesforce manufacturers and may help our prospects’ personal branding. The aim is to simplify shade, so folks have extra time to give attention to what they do greatest. Our accessible palettes take the guesswork out of accessible shade design choices.

To be taught extra, go to the Salesforce Lightning Design System Shade Accessibility Tips.