Developer Description
We want interfaces to help users solve their problems. Building your interface with the principles of visual hierarchy can help with that. You can check it with visual loudness guide by Tom Osborne.
Controls on the visual loudness scale
The table lists the main styles of our controls, arranged according to the scale of visual loudness.
| Appearance | Type (use) and theme | Loudness | Frequency of use | When to use |
|---|---|---|---|---|
 | use="primary", theme="danger" | Screech, loud roar. The dovahkin button, every time it appears on the page, it yells at you: "Fus Ro Dah!" – and it takes you to the forefathers for a while, all life flashes before your eyes, etc. | Rare | The action is dangerous for the user: destructive, irreversible. We need to stir them up so that they don't accidentally hurt themself. |
 | use="primary", theme="success" | Shout of approval. The button winks at the user: "Everything is great, don’t be afraid, press and you will come to success!". | Often | Good, important accent action to take, CTA. Subscribe or upgrade your Semrush subscription, for example. |
 | use="primary", theme="info" | One-time cry. The button doesn't reach you, but as if slightly reminds that it is ready to do a useful action for you. "Hey, hello, I'm here, look what you can do!". | Often | A common accent action in this world of dullness. |
 | use="primary", theme="invert" | Rare | It is an invert version of primary buttons for using on a dark background. | |
 | use="secondary", theme="muted" | Conversation nearby. This is a bro button. It will always support you, always with you, but their presence doesn't bother you. "If you need anything, I'm here." | Often | A common action button. |
 | use="secondary", theme="invert" | Rare | It is an invert version of secondary button for using on a dark background. | |
 | use="tertiary", theme="info" | Quiet request. "You know what to do with it, bro. I'm just reminding you." | Often | Accent, but not stressful visual control. Use tertiary button when there is enough space and you want to make the target zone larger and wider. |
 | Link | Often | Accent, but not stressful visual control. Use it in the opposite to tertiary button case – when there isn’t enough space. | |
 | use="tertiary", theme="muted" | Whisper. "Psst, wanna a little more information?" | Neither often nor rarely | Non-accent control. |
 | Hint link | Often | Non-accent control for additional information. |