Logo: README header, docs favicon, toolbar icon and link previews

media/ holds the new logo assets (SVGs with text as paths, favicon.ico,
apple-touch-icon, social preview, Discord icon). The README's heading is
the wordmark with tagline (light and dark by <picture>, absolute URLs so
it shows on npm and JSR too) and the Documentation badge carries the
mark. The docs get the favicon and the mark in the toolbar (typedoc's
favicon and customCss), and scripts/docs.js adds a real description,
Open Graph/Twitter tags with the social preview, /favicon.ico and
/apple-touch-icon.png, and swaps the README's <picture> for two images
following the docs' own theme setting instead of the OS's.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BsU2GAqbnFSNaYDBGD1Km2

Author: matmen

README.md

@@ -1,7 +1,12 @@
-# ImageScript
-##### zero-dependency JavaScript image manipulation
+<h1 align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/matmen/ImageScript/master/media/wordmark-tagline-dark.svg">
+    <img alt="ImageScript: Pure TypeScript image processing that runs everywhere" src="https://raw.githubusercontent.com/matmen/ImageScript/master/media/wordmark-tagline.svg" width="640">
+  </picture>
+</h1>
+
 [![Discord Server](https://img.shields.io/discord/691713541262147687.svg?label=Discord&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2&style=for-the-badge)](https://discord.gg/8hPrwAH)
-[![Documentation](https://img.shields.io/badge/Documentation-informational?style=for-the-badge)](https://imagescript.dev/)
+[![Documentation](https://img.shields.io/badge/Documentation-informational?style=for-the-badge&logo=data:image/svg%2bxml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsPSJJbWFnZVNjcmlwdCI+PHRpdGxlPkltYWdlU2NyaXB0PC90aXRsZT48cGF0aCBkPSJNMTMyIDk2aC0xNGEzNCAzNCAwIDAgMC0zNCAzNHY3NGEzMCAzMCAwIDAgMS0zMCAzMGgtNnY0NGg2YTMwIDMwIDAgMCAxIDMwIDMwdjc0YTM0IDM0IDAgMCAwIDM0IDM0aDE0IE0zODAgOTZoMTRhMzQgMzQgMCAwIDEgMzQgMzR2NzRhMzAgMzAgMCAwIDAgMzAgMzBoNnY0NGgtNmEzMCAzMCAwIDAgMC0zMCAzMHY3NGEzNCAzNCAwIDAgMS0zNCAzNGgtMTQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIzMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHJlY3QgeD0iMTY0IiB5PSIxNjQiIHdpZHRoPSI1NiIgaGVpZ2h0PSI1NiIgcng9IjEwIiBmaWxsPSIjZmZmIi8+PHJlY3QgeD0iMjI4IiB5PSIxNjQiIHdpZHRoPSI1NiIgaGVpZ2h0PSI1NiIgcng9IjEwIiBmaWxsPSIjZmZmIi8+PHJlY3QgeD0iMjkyIiB5PSIxNjQiIHdpZHRoPSI1NiIgaGVpZ2h0PSI1NiIgcng9IjEwIiBmaWxsPSIjZmZmIi8+PHJlY3QgeD0iMTY0IiB5PSIyMjgiIHdpZHRoPSI1NiIgaGVpZ2h0PSI1NiIgcng9IjEwIiBmaWxsPSIjZmZmIi8+PHJlY3QgeD0iMjI4IiB5PSIyMjgiIHdpZHRoPSI1NiIgaGVpZ2h0PSI1NiIgcng9IjEwIiBmaWxsPSIjZmZmIi8+PHJlY3QgeD0iMjkyIiB5PSIyMjgiIHdpZHRoPSI1NiIgaGVpZ2h0PSI1NiIgcng9IjEwIiBmaWxsPSIjZmZmIi8+PHJlY3QgeD0iMTY0IiB5PSIyOTIiIHdpZHRoPSI1NiIgaGVpZ2h0PSI1NiIgcng9IjEwIiBmaWxsPSIjZmZmIi8+PHJlY3QgeD0iMjI4IiB5PSIyOTIiIHdpZHRoPSI1NiIgaGVpZ2h0PSI1NiIgcng9IjEwIiBmaWxsPSIjZmZmIi8+PHJlY3QgeD0iMjkyIiB5PSIyOTIiIHdpZHRoPSI1NiIgaGVpZ2h0PSI1NiIgcng9IjEwIiBmaWxsPSIjZmZmIi8+PC9zdmc+Cg==)](https://imagescript.dev/)
 [![Github](https://img.shields.io/badge/Github-Repository-181717?logo=github&style=for-the-badge)](https://github.com/matmen/ImageScript)
 [![NPM](https://nodei.co/npm/imagescript.png)](https://www.npmjs.com/package/imagescript)
 

media/README.md

@@ -0,0 +1,38 @@
+# ImageScript logo assets
+
+The `{■}` mark: curly braces around a 3×3 pixel mosaic. All text is converted to paths, so the SVGs render
+the same everywhere without fonts (Inter ExtraBold + JetBrains Mono Medium/Regular were used).
+
+## Files
+
+| File | Use |
+|---|---|
+| `favicon.svg`, `favicon.ico` (16/32/48), `favicon-16/32/48.png` | imagescript.dev favicon |
+| `apple-touch-icon.png` (180, full bleed) | iOS home screen |
+| `icon-192.png`, `icon-512.png`, `icon-1024.png` | web manifest, general use |
+| `icon.svg` / `icon-dark-ring.svg` | app-style tile; the ring variant separates it from dark backgrounds |
+| `mark-transparent.svg` / `-dark.svg` | mark without tile, for light / dark backgrounds |
+| `mark-mono-black.svg` / `-white.svg` | single colour (print, stamps, shields.io `logo=`) |
+| `wordmark.svg` / `-dark.svg` (+ `.png` @2x) | icon + name, e.g. docs header |
+| `wordmark-tagline.svg` / `-dark.svg` (+ `.png` @2x) | icon + name + description, README header |
+| `social-preview.png` / `.svg` (1280×640) | GitHub social preview and `og:image` |
+| `discord-icon.png` (512, safe inside the circle crop) | Discord server icon |
+
+## Colours
+
+| | Hex |
+|---|---|
+| tile / ink | `#141821` |
+| braces on dark | `#F2F4F8` |
+| "Script" (light / dark bg) | `#3178C6` / `#6FA8FF` |
+| mosaic | `#FFC857` `#FF8C61` `#E85D8C` `#8E6CEF` `#4C7DF0` |
+
+## Where they're used
+
+- README header: `wordmark-tagline.svg` / `-dark.svg` by absolute URL, so it also shows on npm and JSR; the
+  Documentation badge has `mark-mono-white.svg` inlined as its logo
+- docs (imagescript.dev): `favicon.svg` and `docs.css` through `typedoc.json`; `scripts/docs.js` copies
+  `favicon.ico`, `apple-touch-icon.png` and `social-preview.png` to the site's root and adds the description and
+  Open Graph tags to every page
+- set by hand: `social-preview.png` as the repository's social preview (Settings → General → Social preview),
+  `discord-icon.png` as the Discord server's icon

media/apple-touch-icon.png

@@ -0,0 +1,39 @@
+/* typedoc's custom CSS for imagescript.dev (assets/custom.css, next to assets/favicon.svg) */
+
+/* the mark before the title in the toolbar */
+.tsd-page-toolbar .title {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5em;
+}
+
+.tsd-page-toolbar .title::before {
+    content: "";
+    flex: none;
+    width: 1.5em;
+    height: 1.5em;
+    background: url(favicon.svg) center / contain no-repeat;
+}
+
+/* the README's wordmark following typedoc's theme setting rather than the OS's (scripts/docs.js splits it in two) */
+.wordmark-dark {
+    display: none;
+}
+
+:root[data-theme="dark"] .wordmark-light {
+    display: none;
+}
+
+:root[data-theme="dark"] .wordmark-dark {
+    display: inline;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root[data-theme="os"] .wordmark-light {
+        display: none;
+    }
+
+    :root[data-theme="os"] .wordmark-dark {
+        display: inline;
+    }
+}