From 03318cb141250a4ba26ca95f0f9862dc9ef3a226 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 12 Mar 2026 00:04:20 +0000
Subject: [PATCH 1/2] Initial plan


From 9d608e991375398b53e57ad0240592132c215ce8 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 12 Mar 2026 00:06:47 +0000
Subject: [PATCH 2/2] Move hero icon font-size from inline style to CSS class
 with design token

Co-authored-by: pournasserian <24959477+pournasserian@users.noreply.github.com>
---
 0-Agents/AgentsWebUI/Components/Pages/Home.razor | 2 +-
 0-Agents/AgentsWebUI/wwwroot/app.css             | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/0-Agents/AgentsWebUI/Components/Pages/Home.razor b/0-Agents/AgentsWebUI/Components/Pages/Home.razor
index 791bd0c..c2b8787 100644
--- a/0-Agents/AgentsWebUI/Components/Pages/Home.razor
+++ b/0-Agents/AgentsWebUI/Components/Pages/Home.razor
@@ -7,7 +7,7 @@
     <!-- Hero Banner -->
     <div class="hero-banner mb-5">
         <div class="d-flex align-items-center gap-3 mb-2">
-            <span aria-hidden="true" style="font-size:2.5rem;">🤖</span>
+            <span aria-hidden="true" class="hero-icon">🤖</span>
             <h1 class="display-5 fw-bold mb-0">Microsoft Agent Framework Samples</h1>
         </div>
         <p class="lead mb-4">
diff --git a/0-Agents/AgentsWebUI/wwwroot/app.css b/0-Agents/AgentsWebUI/wwwroot/app.css
index 2f90a2f..400b67e 100644
--- a/0-Agents/AgentsWebUI/wwwroot/app.css
+++ b/0-Agents/AgentsWebUI/wwwroot/app.css
@@ -97,6 +97,7 @@
     --font-size-2xl:          1.5rem;    /*  24px */
     --font-size-3xl:          1.875rem;  /*  30px */
     --font-size-4xl:          2.25rem;   /*  36px */
+    --font-size-5xl:          2.5rem;    /*  40px */
 
     --font-weight-normal:     400;
     --font-weight-medium:     500;
@@ -295,6 +296,11 @@ main > article.content {
     font-size: var(--font-size-lg);
 }
 
+/* Hero icon (robot emoji beside the h1) */
+.hero-icon {
+    font-size: var(--font-size-5xl);
+}
+
 /* Pill badges inside hero */
 .hero-badge {
     background: rgba(255,255,255,0.18);