Colors

What should be included in layer styles?

• Fills (colors, gradients, photo)
• Borders
• Shadows/elevation (inner and outer)
• Opacity
• Blurs

A modular approach to layer styles

With layer styles, Sketch allows you to combine a number of attributes as a single saved style. However, we recommend keeping fill, border, shadow, and gradient styles separate from one another.

Here's what this looks like in Sketch.

Why? If you ever want to use a fill on its own, you’d need to create another layer style to account for it. That's because the fill and border are attached as a single style and cannot be separated. Additionally, if you ever wanted to update that fill’s shade, you’d have to do so in two places. By keeping layer styles separate, you can update them in isolation.

Naming convention recommendations

It’s best to not name your layer styles by hex value. This is a common mistake that prevents those layers from easily being updated in the future when that hex value is no longer relevant.

Use Sketch color variables to create layer styles

Layer styles allow you to save set color attributes. Once you define a Layer Style, it can be reapplied to a number of different components or shapes. Not only does this save you the hassle of creating document colors or using an eyedropper each time you need to apply color to something, but it reduces errors by having a set of named layers that are consistent within your design system. It also makes the process of updating or scaling your system more convenient.

Need to update your primary color? 

Simply update the layer style. Every component that uses the corresponding primary layer style will be updated as well. There's no need to go component by component to make updates, and you can stop worrying if you've caught everything.

1. Adjust the color in the color panel.
2. In the Appearance panel under the Layer Style name, select Update.