Stop designing buttons in isolation

I was reviewing a student's mini-style guide and modal this week. The colors all looked great together. This muted, sporty neon against the neutrals just worked.

The primary and secondary buttons were styled identically. When both actions get the same visual weight, users lose the hierarchy that guides their decision-making.

I also noticed the red delete button labeled as a secondary action. You could totally use it for a button, but red often signals destruction. Delete. Remove. Gone forever.

This particular assignment was about button styles, but buttons don't exist on their own, so I love that the student also designed a modal to show them in context. As I was reviewing, I found myself mentally drawing an invisible boundary around the entire modal. The boundary that contains all the elements. The negative space. The gaps between buttons. The breathing room.

Now, all of a sudden, those delete and cancel buttons felt tiny in their container.

Here are some things that come to mind when I look at layouts like this:

You could probably do five different iterations of just that one modal. Each iteration teaches you something new about the relationships between elements.

Keep in mind, buttons appear everywhere. Modals, forms, cards, toolbars, navigation, and more. The larger the project, the more contexts your button system needs to account for.

Start drawing that invisible boundary around your own work. It'll show you how buttons relate to their containers, how spacing creates rhythm, how everything connects. Define your system in the style guide, then test it in real contexts. That's where you discover what actually works.