{"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":"2026-05-08T02:20:56","modified_gmt":"2026-05-08T09:20:56","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 “save” and “submit” is fuzzy at best. That’s when you should customize buttons to fit your meaning.<\/p>\n

\"Submit<\/p>\n

Buttons’ 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’re allowed<\/em> to change is part of a design system.<\/p>\n

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

Designing a system<\/h2>\n

The trick is to figure out what should remain the same, and what’s allowed to change. Text is obvious \u2014 the same style button can say either “submit” and “create.” 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