Frontend Design System

Philosophy: Every pixel has purpose. Restraint is luxury. User psychology drives decisions. Core Principle: THINK, don't memorize. ASK, don't assume.

🎯 Selective Reading Rule (MANDATORY)

Read REQUIRED files always, OPTIONAL only when needed:

File Status When to Read

ux-psychology.md 🔴 REQUIRED Always read first!

color-system.md ⚪ Optional Color/palette decisions

typography-system.md ⚪ Optional Font selection/pairing

visual-effects.md ⚪ Optional Glassmorphism, shadows, gradients

animation-guide.md ⚪ Optional Animation needed

motion-graphics.md ⚪ Optional Lottie, GSAP, 3D

decision-trees.md ⚪ Optional Context templates

🔴 ux-psychology.md = ALWAYS READ. Others = only if relevant.

🔧 Runtime Scripts

Execute these for audits (don't read, just run):

Script Purpose Usage

scripts/ux_audit.py

UX Psychology & Accessibility Audit python scripts/ux_audit.py <project_path>

⚠️ CRITICAL: ASK BEFORE ASSUMING (MANDATORY)

STOP! If the user's request is open-ended, DO NOT default to your favorites.

🧠 Knowledge Modules (Fractal Skills)

1. When User Prompt is Vague, ASK:

2. ⛔ DEFAULT TENDENCIES TO AVOID (ANTI-SAFE HARBOR):

3. Audience → Design Approach

4. Core Laws (Internalize These)

5. Emotional Design Levels

6. Trust Building

7. Golden Ratio (φ = 1.618)

8. 8-Point Grid Concept

9. Key Sizing Principles

10. 60-30-10 Rule

11. Color Psychology (For Decision Making)

12. Selection Process

13. Scale Selection

14. Pairing Concept

15. Readability Rules

16. Glassmorphism (When Appropriate)

17. Shadow Hierarchy

18. Gradient Usage

19. Timing Concept

20. Easing Selection

21. Performance

22. Premium Indicators

23. Trust Builders

24. Emotional Triggers

25. ❌ Lazy Design Indicators

26. ❌ AI Tendency Patterns (AVOID!)

27. ❌ Dark Patterns (Unethical)