Shape is a channel you are probably not using

Everything is a rounded rectangle

Open almost any interface built in the last decade and inventory the shapes. Cards: rounded rectangles. Buttons: rounded rectangles. Input fields, badges, modals, images, avatars: rounded rectangles, with the avatars occasionally promoted to circles. The corner radius varies between 4 and 16 pixels and that is the whole vocabulary.

This is not a disaster. Rectangles tile efficiently, respect grids and hold text well, which is why they won. But it means an entire emphasis channel is sitting unspent, and a channel nobody is using is the cheapest one to use.

What shape contrast buys

Put one circle in a field of rectangles and the circle is found instantly, from the periphery, at any size, in greyscale, by a colour-blind reader, in sunlight. Very few devices survive that many conditions.

The mechanism is the one from earlier in this block: peripheral vision keeps gross shape. It discards the 8px corner radius that distinguishes your card from your button, but it keeps the difference between a blob that is round and a blob that is straight-sided.

Practical uses:

• Avatars as circles among rectangular content. This is so standard it has stopped registering as a design decision, but it is one, and it works.
• A single pill-shaped primary button on a page of square-cornered secondary ones.
• A diagonal or a curve cutting across a layout of horizontals and verticals. One diagonal in an otherwise orthogonal design is loud; a design full of diagonals is noise.
• A silhouette that is not a rectangle — a cut-out product photograph on a plain ground beats the same product in a rectangular crop, because the object's own outline becomes a shape rather than being hidden inside a box.

That last one is the most under-used device available to a small business making its own materials, and it is free: remove the background from a product photograph and place it on flat colour. GIMP does this with the Foreground Select tool or Layer > Transparency > Add Alpha Channel plus the Free Select tool; Photopea has a one-click Magic Cut in the browser; Krita has a comparable selection workflow. None of them requires a subscription.

Shape carries meaning, weakly and locally

There is a long tradition of claiming that shapes have inherent emotional content — circles are friendly, triangles are aggressive, squares are stable. Treat this carefully. There is some experimental support for a general preference for curved over angular contours, and it is weak, culturally variable, and swamped by context. A rounded button in a hostile interface is not friendly.

What is more defensible is the learned conventions, which are strong precisely because they are learned:

• A triangle pointing right means play, almost universally on screens.
• A circle among rectangles means person, in most interfaces.
• A rounded-corner rectangle that is more rounded than everything around it means tag or pill or status.
• An octagon in red means stop, in the many countries that adopted the Vienna Convention road signs — and this is a good example of a convention that feels universal and is not.

Build on conventions your audience actually holds, and do not assume that a shape means what a moodboard told you it means.

The corner radius question

Since rectangles are the vocabulary, the radius is where most of the decisions get made, and there is one technical point worth knowing.

A radius should be consistent in its relationship to the element, not in its absolute value. If a card at 400px wide has a 12px radius and a button at 40px tall also has a 12px radius, the button looks much rounder, because 12px is 30% of its height and 3% of the card's width. Systems handle this by defining two or three radius tokens — say 4px for small controls, 8px for cards, and fully rounded for pills — rather than one value everywhere.

The second point: when you nest a rounded object inside another, the inner radius should be the outer radius minus the padding, or the two curves will not run parallel. An 8px-radius card with 8px of padding wants a 0px-radius element inside it, not another 8px one. Most people never notice this consciously and everyone notices it unconsciously.

Restraint

Shape contrast works because it is rare. One deviant shape per view is an emphasis; five are a style, and a style is not an emphasis. If you introduce a circle to mark the primary action, do not also use circles for decoration, bullets and icon backgrounds in the same view, or you have spent the channel on nothing.

The same logic covers illustration, texture and any other formal device: the first one is information, the fourth is wallpaper.