feat(docs): add the new logo, a press kit and a reworked home page

README.md

@@ -1,3 +1,7 @@
+<p align="center">
+  <img src="./apps/docs/public/press/logo/svg/app-icon-animated.svg" alt="Pangular Inspector logo" width="128" height="128" />
+</p>
+
 # Pangular Inspector
 
 The unified Angular devtools. Inspect Angular component trees, signals, dependency injection, routes, forms, pipes and NgRx stores at dev time, build time, or through a coding agent. Built with [Devframe](https://devfra.me) so the same tool runs as an embedded panel, standalone CLI, static report, MCP server, or Chrome DevTools extension.
@@ -18,6 +22,7 @@ Read the docs at [pangular-inspector.dev](https://pangular-inspector.dev). Their
 - [Inspectors](./apps/docs/src/content/inspectors/dashboard.md)
 - [Agent tools](./apps/docs/src/content/agents/mcp-server.md)
 - [Security](./apps/docs/src/content/security.md)
+- [Press kit](./apps/docs/src/content/press-kit.md): name, logo, colors, descriptions and screenshots
 - [Contributing](./CONTRIBUTING.md)
 
 ## Maintainers

app/index.html

@@ -8,6 +8,7 @@
     <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
     <script src="./theme-init.js"></script>
     <title>Pangular Inspector</title>
+    <link rel="icon" href="./favicon.svg" type="image/svg+xml" />
     <link rel="stylesheet" href="./src/styles/main.scss" />
   </head>
   <body>

app/src/app.ts

@@ -181,7 +181,7 @@ function readView(): View | null {
   template: `
     <header>
       <h1 class="brand">
-        <span class="mark" [class.ng-mark]="view() === 'angular'">
+        <span class="mark" [class.ng-mark]="view() === 'angular'" [class.pi-mark]="!view()">
           @if (view() === 'nativescript') {
             <svg width="22" height="22" viewBox="0 0 256 256" aria-hidden="true">
               <path
@@ -269,16 +269,81 @@ function readView(): View | null {
               />
             </svg>
           } @else {
-            <svg
-              width="20"
-              height="22"
-              viewBox="0 0 223 236"
-              fill="currentColor"
-              aria-hidden="true"
-            >
-              <path
-                d="m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"
-              />
+            <svg width="30" height="30" viewBox="0 0 500 500" aria-hidden="true">
+              <rect width="500" height="500" rx="112" fill="#1c1a17" />
+              <g transform="translate(250 252) scale(1.38) translate(-120 -129)">
+                <defs>
+                  <mask id="pi-mark-mask">
+                    <rect x="-60" y="-60" width="360" height="380" fill="#fff" />
+                    <g fill="none" stroke="#000" stroke-width="30" stroke-linejoin="miter">
+                      <path d="M88 66 V196" />
+                      <path d="M88 66 H143 L170 98 L143 130 H88 Z" />
+                    </g>
+                  </mask>
+                  <clipPath id="pi-mark-clip">
+                    <rect x="-40" y="129" width="320" height="200" />
+                  </clipPath>
+                </defs>
+                <g transform="rotate(-10 120 129)">
+                  <ellipse
+                    cx="120"
+                    cy="129"
+                    rx="128"
+                    ry="34"
+                    fill="none"
+                    stroke="#78350f"
+                    stroke-width="10"
+                  />
+                </g>
+                <g mask="url(#pi-mark-mask)">
+                  <path fill="#fbbf24" d="M120 5 L2 46 L22 198 L120 253 Z" />
+                  <path fill="#f59e0b" d="M120 5 L238 46 L218 198 L120 253 Z" />
+                </g>
+                <g transform="rotate(-10 120 129)">
+                  <ellipse
+                    clip-path="url(#pi-mark-clip)"
+                    cx="120"
+                    cy="129"
+                    rx="128"
+                    ry="34"
+                    fill="none"
+                    stroke="#1c1a17"
+                    stroke-width="22"
+                  />
+                  <ellipse
+                    clip-path="url(#pi-mark-clip)"
+                    cx="120"
+                    cy="129"
+                    rx="128"
+                    ry="34"
+                    fill="none"
+                    stroke="#fde68a"
+                    stroke-width="10"
+                  />
+                  <g transform="translate(230.9 146.0) rotate(10) scale(1.5) translate(-4 -4)">
+                    <line
+                      x1="9"
+                      y1="9"
+                      x2="21"
+                      y2="21"
+                      stroke="#1c1a17"
+                      stroke-width="14"
+                      stroke-linecap="round"
+                    />
+                    <circle r="16" fill="#1c1a17" />
+                    <line
+                      x1="9"
+                      y1="9"
+                      x2="21"
+                      y2="21"
+                      stroke="#fde68a"
+                      stroke-width="7"
+                      stroke-linecap="round"
+                    />
+                    <circle r="12" fill="#1c1a17" stroke="#fde68a" stroke-width="5" />
+                  </g>
+                </g>
+              </g>
             </svg>
           }
         </span>
@@ -438,6 +503,10 @@ function readView(): View | null {
       background: color-mix(in srgb, var(--accent) 8%, transparent);
       box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
     }
+    .mark.pi-mark {
+      background: none;
+      box-shadow: none;
+    }
     .mark.ng-mark {
       background: linear-gradient(
         135deg,

apps/docs/index.html

@@ -4,8 +4,7 @@
     <meta charset="utf-8" />
     <title>%SITE_NAME%</title>
     <meta name="description" content="%SITE_DESCRIPTION%" />
-    <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
-    <meta name="theme-color" content="#0a0a0a" media="(prefers-color-scheme: dark)" />
+    <meta name="theme-color" content="#0a0a0a" />
     <meta property="og:type" content="website" />
     <meta property="og:site_name" content="%SITE_NAME%" />
     <meta property="og:title" content="%SITE_NAME%" />
@@ -21,9 +20,16 @@
     <meta name="twitter:image" content="%SITE_URL%/og.png" />
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
-    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <meta name="application-name" content="%SITE_NAME%" />
+    <meta name="apple-mobile-web-app-title" content="Pangular" />
+    <link rel="icon" href="/favicon.ico" sizes="48x48" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#f59e0b" />
+    <link rel="manifest" href="/site.webmanifest" />
+    <meta name="msapplication-TileColor" content="#1c1a17" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
@@ -34,16 +40,11 @@
     <script>
       (function () {
         try {
-          var stored = localStorage.getItem('ngmd-theme');
-          var mode = stored === 'light' || stored === 'dark' ? stored : 'auto';
-          var resolved =
-            mode === 'auto'
-              ? matchMedia('(prefers-color-scheme: dark)').matches
-                ? 'dark'
-                : 'light'
-              : mode;
-          if (resolved === 'dark') document.documentElement.classList.add('dark');
-        } catch (_) {}
+          if (localStorage.getItem('ngmd-theme') !== 'light')
+            document.documentElement.classList.add('dark');
+        } catch (_) {
+          document.documentElement.classList.add('dark');
+        }
       })();
     </script>
   </head>