Source from repo

User Interface Wiki

Living wiki of UI design patterns and best practices built with Fumadocs, Next.js, and Base UI components.

raphaelsalajaGitHub raphaelsalajaSource repo Original GitHub link Publisher page

Files

157

Skill

n/a

Size

184.3 KB

Entrypoint

SKILL.md

Format

git-repo

Open file

rules/ux-similarity-consistency.md

Syntax-highlighted preview of this file as included in the skill package.

Rendered Source

markdown36 linesFree

rules/ux-similarity-consistency.md

1---
2title: Similar Elements Should Look Alike
3impact: HIGH
4tags: ux, similarity, consistency, visual
5---
6 
7## Similar Elements Should Look Alike
8 
9Elements that function the same should look the same. Visual consistency signals functional consistency.
10 
11**Incorrect (same function, different appearance):**
12 
13```css
14.save-button {
15  background: blue;
16  border-radius: 8px;
17}
18 
19.submit-button {
20  background: green;
21  border-radius: 0;
22}
23```
24 
25**Correct (same function, same appearance):**
26 
27```css
28.primary-action {
29  background: var(--gray-12);
30  color: var(--gray-1);
31  border-radius: 8px;
32}
33```
34 
35Reference: [Law of Similarity](https://lawsofux.com/law-of-similarity/)
36

Preparing the source view

User Interface Wiki

rules/ux-similarity-consistency.md