@heyai-rules/pilo-masterkit 2.1.0 → 3.1.0

package/.agent/skills/frontend-design/decision-trees.md

@@ -1,418 +1,418 @@
-# Decision Trees & Context Templates
-
-> Context-based design THINKING, not fixed solutions.
-> **These are decision GUIDES, not copy-paste templates.**
-> **For UX psychology principles (Hick's, Fitts', etc.) see:** [ux-psychology.md](ux-psychology.md)
-
----
-
-## ⚠️ How to Use This File
-
-This file helps you DECIDE, not copy.
-
-- Decision trees → Help you THINK through options
-- Templates → Show STRUCTURE and PRINCIPLES, not exact values
-- **Always ask user preferences** before applying
-- **Generate fresh palettes** based on context, don't copy hex codes
-- **Apply UX laws** from ux-psychology.md to validate decisions
-
----
-
-## 1. Master Decision Tree
-
-```
-┌─────────────────────────────────────────────────────────────┐
-│                     WHAT ARE YOU BUILDING?                   │
-└─────────────────────────────────────────────────────────────┘
-                              │
-        ┌─────────────────────┼─────────────────────┐
-        │                     │                     │
-        ▼                     ▼                     ▼
-   E-COMMERCE            SaaS/APP              CONTENT
-   - Product pages       - Dashboard           - Blog
-   - Checkout            - Tools               - Portfolio
-   - Catalog             - Admin               - Landing
-        │                     │                     │
-        ▼                     ▼                     ▼
-   PRINCIPLES:           PRINCIPLES:           PRINCIPLES:
-   - Trust               - Functionality       - Storytelling
-   - Action              - Clarity             - Emotion
-   - Urgency             - Efficiency          - Creativity
-```
-
----
-
-## 2. Audience Decision Tree
-
-### Who is your target user?
-
-```
-TARGET AUDIENCE
-      │
-      ├── Gen Z (18-25)
-      │   ├── Colors: Bold, vibrant, unexpected combinations
-      │   ├── Type: Large, expressive, variable
-      │   ├── Layout: Mobile-first, vertical, snackable
-      │   ├── Effects: Motion, gamification, interactive
-      │   └── Approach: Authentic, fast, no corporate feel
-      │
-      ├── Millennials (26-41)
-      │   ├── Colors: Muted, earthy, sophisticated
-      │   ├── Type: Clean, readable, functional
-      │   ├── Layout: Responsive, card-based, organized
-      │   ├── Effects: Subtle, purposeful only
-      │   └── Approach: Value-driven, transparent, sustainable
-      │
-      ├── Gen X (42-57)
-      │   ├── Colors: Professional, trusted, conservative
-      │   ├── Type: Familiar, clear, no-nonsense
-      │   ├── Layout: Traditional hierarchy, predictable
-      │   ├── Effects: Minimal, functional feedback
-      │   └── Approach: Direct, efficient, reliable
-      │
-      ├── Boomers (58+)
-      │   ├── Colors: High contrast, simple, clear
-      │   ├── Type: Large sizes, high readability
-      │   ├── Layout: Simple, linear, uncluttered
-      │   ├── Effects: None or very minimal
-      │   └── Approach: Clear, detailed, trustworthy
-      │
-      └── B2B / Enterprise
-          ├── Colors: Professional palette, muted
-          ├── Type: Clean, data-friendly, scannable
-          ├── Layout: Grid-based, organized, efficient
-          ├── Effects: Professional, subtle
-          └── Approach: Expert, solution-focused, ROI-driven
-```
-
----
-
-## 3. Color Selection Decision Tree
-
-### Instead of fixed hex codes, use this process:
-
-```
-WHAT EMOTION/ACTION DO YOU WANT?
-            │
-            ├── Trust & Security
-            │   └── Consider: Blue family, professional neutrals
-            │       → ASK user for specific shade preference
-            │
-            ├── Growth & Health
-            │   └── Consider: Green family, natural tones
-            │       → ASK user if eco/nature/wellness focus
-            │
-            ├── Urgency & Action
-            │   └── Consider: Warm colors (orange/red) as ACCENTS
-            │       → Use sparingly, ASK if appropriate
-            │
-            ├── Luxury & Premium
-            │   └── Consider: Deep darks, metallics, restrained palette
-            │       → ASK about brand positioning
-            │
-            ├── Creative & Playful
-            │   └── Consider: Multi-color, unexpected combinations
-            │       → ASK about brand personality
-            │
-            └── Calm & Minimal
-                └── Consider: Neutrals with single accent
-                    → ASK what accent color fits brand
-```
-
-### The Process:
-1. Identify the emotion needed
-2. Narrow to color FAMILY
-3. ASK user for preference within family
-4. Generate fresh palette using HSL principles
-
----
-
-## 4. Typography Decision Tree
-
-```
-WHAT'S THE CONTENT TYPE?
-          │
-          ├── Data-Heavy (Dashboard, SaaS)
-          │   ├── Style: Sans-serif, clear, compact
-          │   ├── Scale: Tighter ratio (1.125-1.2)
-          │   └── Priority: Scannability, density
-          │
-          ├── Editorial (Blog, Magazine)
-          │   ├── Style: Serif heading + Sans body works well
-          │   ├── Scale: More dramatic (1.333+)
-          │   └── Priority: Reading comfort, hierarchy
-          │
-          ├── Modern Tech (Startup, SaaS Marketing)
-          │   ├── Style: Geometric or humanist sans
-          │   ├── Scale: Balanced (1.25)
-          │   └── Priority: Modern feel, clarity
-          │
-          ├── Luxury (Fashion, Premium)
-          │   ├── Style: Elegant serif or thin sans
-          │   ├── Scale: Dramatic (1.5-1.618)
-          │   └── Priority: Sophistication, whitespace
-          │
-          └── Playful (Kids, Games, Casual)
-              ├── Style: Rounded, friendly fonts
-              ├── Scale: Varied, expressive
-              └── Priority: Fun, approachable, readable
-```
-
-### Selection Process:
-1. Identify content type
-2. Choose style DIRECTION
-3. ASK user if they have brand fonts
-4. Select fonts that match direction
-
----
-
-## 5. E-commerce Guidelines {#e-commerce}
-
-### Key Principles (Not Fixed Rules)
-- **Trust first:** How will you show security?
-- **Action-oriented:** Where are the CTAs?
-- **Scannable:** Can users compare quickly?
-
-### Color Thinking:
-```
-E-commerce typically needs:
-├── Trust color (often blue family) → ASK preference
-├── Clean background (white/neutral) → depends on brand
-├── Action accent (for CTAs, sales) → depends on urgency level
-├── Success/error semantics → standard conventions work
-└── Brand integration → ASK about existing colors
-```
-
-### Layout Principles:
-```
-┌────────────────────────────────────────────────────┐
-│  HEADER: Brand + Search + Cart                      │
-│  (Keep essential actions visible)                   │
-├────────────────────────────────────────────────────┤
-│  TRUST ZONE: Why trust this site?                   │
-│  (Shipping, returns, security - if applicable)      │
-├────────────────────────────────────────────────────┤
-│  HERO: Primary message or offer                     │
-│  (Clear CTA, single focus)                          │
-├────────────────────────────────────────────────────┤
-│  CATEGORIES: Easy navigation                        │
-│  (Visual, filterable, scannable)                    │
-├────────────────────────────────────────────────────┤
-│  PRODUCTS: Easy comparison                          │
-│  (Price, rating, quick actions visible)             │
-├────────────────────────────────────────────────────┤
-│  SOCIAL PROOF: Why others trust                     │
-│  (Reviews, testimonials - if available)             │
-├────────────────────────────────────────────────────┤
-│  FOOTER: All the details                            │
-│  (Policies, contact, trust badges)                  │
-└────────────────────────────────────────────────────┘
-```
-
-### Psychology to Apply:
-- Hick's Law: Limit navigation choices
-- Fitts' Law: Size CTAs appropriately
-- Social proof: Show where relevant
-- Scarcity: Use honestly if at all
-
----
-
-## 6. SaaS Dashboard Guidelines {#saas}
-
-### Key Principles
-- **Functional first:** Data clarity over decoration
-- **Calm UI:** Reduce cognitive load
-- **Consistent:** Predictable patterns
-
-### Color Thinking:
-```
-Dashboard typically needs:
-├── Background: Light OR dark (ASK preference)
-├── Surface: Slight contrast from background
-├── Primary accent: For key actions
-├── Data colors: Success/warning/danger semantics
-└── Muted: For secondary information
-```
-
-### Layout Principles:
-```
-Consider these patterns (not mandated):
-
-OPTION A: Sidebar + Content
-├── Fixed sidebar for navigation
-└── Main area for content
-
-OPTION B: Top nav + Content
-├── Horizontal navigation
-└── More horizontal content space
-
-OPTION C: Collapsed + Expandable
-├── Icon-only sidebar expands
-└── Maximum content area
-
-→ ASK user about their navigation preference
-```
-
-### Psychology to Apply:
-- Hick's Law: Group navigation items
-- Miller's Law: Chunk information
-- Cognitive Load: Whitespace, consistency
-
----
-
-## 7. Landing Page Guidelines {#landing-page}
-
-### Key Principles
-- **Hero-centric:** First impression matters most
-- **Single focus:** One primary CTA
-- **Emotional:** Connect before selling
-
-### Color Thinking:
-```
-Landing page typically needs:
-├── Brand primary: Hero background or accent
-├── Clean secondary: Most of page
-├── CTA color: Stands out from everything
-├── Supporting: For sections, testimonials
-└── ASK about brand colors first!
-```
-
-### Structure Principles:
-```
-┌────────────────────────────────────────────────────┐
-│  Navigation: Minimal, CTA visible                   │
-├────────────────────────────────────────────────────┤
-│  HERO: Hook + Value + CTA                          │
-│  (Most important section, biggest impact)           │
-├────────────────────────────────────────────────────┤
-│  PROBLEM: What pain do they have?                   │
-├────────────────────────────────────────────────────┤
-│  SOLUTION: How you solve it                         │
-├────────────────────────────────────────────────────┤
-│  PROOF: Why believe you?                            │
-│  (Testimonials, logos, stats)                       │
-├────────────────────────────────────────────────────┤
-│  HOW: Simple explanation of process                 │
-├────────────────────────────────────────────────────┤
-│  PRICING: If applicable                             │
-├────────────────────────────────────────────────────┤
-│  FAQ: Address objections                            │
-├────────────────────────────────────────────────────┤
-│  FINAL CTA: Repeat main action                      │
-└────────────────────────────────────────────────────┘
-```
-
-### Psychology to Apply:
-- Visceral: Beautiful hero impression
-- Serial Position: Key info top/bottom
-- Social Proof: Testimonials work
-
----
-
-## 8. Portfolio Guidelines {#portfolio}
-
-### Key Principles
-- **Personality:** Show who you are
-- **Work-focused:** Let projects speak
-- **Memorable:** Stand out from templates
-
-### Color Thinking:
-```
-Portfolio is personal - many options:
-├── Minimal: Neutrals + one signature accent
-├── Bold: Unexpected color choices
-├── Dark: Moody, artistic feel
-├── Light: Clean, professional feel
-└── ASK about personal brand identity!
-```
-
-### Structure Principles:
-```
-┌────────────────────────────────────────────────────┐
-│  Navigation: Unique to your personality             │
-├────────────────────────────────────────────────────┤
-│  INTRO: Who you are, what you do                   │
-│  (Make it memorable, not generic)                   │
-├────────────────────────────────────────────────────┤
-│  WORK: Featured projects                            │
-│  (Large, visual, interactive)                       │
-├────────────────────────────────────────────────────┤
-│  ABOUT: Personal story                              │
-│  (Creates connection)                               │
-├────────────────────────────────────────────────────┤
-│  CONTACT: Easy to reach                             │
-│  (Clear, direct)                                    │
-└────────────────────────────────────────────────────┘
-```
-
-### Psychology to Apply:
-- Von Restorff: Be uniquely memorable
-- Reflective: Personal story creates connection
-- Emotional: Personality over professionalism
-
----
-
-## 9. Pre-Design Checklists
-
-### Before Starting ANY Design
-
-- [ ] **Audience defined?** (who exactly)
-- [ ] **Primary goal identified?** (what action)
-- [ ] **Constraints known?** (time, brand, tech)
-- [ ] **Content available?** (or placeholders needed)
-- [ ] **User preferences asked?** (colors, style, layout)
-
-### Before Choosing Colors
-
-- [ ] **Asked user preference?**
-- [ ] **Considered context?** (industry, emotion)
-- [ ] **Different from your default?**
-- [ ] **Checked accessibility?**
-
-### Before Finalizing Layout
-
-- [ ] **Hierarchy clear?**
-- [ ] **Primary CTA obvious?**
-- [ ] **Mobile considered?**
-- [ ] **Content fits structure?**
-
-### Before Delivery
-
-- [ ] **Looks premium, not generic?**
-- [ ] **Would you be proud of this?**
-- [ ] **Different from last project?**
-
----
-
-## 10. Complexity Estimation
-
-### Quick Projects (Hours)
-```
-Simple landing page
-Small portfolio
-Basic form
-Single component
-```
-→ Approach: Minimal decisions, focused execution
-
-### Medium Projects (Days)
-```
-Multi-page site
-Dashboard with modules
-E-commerce category
-Complex forms
-```
-→ Approach: Establish tokens, custom components
-
-### Large Projects (Weeks)
-```
-Full SaaS application
-E-commerce platform
-Custom design system
-Complex workflows
-```
-→ Approach: Full design system, documentation, testing
-
----
-
-> **Remember**: These templates show STRUCTURE and THINKING process. Every project needs fresh color, typography, and styling decisions based on its unique context. ASK when unclear.
+# Decision Trees & Context Templates
+
+> Context-based design THINKING, not fixed solutions.
+> **These are decision GUIDES, not copy-paste templates.**
+> **For UX psychology principles (Hick's, Fitts', etc.) see:** [ux-psychology.md](ux-psychology.md)
+
+---
+
+## ⚠️ How to Use This File
+
+This file helps you DECIDE, not copy.
+
+- Decision trees → Help you THINK through options
+- Templates → Show STRUCTURE and PRINCIPLES, not exact values
+- **Always ask user preferences** before applying
+- **Generate fresh palettes** based on context, don't copy hex codes
+- **Apply UX laws** from ux-psychology.md to validate decisions
+
+---
+
+## 1. Master Decision Tree
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                     WHAT ARE YOU BUILDING?                   │
+└─────────────────────────────────────────────────────────────┘
+                              │
+        ┌─────────────────────┼─────────────────────┐
+        │                     │                     │
+        ▼                     ▼                     ▼
+   E-COMMERCE            SaaS/APP              CONTENT
+   - Product pages       - Dashboard           - Blog
+   - Checkout            - Tools               - Portfolio
+   - Catalog             - Admin               - Landing
+        │                     │                     │
+        ▼                     ▼                     ▼
+   PRINCIPLES:           PRINCIPLES:           PRINCIPLES:
+   - Trust               - Functionality       - Storytelling
+   - Action              - Clarity             - Emotion
+   - Urgency             - Efficiency          - Creativity
+```
+
+---
+
+## 2. Audience Decision Tree
+
+### Who is your target user?
+
+```
+TARGET AUDIENCE
+      │
+      ├── Gen Z (18-25)
+      │   ├── Colors: Bold, vibrant, unexpected combinations
+      │   ├── Type: Large, expressive, variable
+      │   ├── Layout: Mobile-first, vertical, snackable
+      │   ├── Effects: Motion, gamification, interactive
+      │   └── Approach: Authentic, fast, no corporate feel
+      │
+      ├── Millennials (26-41)
+      │   ├── Colors: Muted, earthy, sophisticated
+      │   ├── Type: Clean, readable, functional
+      │   ├── Layout: Responsive, card-based, organized
+      │   ├── Effects: Subtle, purposeful only
+      │   └── Approach: Value-driven, transparent, sustainable
+      │
+      ├── Gen X (42-57)
+      │   ├── Colors: Professional, trusted, conservative
+      │   ├── Type: Familiar, clear, no-nonsense
+      │   ├── Layout: Traditional hierarchy, predictable
+      │   ├── Effects: Minimal, functional feedback
+      │   └── Approach: Direct, efficient, reliable
+      │
+      ├── Boomers (58+)
+      │   ├── Colors: High contrast, simple, clear
+      │   ├── Type: Large sizes, high readability
+      │   ├── Layout: Simple, linear, uncluttered
+      │   ├── Effects: None or very minimal
+      │   └── Approach: Clear, detailed, trustworthy
+      │
+      └── B2B / Enterprise
+          ├── Colors: Professional palette, muted
+          ├── Type: Clean, data-friendly, scannable
+          ├── Layout: Grid-based, organized, efficient
+          ├── Effects: Professional, subtle
+          └── Approach: Expert, solution-focused, ROI-driven
+```
+
+---
+
+## 3. Color Selection Decision Tree
+
+### Instead of fixed hex codes, use this process:
+
+```
+WHAT EMOTION/ACTION DO YOU WANT?
+            │
+            ├── Trust & Security
+            │   └── Consider: Blue family, professional neutrals
+            │       → ASK user for specific shade preference
+            │
+            ├── Growth & Health
+            │   └── Consider: Green family, natural tones
+            │       → ASK user if eco/nature/wellness focus
+            │
+            ├── Urgency & Action
+            │   └── Consider: Warm colors (orange/red) as ACCENTS
+            │       → Use sparingly, ASK if appropriate
+            │
+            ├── Luxury & Premium
+            │   └── Consider: Deep darks, metallics, restrained palette
+            │       → ASK about brand positioning
+            │
+            ├── Creative & Playful
+            │   └── Consider: Multi-color, unexpected combinations
+            │       → ASK about brand personality
+            │
+            └── Calm & Minimal
+                └── Consider: Neutrals with single accent
+                    → ASK what accent color fits brand
+```
+
+### The Process:
+1. Identify the emotion needed
+2. Narrow to color FAMILY
+3. ASK user for preference within family
+4. Generate fresh palette using HSL principles
+
+---
+
+## 4. Typography Decision Tree
+
+```
+WHAT'S THE CONTENT TYPE?
+          │
+          ├── Data-Heavy (Dashboard, SaaS)
+          │   ├── Style: Sans-serif, clear, compact
+          │   ├── Scale: Tighter ratio (1.125-1.2)
+          │   └── Priority: Scannability, density
+          │
+          ├── Editorial (Blog, Magazine)
+          │   ├── Style: Serif heading + Sans body works well
+          │   ├── Scale: More dramatic (1.333+)
+          │   └── Priority: Reading comfort, hierarchy
+          │
+          ├── Modern Tech (Startup, SaaS Marketing)
+          │   ├── Style: Geometric or humanist sans
+          │   ├── Scale: Balanced (1.25)
+          │   └── Priority: Modern feel, clarity
+          │
+          ├── Luxury (Fashion, Premium)
+          │   ├── Style: Elegant serif or thin sans
+          │   ├── Scale: Dramatic (1.5-1.618)
+          │   └── Priority: Sophistication, whitespace
+          │
+          └── Playful (Kids, Games, Casual)
+              ├── Style: Rounded, friendly fonts
+              ├── Scale: Varied, expressive
+              └── Priority: Fun, approachable, readable
+```
+
+### Selection Process:
+1. Identify content type
+2. Choose style DIRECTION
+3. ASK user if they have brand fonts
+4. Select fonts that match direction
+
+---
+
+## 5. E-commerce Guidelines {#e-commerce}
+
+### Key Principles (Not Fixed Rules)
+- **Trust first:** How will you show security?
+- **Action-oriented:** Where are the CTAs?
+- **Scannable:** Can users compare quickly?
+
+### Color Thinking:
+```
+E-commerce typically needs:
+├── Trust color (often blue family) → ASK preference
+├── Clean background (white/neutral) → depends on brand
+├── Action accent (for CTAs, sales) → depends on urgency level
+├── Success/error semantics → standard conventions work
+└── Brand integration → ASK about existing colors
+```
+
+### Layout Principles:
+```
+┌────────────────────────────────────────────────────┐
+│  HEADER: Brand + Search + Cart                      │
+│  (Keep essential actions visible)                   │
+├────────────────────────────────────────────────────┤
+│  TRUST ZONE: Why trust this site?                   │
+│  (Shipping, returns, security - if applicable)      │
+├────────────────────────────────────────────────────┤
+│  HERO: Primary message or offer                     │
+│  (Clear CTA, single focus)                          │
+├────────────────────────────────────────────────────┤
+│  CATEGORIES: Easy navigation                        │
+│  (Visual, filterable, scannable)                    │
+├────────────────────────────────────────────────────┤
+│  PRODUCTS: Easy comparison                          │
+│  (Price, rating, quick actions visible)             │
+├────────────────────────────────────────────────────┤
+│  SOCIAL PROOF: Why others trust                     │
+│  (Reviews, testimonials - if available)             │
+├────────────────────────────────────────────────────┤
+│  FOOTER: All the details                            │
+│  (Policies, contact, trust badges)                  │
+└────────────────────────────────────────────────────┘
+```
+
+### Psychology to Apply:
+- Hick's Law: Limit navigation choices
+- Fitts' Law: Size CTAs appropriately
+- Social proof: Show where relevant
+- Scarcity: Use honestly if at all
+
+---
+
+## 6. SaaS Dashboard Guidelines {#saas}
+
+### Key Principles
+- **Functional first:** Data clarity over decoration
+- **Calm UI:** Reduce cognitive load
+- **Consistent:** Predictable patterns
+
+### Color Thinking:
+```
+Dashboard typically needs:
+├── Background: Light OR dark (ASK preference)
+├── Surface: Slight contrast from background
+├── Primary accent: For key actions
+├── Data colors: Success/warning/danger semantics
+└── Muted: For secondary information
+```
+
+### Layout Principles:
+```
+Consider these patterns (not mandated):
+
+OPTION A: Sidebar + Content
+├── Fixed sidebar for navigation
+└── Main area for content
+
+OPTION B: Top nav + Content
+├── Horizontal navigation
+└── More horizontal content space
+
+OPTION C: Collapsed + Expandable
+├── Icon-only sidebar expands
+└── Maximum content area
+
+→ ASK user about their navigation preference
+```
+
+### Psychology to Apply:
+- Hick's Law: Group navigation items
+- Miller's Law: Chunk information
+- Cognitive Load: Whitespace, consistency
+
+---
+
+## 7. Landing Page Guidelines {#landing-page}
+
+### Key Principles
+- **Hero-centric:** First impression matters most
+- **Single focus:** One primary CTA
+- **Emotional:** Connect before selling
+
+### Color Thinking:
+```
+Landing page typically needs:
+├── Brand primary: Hero background or accent
+├── Clean secondary: Most of page
+├── CTA color: Stands out from everything
+├── Supporting: For sections, testimonials
+└── ASK about brand colors first!
+```
+
+### Structure Principles:
+```
+┌────────────────────────────────────────────────────┐
+│  Navigation: Minimal, CTA visible                   │
+├────────────────────────────────────────────────────┤
+│  HERO: Hook + Value + CTA                          │
+│  (Most important section, biggest impact)           │
+├────────────────────────────────────────────────────┤
+│  PROBLEM: What pain do they have?                   │
+├────────────────────────────────────────────────────┤
+│  SOLUTION: How you solve it                         │
+├────────────────────────────────────────────────────┤
+│  PROOF: Why believe you?                            │
+│  (Testimonials, logos, stats)                       │
+├────────────────────────────────────────────────────┤
+│  HOW: Simple explanation of process                 │
+├────────────────────────────────────────────────────┤
+│  PRICING: If applicable                             │
+├────────────────────────────────────────────────────┤
+│  FAQ: Address objections                            │
+├────────────────────────────────────────────────────┤
+│  FINAL CTA: Repeat main action                      │
+└────────────────────────────────────────────────────┘
+```
+
+### Psychology to Apply:
+- Visceral: Beautiful hero impression
+- Serial Position: Key info top/bottom
+- Social Proof: Testimonials work
+
+---
+
+## 8. Portfolio Guidelines {#portfolio}
+
+### Key Principles
+- **Personality:** Show who you are
+- **Work-focused:** Let projects speak
+- **Memorable:** Stand out from templates
+
+### Color Thinking:
+```
+Portfolio is personal - many options:
+├── Minimal: Neutrals + one signature accent
+├── Bold: Unexpected color choices
+├── Dark: Moody, artistic feel
+├── Light: Clean, professional feel
+└── ASK about personal brand identity!
+```
+
+### Structure Principles:
+```
+┌────────────────────────────────────────────────────┐
+│  Navigation: Unique to your personality             │
+├────────────────────────────────────────────────────┤
+│  INTRO: Who you are, what you do                   │
+│  (Make it memorable, not generic)                   │
+├────────────────────────────────────────────────────┤
+│  WORK: Featured projects                            │
+│  (Large, visual, interactive)                       │
+├────────────────────────────────────────────────────┤
+│  ABOUT: Personal story                              │
+│  (Creates connection)                               │
+├────────────────────────────────────────────────────┤
+│  CONTACT: Easy to reach                             │
+│  (Clear, direct)                                    │
+└────────────────────────────────────────────────────┘
+```
+
+### Psychology to Apply:
+- Von Restorff: Be uniquely memorable
+- Reflective: Personal story creates connection
+- Emotional: Personality over professionalism
+
+---
+
+## 9. Pre-Design Checklists
+
+### Before Starting ANY Design
+
+- [ ] **Audience defined?** (who exactly)
+- [ ] **Primary goal identified?** (what action)
+- [ ] **Constraints known?** (time, brand, tech)
+- [ ] **Content available?** (or placeholders needed)
+- [ ] **User preferences asked?** (colors, style, layout)
+
+### Before Choosing Colors
+
+- [ ] **Asked user preference?**
+- [ ] **Considered context?** (industry, emotion)
+- [ ] **Different from your default?**
+- [ ] **Checked accessibility?**
+
+### Before Finalizing Layout
+
+- [ ] **Hierarchy clear?**
+- [ ] **Primary CTA obvious?**
+- [ ] **Mobile considered?**
+- [ ] **Content fits structure?**
+
+### Before Delivery
+
+- [ ] **Looks premium, not generic?**
+- [ ] **Would you be proud of this?**
+- [ ] **Different from last project?**
+
+---
+
+## 10. Complexity Estimation
+
+### Quick Projects (Hours)
+```
+Simple landing page
+Small portfolio
+Basic form
+Single component
+```
+→ Approach: Minimal decisions, focused execution
+
+### Medium Projects (Days)
+```
+Multi-page site
+Dashboard with modules
+E-commerce category
+Complex forms
+```
+→ Approach: Establish tokens, custom components
+
+### Large Projects (Weeks)
+```
+Full SaaS application
+E-commerce platform
+Custom design system
+Complex workflows
+```
+→ Approach: Full design system, documentation, testing
+
+---
+
+> **Remember**: These templates show STRUCTURE and THINKING process. Every project needs fresh color, typography, and styling decisions based on its unique context. ASK when unclear.