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/visual-shadow-direction.md

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

Rendered Source

markdown26 linesFree

rules/visual-shadow-direction.md

1---
2title: Consistent Shadow Direction Across UI
3impact: HIGH
4tags: visual, shadow, direction, light-source
5---
6 
7## Consistent Shadow Direction Across UI
8 
9All shadows must share the same offset direction to imply a single light source. Mixed directions feel broken.
10 
11**Incorrect (conflicting light sources):**
12 
13```css
14.card { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
15.modal { box-shadow: 4px 0 8px rgba(0, 0, 0, 0.1); }
16.tooltip { box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1); }
17```
18 
19**Correct (consistent top-down light):**
20 
21```css
22.card { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
23.modal { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
24.tooltip { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
25```
26

Preparing the source view

User Interface Wiki

rules/visual-shadow-direction.md