Similarity

Similarity is the Gestalt principle that groups elements sharing visual traits. The brain links anything with matching color, shape, size, style, or texture and treats those elements as related without waiting for labels or explanations. Repeated visual treatment becomes a silent contract. Same look means same job. Break that contract and users lose trust in your interface before they read the first line of copy. Notion runs its entire editor on this rule. Every block type repeats its signature treatment across every document. Headings share scale and weight. Callouts share their left border and background. Code blocks share their monospaced container. Users learn the system once then navigate 500 block pages like they were simple lists. The principle removes friction at scale.

This is not the pursuit of visual uniformity that makes every element on screen identical. Similarity applied without regard for function creates noise not clarity. It is not using the same rounded corners on buttons that submit forms and buttons that delete accounts. Different jobs require different treatments or the design lies. Similarity is not proximity wearing different clothes. Proximity uses spacing to create groups. Similarity uses appearance. They are separate tools that solve separate problems and the strongest layouts use both in concert. It is not a bandage for poor information architecture. No amount of matching styles can fix a navigation system that buries important items under inconsistent labels. Finally similarity is not focal point. If everything looks the same then nothing stands out and your hierarchy collapses.

Figma's layer panel from the 2024 update shows similarity done right. Frames wear one icon style. Components wear a diamond. Instances add the telltale purple outline that marks them as copies. The entire panel can hold two thousand layers and still read instantly because the eye groups by appearance before it reads names. Apple deploys the principle at consumer scale on the iOS home screen. Every app icon shares the exact same mask, corner radius, shadow treatment and grid alignment. The brain registers one coherent grid of apps before it starts distinguishing individual applications. Change one icon to break the similarity and the home screen feels broken even if the underlying apps remain useful. Cursor uses similarity in its diff views. Added lines share one green treatment. Removed lines share one red treatment. The colors need no legend because the repetition across every file teaches the meaning. Linear applies it to its issue labels. Every bug label shares the same red hue and rounded pill shape. Feature labels share blue. The color becomes the filter. No extra UI required. Stripe uses similarity on its billing overview. Every metric card shares height, internal rhythm, label weight and value size. The row reads as one unit before any number registers. Vercel uses the same discipline on its deployment cards. Every stage shares the same status dot style and progress bar treatment. The timeline reads itself.

Apply similarity every time multiple elements perform related functions. Use it on navigation items that belong to the same category. Use it on button sets so every primary action wears identical fill and hover states. Use it on data visualizations where the same category must always map to the same color. Use it when building design token systems so that a change to a button radius updates every button in the product instantly. Use it in AI interfaces where output streams in real time. Similarity and common fate become the only anchors users have when content mutates quickly. Use it on icon libraries so every icon from the same set shares stroke weight and optical balance. Use it on form controls so every text field shares focus treatment and every toggle shares track style. The principle scales teams. A design system built on strict similarity lets ten designers ship consistent interfaces without daily alignment meetings.

Avoid similarity when the goal is to create emphasis or break attention. That is the domain of focal point and figure and ground. Do not make three primary buttons share the same treatment and expect users to know which one matters. Demote two of them or the focal point cancels itself. Do not break similarity to solve boredom. Adding one special illustration style to a single card in a grid of ten forces the eye to stop and decode instead of scan. Linear fixed exactly this mistake in their 2023 project views. Early versions mixed card styles for variety. The team removed the variety, tightened similarity across all cards, and added one focal point per view. Completion rates on tasks rose. Do not apply similarity across elements with fundamentally different interaction expectations. A card that looks like a button but does not behave like one trains users to click things that do nothing. The contract must stay honest or users stop trusting the visual language entirely. The anti pattern appears in many SaaS products that chase delight over clarity. One button gets a special gradient because it looked cool in the mockup. Now every button requires closer inspection. The entire similarity system collapses.

Same look means same job.