Landing page: real Forge logo + ember/black brand palette

site/src/components/CodeExample.astro

@@ -92,7 +92,7 @@ const indexHtmlCode = `<span class="tag">&lt;script&gt;</span>
 <style>
   .code-example {
     padding: 6rem 2rem;
-    background: linear-gradient(180deg, #0a0a0a 0%, #0d0d10 100%);
+    background: linear-gradient(180deg, #050505 0%, #070708 100%);
   }
 
   .container {
@@ -135,7 +135,7 @@ const indexHtmlCode = `<span class="tag">&lt;script&gt;</span>
     align-items: center;
     gap: 0.5rem;
     padding: 0.75rem 1rem;
-    background: #0a0a0a;
+    background: #050505;
     border-bottom: 1px solid #222;
   }
 
@@ -198,20 +198,20 @@ const indexHtmlCode = `<span class="tag">&lt;script&gt;</span>
     align-items: center;
     gap: 0.25rem;
     padding: 1rem 1.5rem;
-    background: #151518;
+    background: #0e0e10;
     border: 1px solid #222;
     border-radius: 8px;
     text-decoration: none;
     transition: all 0.2s;
   }
 
   .module-badge:hover {
-    border-color: #0066cc;
+    border-color: #ed8936;
     background: #18181b;
   }
 
   .module-badge code {
-    color: #0099ff;
+    color: #f6ad3c;
     font-size: 0.95rem;
   }
 

site/src/components/Comparison.astro

@@ -20,10 +20,7 @@ const comparisons = [
       <div class="table-header">
         <div class="metric-col">Metric</div>
         <div class="forge-col">
-          <svg viewBox="0 0 32 32" fill="none" width="20" height="20">
-            <rect width="32" height="32" rx="6" fill="#0066cc"/>
-            <path d="M8 10h16v2H10v3h12v2H10v5H8V10z" fill="white"/>
-          </svg>
+          <img src="/favicon.svg" alt="Forge" width="20" height="20" class="logo-mark" />
           Forge
         </div>
         <div class="electron-col">Electron</div>
@@ -51,7 +48,7 @@ const comparisons = [
 <style>
   .comparison {
     padding: 6rem 2rem;
-    background: #0a0a0a;
+    background: #050505;
   }
 
   .container {
@@ -91,7 +88,7 @@ const comparisons = [
 
   .table-header {
     padding: 1.25rem 1.5rem;
-    background: #0a0a0a;
+    background: #050505;
     border-bottom: 1px solid #222;
     font-weight: 600;
     font-size: 0.9rem;
@@ -125,15 +122,15 @@ const comparisons = [
   }
 
   .forge-col.winner {
-    color: #00cc88;
+    color: #fbbf24;
   }
 
   .electron-col {
     color: #666;
   }
 
   .check {
-    color: #00cc88;
+    color: #fbbf24;
     font-size: 1rem;
   }
 

site/src/components/Features.astro

@@ -55,7 +55,7 @@ const features = [
 <style>
   .features {
     padding: 6rem 2rem;
-    background: #0a0a0a;
+    background: #050505;
   }
 
   .container {
@@ -87,17 +87,17 @@ const features = [
   }
 
   .feature-card {
-    background: linear-gradient(180deg, #151518 0%, #0f0f12 100%);
+    background: linear-gradient(180deg, #0e0e10 0%, #090909 100%);
     border: 1px solid #222;
     border-radius: 16px;
     padding: 2rem;
     transition: all 0.3s ease;
   }
 
   .feature-card:hover {
-    border-color: #0066cc40;
+    border-color: #ed893640;
     transform: translateY(-4px);
-    box-shadow: 0 20px 40px -20px rgba(0, 102, 204, 0.2);
+    box-shadow: 0 20px 40px -20px rgba(237, 137, 54, 0.2);
   }
 
   .feature-icon {

site/src/components/Footer.astro

@@ -24,10 +24,7 @@ const links = {
     <div class="footer-grid">
       <div class="footer-brand">
         <a href="/" class="logo">
-          <svg viewBox="0 0 32 32" fill="none" width="32" height="32">
-            <rect width="32" height="32" rx="6" fill="#0066cc"/>
-            <path d="M8 10h16v2H10v3h12v2H10v5H8V10z" fill="white"/>
-          </svg>
+          <img src="/favicon.svg" alt="Forge" width="32" height="32" class="logo-mark" />
           <span>Forge</span>
         </a>
         <p>Build cross-platform desktop apps with TypeScript and Deno.</p>
@@ -69,7 +66,7 @@ const links = {
 <style>
   .footer {
     padding: 4rem 2rem 2rem;
-    background: #0a0a0a;
+    background: #050505;
     border-top: 1px solid #1a1a1a;
   }
 

site/src/components/Hero.astro

@@ -5,10 +5,7 @@
   <nav class="nav">
     <div class="nav-content">
       <a href="/" class="logo">
-        <svg viewBox="0 0 32 32" fill="none" width="32" height="32">
-          <rect width="32" height="32" rx="6" fill="#0066cc"/>
-          <path d="M8 10h16v2H10v3h12v2H10v5H8V10z" fill="white"/>
-        </svg>
+        <img src="/favicon.svg" alt="Forge" width="32" height="32" class="logo-mark" />
         <span>Forge</span>
       </a>
       <div class="nav-links">
@@ -20,12 +17,14 @@
   </nav>
 
   <div class="hero-content">
+    <img src="/forge-mark.png" alt="Forge" class="hero-logo" width="120" height="120" />
+
     <div class="badge">
       <span class="badge-icon">🍩</span>
       <span>Steel Donut Release - v1.0.0p</span>
     </div>
 
-    <h1>Build Desktop Apps<br/><span class="deno-line">With <svg class="deno-logo-hero" viewBox="0 0 441 441" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1.02631,0,0,1.02631,-0.526,-0.525)"><path fill="currentColor" d="M37.965,296.635C26.441,271.766 20.009,244.065 20.009,214.873C20.009,207.318 20.439,199.863 21.278,192.531C22.129,185.123 23.39,177.852 25.036,170.742C34.286,130.852 55.801,95.64 85.384,69.301C110.233,47.207 140.674,31.444 174.043,24.299C187.212,21.486 200.872,20.006 214.875,20.006C219.783,20.011 224.727,20.2 229.701,20.579C253.285,22.38 275.571,28.317 295.904,37.625C312.305,45.143 327.486,54.87 341.064,66.426C375.17,95.48 398.957,135.953 406.867,181.369C408.757,192.255 409.742,203.45 409.742,214.873C409.738,219.789 409.548,224.74 409.168,229.721C407.731,248.545 403.659,266.542 397.34,283.379C388.521,306.83 375.308,328.136 358.706,346.294C337.113,368.342 309.673,378.152 286.755,377.744C270.09,377.447 253.784,370.816 242.516,361.114C226.42,347.253 219.918,331.409 217.69,313.729C217.136,309.334 217.461,297.358 219.748,289.066C221.453,282.885 225.777,270.948 232.1,265.727C224.703,262.541 215.183,255.604 212.182,252.274C211.445,251.455 211.54,250.174 212.2,249.292C212.861,248.41 214.02,248.062 215.057,248.435C221.416,250.618 229.161,252.771 237.327,254.137C248.067,255.932 261.424,258.194 274.955,258.859C307.946,260.479 342.407,245.67 353.103,216.207C363.798,186.744 359.649,157.602 321.279,140.121C282.909,122.64 265.185,101.856 234.183,89.32C213.934,81.131 191.396,85.992 168.257,98.78C105.931,133.223 50.092,242.048 75.833,342.873C76.201,344.252 75.58,345.705 74.328,346.392C73.156,347.036 71.713,346.852 70.741,345.962C63.25,337.731 56.454,328.857 50.445,319.433C45.796,312.139 41.623,304.524 37.965,296.635Z"/></g><g transform="matrix(0.092,0.004,-0.004,0.092,-28.127,-500.301)"><path fill="#111118" d="M3053.7,5296.9C4371.65,5296.9 5441.66,6366.91 5441.66,7684.86C5441.66,9002.81 4371.65,10072.8 3053.7,10072.8C1735.75,10072.8 665.74,9002.81 665.74,7684.86C665.74,6366.91 1735.75,5296.9 3053.7,5296.9ZM3745.03,8143.22C3594.12,8142.82 3444.31,8124.57 3323.87,8110.15C3232.29,8099.18 3144.99,8079.23 3073.1,8058.23C3061.36,8054.62 3048.65,8059.09 3041.75,8069.24C3034.86,8079.4 3034.46,8093.71 3043.09,8102.44C3078.21,8137.94 3187.74,8210.21 3271.7,8241.83C3204.04,8303.2 3162.1,8438.28 3146.33,8507.94C3125.17,8601.4 3127.75,8734.83 3136.19,8783.45C3170.14,8979.04 3250.69,9151.99 3436.99,9297.9C3567.4,9400.03 3752.28,9465.38 3937.88,9460.06C4194.01,9452.71 4495.48,9328.51 4724.65,9070.17C5023.25,8710.58 5208.52,8252.45 5223.47,7749.5C5259.08,6551.9 4315.7,5550.69 3118.1,5515.08C1920.51,5479.47 919.301,6422.86 883.689,7620.45C865.246,8240.66 1109.37,8808.21 1515.43,9216.2C1526.73,9227.39 1544.21,9229.43 1557.78,9221.14C1571.35,9212.85 1577.51,9196.36 1572.7,9181.2C1234.07,8072.55 1799.11,6832.64 2474.84,6417.1C2725.71,6262.82 2973.99,6197.06 3203.56,6277.7C3555.04,6401.15 3763.03,6623.26 4199.06,6797.93C4635.09,6972.59 4696.35,7294.74 4592.58,7628.14C4488.81,7961.54 4113,8144.17 3745.03,8143.22ZM2917.17,6442.51C2777.75,6459.97 2693.93,6637.44 2687.08,6749.42C2680.18,6861.39 2744.03,7042.7 2926.19,7030.63C3139.52,7016.49 3195.89,6830.7 3164.24,6654.94C3140.48,6522.94 3033.73,6427.9 2917.17,6442.51Z"/></g><g transform="matrix(7.123,0.544,-0.544,7.123,-4867.49,-1040.55)"><path fill="currentColor" d="M721.316,105.751C722.813,105.518 724.225,106.703 724.582,108.395C725.058,110.649 724.402,113.065 721.658,113.329C719.314,113.555 718.422,111.242 718.468,109.796C718.513,108.35 719.525,106.03 721.316,105.751Z"/></g></svg>Deno</span></h1>
+    <h1>Build Desktop Apps<br/><span class="deno-line">With <svg class="deno-logo-hero" viewBox="0 0 441 441" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1.02631,0,0,1.02631,-0.526,-0.525)"><path fill="currentColor" d="M37.965,296.635C26.441,271.766 20.009,244.065 20.009,214.873C20.009,207.318 20.439,199.863 21.278,192.531C22.129,185.123 23.39,177.852 25.036,170.742C34.286,130.852 55.801,95.64 85.384,69.301C110.233,47.207 140.674,31.444 174.043,24.299C187.212,21.486 200.872,20.006 214.875,20.006C219.783,20.011 224.727,20.2 229.701,20.579C253.285,22.38 275.571,28.317 295.904,37.625C312.305,45.143 327.486,54.87 341.064,66.426C375.17,95.48 398.957,135.953 406.867,181.369C408.757,192.255 409.742,203.45 409.742,214.873C409.738,219.789 409.548,224.74 409.168,229.721C407.731,248.545 403.659,266.542 397.34,283.379C388.521,306.83 375.308,328.136 358.706,346.294C337.113,368.342 309.673,378.152 286.755,377.744C270.09,377.447 253.784,370.816 242.516,361.114C226.42,347.253 219.918,331.409 217.69,313.729C217.136,309.334 217.461,297.358 219.748,289.066C221.453,282.885 225.777,270.948 232.1,265.727C224.703,262.541 215.183,255.604 212.182,252.274C211.445,251.455 211.54,250.174 212.2,249.292C212.861,248.41 214.02,248.062 215.057,248.435C221.416,250.618 229.161,252.771 237.327,254.137C248.067,255.932 261.424,258.194 274.955,258.859C307.946,260.479 342.407,245.67 353.103,216.207C363.798,186.744 359.649,157.602 321.279,140.121C282.909,122.64 265.185,101.856 234.183,89.32C213.934,81.131 191.396,85.992 168.257,98.78C105.931,133.223 50.092,242.048 75.833,342.873C76.201,344.252 75.58,345.705 74.328,346.392C73.156,347.036 71.713,346.852 70.741,345.962C63.25,337.731 56.454,328.857 50.445,319.433C45.796,312.139 41.623,304.524 37.965,296.635Z"/></g><g transform="matrix(0.092,0.004,-0.004,0.092,-28.127,-500.301)"><path fill="#0a0a0c" d="M3053.7,5296.9C4371.65,5296.9 5441.66,6366.91 5441.66,7684.86C5441.66,9002.81 4371.65,10072.8 3053.7,10072.8C1735.75,10072.8 665.74,9002.81 665.74,7684.86C665.74,6366.91 1735.75,5296.9 3053.7,5296.9ZM3745.03,8143.22C3594.12,8142.82 3444.31,8124.57 3323.87,8110.15C3232.29,8099.18 3144.99,8079.23 3073.1,8058.23C3061.36,8054.62 3048.65,8059.09 3041.75,8069.24C3034.86,8079.4 3034.46,8093.71 3043.09,8102.44C3078.21,8137.94 3187.74,8210.21 3271.7,8241.83C3204.04,8303.2 3162.1,8438.28 3146.33,8507.94C3125.17,8601.4 3127.75,8734.83 3136.19,8783.45C3170.14,8979.04 3250.69,9151.99 3436.99,9297.9C3567.4,9400.03 3752.28,9465.38 3937.88,9460.06C4194.01,9452.71 4495.48,9328.51 4724.65,9070.17C5023.25,8710.58 5208.52,8252.45 5223.47,7749.5C5259.08,6551.9 4315.7,5550.69 3118.1,5515.08C1920.51,5479.47 919.301,6422.86 883.689,7620.45C865.246,8240.66 1109.37,8808.21 1515.43,9216.2C1526.73,9227.39 1544.21,9229.43 1557.78,9221.14C1571.35,9212.85 1577.51,9196.36 1572.7,9181.2C1234.07,8072.55 1799.11,6832.64 2474.84,6417.1C2725.71,6262.82 2973.99,6197.06 3203.56,6277.7C3555.04,6401.15 3763.03,6623.26 4199.06,6797.93C4635.09,6972.59 4696.35,7294.74 4592.58,7628.14C4488.81,7961.54 4113,8144.17 3745.03,8143.22ZM2917.17,6442.51C2777.75,6459.97 2693.93,6637.44 2687.08,6749.42C2680.18,6861.39 2744.03,7042.7 2926.19,7030.63C3139.52,7016.49 3195.89,6830.7 3164.24,6654.94C3140.48,6522.94 3033.73,6427.9 2917.17,6442.51Z"/></g><g transform="matrix(7.123,0.544,-0.544,7.123,-4867.49,-1040.55)"><path fill="currentColor" d="M721.316,105.751C722.813,105.518 724.225,106.703 724.582,108.395C725.058,110.649 724.402,113.065 721.658,113.329C719.314,113.555 718.422,111.242 718.468,109.796C718.513,108.35 719.525,106.03 721.316,105.751Z"/></g></svg>Deno</span></h1>
 
     <p class="subtitle">
       Forge is an Electron alternative using <strong>Deno</strong> and native <strong>WebViews</strong>.<br/>
@@ -63,7 +62,7 @@
     display: flex;
     flex-direction: column;
     overflow: hidden;
-    background: linear-gradient(180deg, #0a0a0a 0%, #111118 100%);
+    background: linear-gradient(180deg, #050505 0%, #0a0a0c 100%);
   }
 
   .hero-glow {
@@ -73,7 +72,7 @@
     transform: translateX(-50%);
     width: 150%;
     height: 100%;
-    background: radial-gradient(ellipse at center, rgba(0, 102, 204, 0.15) 0%, transparent 60%);
+    background: radial-gradient(ellipse at center, rgba(237, 137, 54, 0.15) 0%, transparent 60%);
     pointer-events: none;
   }
 
@@ -130,13 +129,28 @@
     z-index: 10;
   }
 
+  .hero-logo {
+    width: 120px;
+    height: 120px;
+    margin-bottom: 1.75rem;
+    border-radius: 28px;
+    filter: drop-shadow(0 10px 40px rgba(237, 137, 54, 0.4));
+  }
+
+  @media (max-width: 640px) {
+    .hero-logo {
+      width: 96px;
+      height: 96px;
+    }
+  }
+
   .badge {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     padding: 0.5rem 1rem;
-    background: rgba(0, 102, 204, 0.15);
-    border: 1px solid rgba(0, 102, 204, 0.3);
+    background: rgba(237, 137, 54, 0.15);
+    border: 1px solid rgba(237, 137, 54, 0.3);
     border-radius: 100px;
     font-size: 0.85rem;
     color: #66b3ff;
@@ -156,7 +170,7 @@
   }
 
   .gradient {
-    background: linear-gradient(135deg, #0066cc 0%, #00b4d8 50%, #00d4aa 100%);
+    background: linear-gradient(135deg, #ed8936 0%, #f59e0b 50%, #fcd34d 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
@@ -237,12 +251,12 @@
   }
 
   .btn-primary {
-    background: #0066cc;
+    background: #ed8936;
     color: white;
   }
 
   .btn-primary:hover {
-    background: #0077ee;
+    background: #f59e0b;
     transform: translateY(-1px);
   }
 

site/src/components/QuickStart.astro

@@ -56,7 +56,7 @@ const steps = [
 <style>
   .quickstart {
     padding: 6rem 2rem;
-    background: linear-gradient(180deg, #0d0d10 0%, #0a0a0a 100%);
+    background: linear-gradient(180deg, #070708 0%, #050505 100%);
   }
 
   .container {
@@ -98,7 +98,7 @@ const steps = [
   .step-number {
     width: 40px;
     height: 40px;
-    background: linear-gradient(135deg, #0066cc, #0088ee);
+    background: linear-gradient(135deg, #ed8936, #f59e0b);
     border-radius: 50%;
     display: flex;
     align-items: center;
@@ -115,7 +115,7 @@ const steps = [
   }
 
   .step-code {
-    background: #0a0a0a;
+    background: #050505;
     border: 1px solid #1a1a1a;
     border-radius: 6px;
     padding: 0.75rem;
@@ -125,7 +125,7 @@ const steps = [
   .step-code code {
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.8rem;
-    color: #00cc88;
+    color: #fbbf24;
     white-space: nowrap;
   }
 
@@ -146,12 +146,12 @@ const steps = [
   }
 
   .btn-primary {
-    background: #0066cc;
+    background: #ed8936;
     color: white;
   }
 
   .btn-primary:hover {
-    background: #0077ee;
+    background: #f59e0b;
     transform: translateY(-2px);
   }
 </style>

site/src/pages/index.astro

@@ -31,7 +31,7 @@ import Footer from '../components/Footer.astro';
       }
       body {
         font-family: 'Inter', system-ui, sans-serif;
-        background: #0a0a0a;
+        background: #050505;
         color: #fafafa;
         line-height: 1.6;
       }

site/src/styles/custom.css

@@ -4,23 +4,25 @@
 
 /* Starlight custom styles */
 :root {
-  --sl-color-accent-low: #001a33;
-  --sl-color-accent: #0066cc;
-  --sl-color-accent-high: #b3d4ff;
+  /* Ember accent + warm-neutral grays drawn from the Forge logo
+     (black anvil on a copper/amber forge-glow). */
+  --sl-color-accent-low: #3a1c08;
+  --sl-color-accent: #ed8936;
+  --sl-color-accent-high: #fcdcbc;
   --sl-color-white: #ffffff;
-  --sl-color-gray-1: #eceef5;
-  --sl-color-gray-2: #c0c4d2;
-  --sl-color-gray-3: #888da4;
-  --sl-color-gray-4: #545968;
-  --sl-color-gray-5: #363a4a;
-  --sl-color-gray-6: #252833;
-  --sl-color-black: #17191e;
+  --sl-color-gray-1: #eeebe5;
+  --sl-color-gray-2: #c6c1b8;
+  --sl-color-gray-3: #8d877c;
+  --sl-color-gray-4: #57514a;
+  --sl-color-gray-5: #383330;
+  --sl-color-gray-6: #211e1b;
+  --sl-color-black: #100e0c;
 }
 
 :root[data-theme='light'] {
-  --sl-color-accent-low: #b3d4ff;
-  --sl-color-accent: #0066cc;
-  --sl-color-accent-high: #003366;
+  --sl-color-accent-low: #fcebd5;
+  --sl-color-accent: #b85619;
+  --sl-color-accent-high: #5c2e08;
 }
 
 /* Code block styling */
@@ -31,7 +33,7 @@
 /* Landing page styles */
 .landing-hero {
   @apply relative overflow-hidden;
-  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%);
+  background: linear-gradient(135deg, #050505 0%, #0a0a0c 100%);
 }
 
 .landing-hero::before {
@@ -41,13 +43,13 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: radial-gradient(ellipse at top, rgba(0, 102, 204, 0.15) 0%, transparent 70%);
+  background: radial-gradient(ellipse at top, rgba(237, 137, 54, 0.15) 0%, transparent 70%);
   pointer-events: none;
 }
 
 .gradient-text {
   @apply bg-clip-text text-transparent;
-  background-image: linear-gradient(135deg, #0066cc 0%, #00b4d8 100%);
+  background-image: linear-gradient(135deg, #ed8936 0%, #f59e0b 100%);
 }
 
 .feature-card {