diff --git a/src/modules/wds/examples/WDS-Presentation/Resources/HeroSection.jpg b/src/modules/wds/examples/WDS-Presentation/Resources/HeroSection.jpg
new file mode 100644
index 00000000..9b7936d0
Binary files /dev/null and b/src/modules/wds/examples/WDS-Presentation/Resources/HeroSection.jpg differ
diff --git a/src/modules/wds/examples/WDS-Presentation/docs/1-project-brief/01-product-brief.md b/src/modules/wds/examples/WDS-Presentation/docs/1-project-brief/01-product-brief.md
index e875d22d..d896892f 100644
--- a/src/modules/wds/examples/WDS-Presentation/docs/1-project-brief/01-product-brief.md
+++ b/src/modules/wds/examples/WDS-Presentation/docs/1-project-brief/01-product-brief.md
@@ -268,6 +268,10 @@ Using Action Mapping model to identify user actions and required information for
 
 ### SECTION 1: HERO SECTION
 
+**Reference Sketch:**
+
+![Hero Section Concept](../Resources/HeroSection.jpg)
+
 **User Action Goal:** Understand what WDS is and decide to explore further
 
 **What Users Need to Learn:**
@@ -284,6 +288,12 @@ Using Action Mapping model to identify user actions and required information for
 - Primary CTA: "Explore on GitHub" (link to repository)
 - Secondary CTA: "Read WDS Articles" (link to filtered blog posts)
 
+**Visual Elements (from sketch):**
+- Hero illustration showing designer working with specifications/documentation
+- Deep blue background (consistent with current template)
+- Clear visual hierarchy: Headline → Description → CTAs
+- Right-side illustration area (person with device/documentation)
+
 **Success Metric:** User understands WDS concept and clicks through to GitHub or continues reading
 
 ---