Skip to content

Visual loudness scale

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.

Controls on the visual loudness scale
AppearanceType (use) and themeLoudnessFrequency of useWhen 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.RareThe 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!".OftenGood, 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!".OftenA common accent action in this world of dullness.
use="primary", theme="invert"RareIt 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."OftenA common action button.
use="secondary", theme="invert"RareIt 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."OftenAccent, but not stressful visual control. Use tertiary button when there is enough space and you want to make the target zone larger and wider.
ButtonLink, use="primary"OftenAccent, 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 rarelyNon-accent control.
ButtonLink, use="secondary"OftenNon-accent control for additional information.

Released under the MIT License.

Released under the MIT License.