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-von-restorff-emphasis.md

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

Rendered Source

markdown30 linesFree

rules/ux-von-restorff-emphasis.md

1---
2title: Make Important Elements Visually Distinct
3impact: HIGH
4tags: ux, von-restorff, emphasis, distinction
5---
6 
7## Make Important Elements Visually Distinct
8 
9When multiple similar elements are present, the one that differs is most likely to be remembered.
10 
11**Incorrect (primary action blends in):**
12 
13```tsx
14<div className={styles.actions}>
15  <button className={styles.button}>Cancel</button>
16  <button className={styles.button}>Delete Account</button>
17</div>
18```
19 
20**Correct (destructive action stands out):**
21 
22```tsx
23<div className={styles.actions}>
24  <button className={styles["button-secondary"]}>Cancel</button>
25  <button className={styles["button-danger"]}>Delete Account</button>
26</div>
27```
28 
29Reference: [Von Restorff Effect](https://lawsofux.com/von-restorff-effect/)
30

Preparing the source view

User Interface Wiki

rules/ux-von-restorff-emphasis.md