{"id":15506,"date":"2017-05-01T08:00:55","date_gmt":"2017-05-01T15:00:55","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=15506"},"modified":"2020-04-22T06:35:39","modified_gmt":"2020-04-22T13:35:39","slug":"tweak-buttons-design-system-leeway","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/tweak-buttons-design-system-leeway\/","title":{"rendered":"Tweak Your Buttons for a Design System With Some Leeway"},"content":{"rendered":"

Not every button has to look the same, especially in hi-fi prototypes where the nuance between \u201csave\u201d and \u201csubmit\u201d is fuzzy at best. That\u2019s when you should customize buttons to fit your meaning.<\/p>\n

\"Submit<\/p>\n

Buttons\u2019 styles also need to reflect their surroundings to stay on-brand. If your user interface has a slight gloss or texture, then your buttons should too. How they\u2019re allowed<\/em> to change is part of a design system.
\n

Try UXPin for free<\/a><\/div><\/p>\n

Designing a system<\/h2>\n

The trick is to figure out what should remain the same, and what\u2019s allowed to change. Text is obvious \u2014 the same style button can say either \u201csubmit\u201d and \u201ccreate.\u201d But what about color? If one button is green and another red, what makes still them feel like part of the same design?<\/p>\n

Only you can decide how the design system should work. But you might consider using some of these to establish a general button-y look.<\/p>\n