From 00adceb0271027ba7590458f8bdb09ed2f2b8f1a Mon Sep 17 00:00:00 2001
From: Elliot Hopkins <did:plc:6kqpljoz4r7ttyhofw6sg2km>
Date: Tue, 7 Apr 2026 20:54:36 -0700
Subject: [PATCH] Update popup and options branding icon

Made-with: Cursor
---
 lightning.svg        |  9 +++++++
 options/options.css  | 32 +++++++++++++++++-------
 options/options.html |  4 ++-
 popup/popup.css      | 58 +++++++++++++++++++++++++++++++++++---------
 popup/popup.html     |  8 ++++--
 5 files changed, 87 insertions(+), 24 deletions(-)
 create mode 100644 lightning.svg

diff --git a/lightning.svg b/lightning.svg
new file mode 100644
index 0000000..7df107c
--- /dev/null
+++ b/lightning.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 571 991" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-242.737675,-4.302677)">
+        <g transform="matrix(2.061595,0.357455,-0.357455,2.061595,-342.211752,-730.395512)">
+            <path d="M520.828,281.713L496.332,468.258L618.867,419.852C623.264,418.115 628.272,419.151 631.619,422.489C634.966,425.827 636.015,430.832 634.29,435.233C591.046,545.573 527.57,652.425 447.165,756.331C443.667,760.853 437.444,762.24 432.356,759.633C427.268,757.027 424.759,751.165 426.385,745.684L487.827,538.566L392.453,556.504C388.107,557.321 383.666,555.656 380.929,552.182C378.192,548.709 377.611,544.002 379.422,539.967L498.215,275.303C500.629,269.926 506.62,267.132 512.291,268.739C517.961,270.347 521.595,275.869 520.828,281.713Z" style="fill:rgb(241,91,47);"/>
+        </g>
+    </g>
+</svg>
diff --git a/options/options.css b/options/options.css
index ec9657e..4f1cefe 100644
--- a/options/options.css
+++ b/options/options.css
@@ -4,6 +4,11 @@
   box-sizing: border-box;
 }
 
+:root {
+  --brand: #F15B2F;
+  --brand-hover: #D94E27;
+}
+
 body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   background: #f5f0e8;
@@ -26,8 +31,17 @@ body {
 }
 
 .page-header .logo-mark {
-  font-size: 14px;
-  color: #999;
+  width: 14px;
+  height: 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.page-header .logo-mark .brand-icon {
+  width: 100%;
+  height: 100%;
+  display: block;
 }
 
 .page-header h1 {
@@ -68,7 +82,7 @@ input[type="checkbox"] {
   width: 16px;
   height: 16px;
   cursor: pointer;
-  accent-color: #1a1a1a;
+  accent-color: var(--brand);
 }
 
 input[type="text"],
@@ -91,7 +105,7 @@ input:focus,
 textarea:focus,
 select:focus {
   outline: none;
-  border-color: #aaa;
+  border-color: var(--brand);
 }
 
 select {
@@ -141,15 +155,15 @@ button {
 
 .btn-primary {
   padding: 8px 18px;
-  background: #1a1a1a;
-  color: #f5f0e8;
+  background: var(--brand);
+  color: #fff;
   border: none;
   border-radius: 6px;
   font-size: 12.5px;
   font-weight: 500;
 }
 
-.btn-primary:hover { background: #333; }
+.btn-primary:hover { background: var(--brand-hover); }
 
 .btn-secondary {
   padding: 8px 14px;
@@ -256,8 +270,8 @@ button {
 }
 
 .info-section a {
-  color: #555;
+  color: var(--brand);
   text-decoration: underline;
 }
 
-.info-section a:hover { color: #111; }
+.info-section a:hover { color: var(--brand-hover); }
diff --git a/options/options.html b/options/options.html
index 4f50162..bfdb31a 100644
--- a/options/options.html
+++ b/options/options.html
@@ -8,7 +8,9 @@
     <body>
         <div class="container">
             <div class="page-header">
-                <div class="logo-mark">✦</div>
+                <div class="logo-mark">
+                    <img src="../lightning.svg" alt="" class="brand-icon" />
+                </div>
                 <h1>Settings</h1>
             </div>
 
diff --git a/popup/popup.css b/popup/popup.css
index 9d2b39f..e3dfb45 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -39,6 +39,9 @@
   --heading:       #111;
   --strong:        #111;
   --blockquote:    #888;
+  --brand:         #F15B2F;
+  --brand-hover:   #D94E27;
+  --brand-active:  #BF4522;
 }
 
 /* ── Dark theme ── */
@@ -76,6 +79,9 @@
   --heading:       #e8e3db;
   --strong:        #e8e3db;
   --blockquote:    #666;
+  --brand:         #F15B2F;
+  --brand-hover:   #D94E27;
+  --brand-active:  #BF4522;
 }
 
 body {
@@ -117,8 +123,17 @@ body {
 }
 
 .logo-mark {
-  font-size: 13px;
-  color: var(--text-muted);
+  width: 13px;
+  height: 13px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo-mark .brand-icon {
+  width: 100%;
+  height: 100%;
+  display: block;
 }
 
 .logo-text {
@@ -174,11 +189,17 @@ body {
 .initial-state.hidden { display: none; }
 
 .initial-icon {
-  font-size: 18px;
-  color: var(--text-faint);
+  width: 18px;
+  height: 18px;
   margin-bottom: 4px;
 }
 
+.initial-icon .brand-icon {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
 .initial-title {
   font-size: 15px;
   font-weight: 600;
@@ -326,7 +347,7 @@ body {
 }
 
 .result a { color: var(--link); text-decoration: underline; }
-.result a:hover { color: var(--link-hover); }
+.result a:hover { color: var(--brand); }
 
 .result hr {
   border: none;
@@ -433,6 +454,19 @@ body {
   cursor: not-allowed;
 }
 
+.footer-btn.primary {
+  background: var(--brand);
+  color: #fff;
+}
+
+.footer-btn.primary:hover {
+  background: var(--brand-hover);
+}
+
+.footer-btn.primary:active {
+  background: var(--brand-active);
+}
+
 .hidden {
   display: none !important;
 }
@@ -502,8 +536,8 @@ body {
 }
 
 .suggestion-btn:hover {
-  border-color: var(--border-hover);
-  color: var(--text);
+  border-color: var(--brand);
+  color: var(--brand);
   background: var(--bg);
 }
 
@@ -663,7 +697,7 @@ body {
 }
 
 .chat-message.assistant a:hover {
-  color: var(--link-hover);
+  color: var(--brand);
 }
 
 /* User message markdown */
@@ -699,7 +733,7 @@ body {
 }
 
 .chat-input:focus {
-  border-color: var(--border-hover);
+  border-color: var(--brand);
 }
 
 .chat-input::placeholder {
@@ -711,8 +745,8 @@ body {
   height: 32px;
   border-radius: 6px;
   border: none;
-  background: var(--primary-bg);
-  color: var(--primary-text);
+  background: var(--brand);
+  color: #fff;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -722,7 +756,7 @@ body {
 }
 
 .chat-send-btn:hover {
-  background: var(--primary-bg-hover);
+  background: var(--brand-hover);
 }
 
 .chat-send-btn:disabled {
diff --git a/popup/popup.html b/popup/popup.html
index 851fa43..22d3dfd 100644
--- a/popup/popup.html
+++ b/popup/popup.html
@@ -9,7 +9,9 @@
   <div class="app">
     <div class="header">
       <div class="header-left">
-        <div class="logo-mark">✦</div>
+        <div class="logo-mark">
+          <img src="../lightning.svg" alt="" class="brand-icon" />
+        </div>
         <span class="logo-text">Summarize</span>
       </div>
       <div class="header-right">
@@ -49,7 +51,9 @@
 
     <div class="content-container">
       <div id="initial-state" class="initial-state">
-        <div class="initial-icon">✦</div>
+        <div class="initial-icon">
+          <img src="../lightning.svg" alt="" class="brand-icon" />
+        </div>
         <p class="initial-title">Ready to summarize</p>
         <p class="initial-sub">Get an AI-powered summary of the page you're reading.</p>
       </div>
-- 
2.51.2