11/20/2022 0 Comments Design system designer![]() ![]() A more pronounced shadow for a hover effect on components.A subtle shadow to raise interactive components and add affordance.These four shadows should be enough to style every component in our system: So let’s abstract the styles away from the individual components and into our global style palette. We’re obviously trying to add some perspective to the UI but it’s likely that many components can benefit from the same effect. Let’s take a step back and consider what we’re trying to achieve with our shadows. ![]() Designing in isolation like this often leads to inconsistent UIs. ![]() The same goes for most style properties actually. From what I’ve seen, a lot of designers just come up with shadows off-the-cuff while designing components. Shadows are another commonly used style property in most UIs. These can be useful when it comes to designing components for adding light backgrounds or dark strokes. The point here is that you predefine whatever styles you need upfront so they are reusable throughout your entire product at a later stage.Īs a final touch, we may also want to add tint or shade variations for each of our colours. You might prefer two different stroke shades. You might need three different shades for body copy.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |