Use the orange Fulldev mark for Sitex

.changeset/rare-ravens-kiss.md

@@ -0,0 +1,2 @@
+---
+---

apps/docs/DESIGN.md

@@ -0,0 +1,7 @@
+# Sitex docs
+
+The docs use shadcn's base-vega components. The product name is Sitex.
+
+The logo is the white Fulldev mark on the orange tile, matching Fulldev UI.
+The sidebar, mobile header, favicon and social image use the same mark,
+tile proportions, sheen and fine white rim.

apps/docs/src/components/ui/logo.tsx

@@ -1,4 +1,4 @@
-import { type ComponentProps, type HTMLAttributes } from "react"
+import { type ComponentProps, type HTMLAttributes, useId } from "react"
 
 import { cn } from "@/lib/utils"
 
@@ -22,6 +22,8 @@ function Logo({ className, href, ...props }: LogoProps) {
 }
 
 function LogoImage({ className, ...props }: LogoImageProps) {
+  const sheenId = useId()
+
   return (
     <span
       className={cn("inline-flex size-[30px] shrink-0 text-current", className)}
@@ -35,12 +37,38 @@ function LogoImage({ className, ...props }: LogoImageProps) {
         viewBox="0 0 32 32"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <rect width="32" height="32" rx="7" fill="#ff5e00" />
-        <path
-          d="M6.8 6.6 16 12.7l9.2-6.1-6.1 9.4 6.1 9.4-9.2-6.1-9.2 6.1 6.1-9.4z"
-          fill="#ffffff"
-          transform="translate(16 16) scale(1.12) translate(-16 -16)"
+        <defs>
+          <linearGradient id={sheenId} x1="0" y1="0" x2="0" y2="1">
+            <stop stopColor="white" stopOpacity="0.17" />
+            <stop offset="0.55" stopColor="white" stopOpacity="0" />
+          </linearGradient>
+        </defs>
+        <rect width="32" height="32" rx="6.048" fill="#d34110" />
+        <rect width="32" height="32" rx="6.048" fill={`url(#${sheenId})`} />
+        <rect
+          x="0.25"
+          y="0.25"
+          width="31.5"
+          height="31.5"
+          rx="5.798"
+          stroke="white"
+          strokeOpacity="0.22"
+          strokeWidth="0.5"
         />
+        <g transform="translate(10.016 5.573) scale(0.9066666666666667)">
+          <path
+            d="M9.955 0.313C5.246 1.263 1.658 3.599 0.434 6.534C0.19 7.118 0.046 7.725 0.009 8.348C-0.003 8.552 0.11 8.743 0.294 8.83C0.479 8.917 0.698 8.883 0.848 8.744C1.78 7.881 4.717 5.41 10.404 4.48C11.847 4.244 12.134 3.917 11.95 2.206C11.766 0.495 11.389 0.024 9.955 0.313Z"
+            fill="white"
+          />
+          <path
+            d="M9.88 6.991C5.285 7.935 2.974 9.921 2.178 10.698C0.632 12.206 0 13.835 0 15.33C0 19.489 4.773 22.976 11.193 23.899C11.753 23.979 11.894 23.839 11.976 23.179C12.057 22.518 11.949 22.386 11.392 22.29C6.958 21.533 3.726 19.389 3.58 16.84C3.535 16.049 3.76 14.692 5.536 13.328C6.736 12.406 8.42 11.671 10.4 11.223C11.851 10.893 12.152 10.624 11.938 8.886C11.725 7.148 11.338 6.691 9.88 6.991Z"
+            fill="white"
+          />
+          <path
+            d="M11.193 17.238C5.987 16.49 3.213 14.334 2.104 13.229L4.381 12.195C5.161 13.214 7.18 14.91 11.392 15.63C11.949 15.725 12.057 15.858 11.976 16.518C11.894 17.179 11.753 17.319 11.193 17.238Z"
+            fill="white"
+          />
+        </g>
       </svg>
     </span>
   )

apps/docs/src/layouts/base.tsx

@@ -49,6 +49,8 @@ export default function BaseLayout({
           }
         }
       >
+        <link rel="icon" href="/favicon.png" type="image/png" sizes="96x96" />
+        <link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any" />
         <ThemeScript {...theme} />
         <link rel="alternate" type="text/markdown" href={markdownPath(path)} />
       </LayoutHead>