Adopt the Progmasoft brand language in the white Microsoft-style site header: replace the improvised gradient P badge with a crisp four-panel mark using the canonical palette, simplify the wordmark treatment, and separate the Account product label without embedding an oversized raster logo.

3 files changed, 44 insertions, 26 deletions

diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index cd2c90c..2cfb5b5 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -105,32 +105,50 @@ a {
 }
 
 .brand-mark {
-  width: 36px;
-  height: 36px;
+  width: 24px;
+  height: 24px;
   display: grid;
-  place-items: center;
-  border-radius: 3px 11px 3px 11px;
-  background: linear-gradient(145deg, var(--blue-500), var(--blue-700));
-  color: white;
-  font-size: 21px;
-  font-weight: 700;
-  box-shadow: 0 5px 14px rgb(0 102 184 / 25%);
+  flex: 0 0 auto;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  gap: 2px;
 }
 
-.brand-copy {
-  display: grid;
-  line-height: 1.15;
+.brand-tile {
+  display: block;
 }
 
-.brand-copy strong {
-  font-size: 18px;
+.brand-tile-slate {
+  background: #3b4658;
+}
+
+.brand-tile-teal {
+  background: #1e7188;
+}
+
+.brand-tile-violet {
+  background: #7655fa;
+}
+
+.brand-tile-orange {
+  background: #dc7644;
+}
+
+.brand-name {
+  color: #8e0000;
+  font-size: 20px;
+  font-weight: 650;
   letter-spacing: -0.02em;
+  line-height: 1;
 }
 
-.brand-copy small {
-  margin-top: 3px;
-  color: var(--ink-500);
-  font-size: 12px;
+.brand-product {
+  border-left: 2px solid var(--ink-800);
+  margin-left: 5px;
+  padding-left: 16px;
+  color: var(--ink-800);
+  font-size: 16px;
+  font-weight: 600;
 }
 
 .primary-nav {
diff --git a/apps/web/components/Brand.tsx b/apps/web/components/Brand.tsx
index 37b8396..8baf825 100644
--- a/apps/web/components/Brand.tsx
+++ b/apps/web/components/Brand.tsx
@@ -1,11 +1,10 @@
 import Link from "next/link";
 
 interface BrandProps {
-  compact?: boolean;
   account?: boolean;
 }
 
-export function Brand({ compact = false, account = false }: BrandProps) {
+export function Brand({ account = false }: BrandProps) {
   return (
     <Link
       className="brand"
@@ -16,12 +15,13 @@ export function Brand({ compact = false, account = false }: BrandProps) {
       }
     >
       <span className="brand-mark" aria-hidden="true">
-        P
-      </span>
-      <span className="brand-copy">
-        <strong>Progmasoft</strong>
-        {!compact && <small>{account ? "Account" : "Developer systems"}</small>}
+        <span className="brand-tile brand-tile-slate" />
+        <span className="brand-tile brand-tile-teal" />
+        <span className="brand-tile brand-tile-violet" />
+        <span className="brand-tile brand-tile-orange" />
       </span>
+      <strong className="brand-name">Progmasoft</strong>
+      {account && <span className="brand-product">Account</span>}
     </Link>
   );
 }
diff --git a/apps/web/components/Footer.tsx b/apps/web/components/Footer.tsx
index d61f5f4..2962522 100644
--- a/apps/web/components/Footer.tsx
+++ b/apps/web/components/Footer.tsx
@@ -5,7 +5,7 @@ export function Footer() {
     <footer className="site-footer">
       <div className="shell footer-grid">
         <div>
-          <Brand compact />
+          <Brand />
           <p>
             Programming-language infrastructure and developer systems built with
             durable contracts.