docs: refresh illustrated project branding

README.md

@@ -1,6 +1,10 @@
 <div align="center">
 
-<img src="docs/public/logo.svg" alt="temporal-contract" width="128" height="128" />
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="docs/public/logo-dark.svg" />
+  <source media="(prefers-color-scheme: light)" srcset="docs/public/logo-light.svg" />
+  <img src="docs/public/logo.svg" alt="temporal-contract mascot: a small rounded leafless beet at the bottom of an hourglass beneath pink flow and drops" width="128" height="128" />
+</picture>
 
 # temporal-contract
 

docs/.vitepress/config.ts

@@ -270,7 +270,7 @@ export default withMermaid(
     },
 
     head: [
-      ["link", { rel: "icon", type: "image/svg+xml", href: `${BASE}logo.svg` }],
+      ["link", { rel: "icon", type: "image/svg+xml", href: `${BASE}favicon.svg` }],
       // SEO keywords meta tags
       [
         "meta",

docs/.vitepress/theme/custom.css

@@ -12,10 +12,7 @@
   --vp-home-hero-name-color: var(--text-accent);
 }
 
-/* Home-hero background glyph — the project's motif behind the hero (a durable
- * timeline with a clock). Painted in --accent through a mask, so it always
- * tracks the accent token; the SVG is base64-encoded so no CSS minifier can
- * mangle it. */
+/* Use the project silhouette as the decorative hero backdrop. */
 .VPHome {
   position: relative;
   isolation: isolate;
@@ -32,10 +29,8 @@
   right: var(--btv-gutter);
   aspect-ratio: 500 / 300;
   background-color: var(--accent);
-  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MDAgMzAwIiBmaWxsPSJub25lIj48cGF0aCBkPSJNNDAsMTUwIEg0NjAiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIi8+PHBhdGggZD0iTTEwMCwxMzggVjE2MiBNMTgwLDEzOCBWMTYyIE0yNjAsMTM4IFYxNjIgTTM0MCwxMzggVjE2MiBNNDIwLDEzOCBWMTYyIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIvPjxjaXJjbGUgY3g9IjI2MCIgY3k9IjE1MCIgcj0iOCIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0yNjAsMTUwIG0wLC0yNiBhMjYsMjYgMCAxIDEgLTE4LDQ0IiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==")
-    no-repeat top center / contain;
-  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MDAgMzAwIiBmaWxsPSJub25lIj48cGF0aCBkPSJNNDAsMTUwIEg0NjAiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIi8+PHBhdGggZD0iTTEwMCwxMzggVjE2MiBNMTgwLDEzOCBWMTYyIE0yNjAsMTM4IFYxNjIgTTM0MCwxMzggVjE2MiBNNDIwLDEzOCBWMTYyIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIvPjxjaXJjbGUgY3g9IjI2MCIgY3k9IjE1MCIgcj0iOCIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0yNjAsMTUwIG0wLC0yNiBhMjYsMjYgMCAxIDEgLTE4LDQ0IiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==")
-    no-repeat top center / contain;
+  -webkit-mask: url("/logo-mono.svg") no-repeat top center / contain;
+  mask: url("/logo-mono.svg") no-repeat top center / contain;
   opacity: 0.14;
   pointer-events: none;
   z-index: -1;

docs/branding/README.md

@@ -0,0 +1,21 @@
+# temporal-contract branding
+
+The illustrated mascot preserves the btravstack pink beet and its original
+project motif: a small rounded leafless beet at the bottom of an hourglass beneath pink flow and drops. The canonical
+source is [the website brand generator](https://github.com/btravstack/btravstack.github.io/blob/main/scripts/generate-brand.mjs).
+
+To refresh them, run the generator in that repository and copy the generated
+`apps/website/public/logos/temporal-contract-{light,dark,mono,favicon}.svg`
+files into `docs/public/` as `logo-light.svg`, `logo-dark.svg`, `logo-mono.svg`
+and `favicon.svg`. Keep `logo.svg` identical to `logo-light.svg` as the fallback.
+The matching social card is `docs/public/og-temporal-contract.png` (1200 × 630),
+rendered from the [editable social-card template](https://github.com/btravstack/btravstack.github.io/blob/main/branding/social-card.html)
+with `?project=temporal-contract`.
+
+The README, documentation navigation and hero select a mark for the reader's
+color scheme. The monochrome variant preserves the illustration in grayscale
+and supplies the decorative CSS mask. A dedicated variant serves as the favicon.
+All assets are
+committed locally so documentation builds and deployed pages remain independent
+of the website repository. The docs configuration applies the current deployment
+base to favicon and social-card URLs, including prerelease deployments.

docs/index.md

@@ -10,7 +10,7 @@ hero:
   image:
     light: /logo-light.svg
     dark: /logo-dark.svg
-    alt: temporal-contract
+    alt: "temporal-contract mascot: a small rounded leafless beet at the bottom of an hourglass beneath pink flow and drops"
   actions:
     - theme: brand
       text: Your first workflow