feat: apply the stackmap brand

README.md

@@ -1,8 +1,9 @@
-# stackmap
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="assets/brand/stackmap-readme-header-dark.svg">
+  <img alt="stackmap: architecture diagrams your coding agent writes, as one offline HTML file" src="assets/brand/stackmap-readme-header.svg" width="640">
+</picture>
 
-**Architecture and data-flow diagrams that your coding agent writes, delivered as one offline HTML file.**
-
-You ask your agent to diagram a codebase or a system. It writes a small typed JSON, `stackmap` validates it with repair hints the agent acts on, lays it out, and hands you a single self-contained viewer — pan and zoom, search, trace upstream and downstream, guided views, dark and light themes, PNG/SVG export. No server, no account, nothing to install to open it.
+You ask your agent to diagram a codebase or a system. It writes a small typed JSON, stackmap validates it with repair hints the agent acts on, lays it out, and hands you a single self-contained viewer — pan and zoom, search, trace upstream and downstream, guided views, dark and light themes, PNG/SVG export. No server, no account, nothing to install to open it.
 
 <p align="center">
   <img src="assets/readme/viewer-light.png" alt="stackmap viewer in light mode: a Commerce API topology with the Orders database selected and its upstream traced; the inspector shows its details, connections and source evidence" width="49%" />
@@ -86,6 +87,8 @@ cd packages/cli && bunx playwright test               # delivered-file + live-se
 | `packages/cli` | `@hyamero/stackmap`: validate · deliver · serve |
 | `skill/` | the agent skill that `npx skills add` installs |
 
+The mark, lockups, icons and social card are in [`assets/brand/`](assets/brand/), with the rules for using them.
+
 Visual regression baselines are Linux-only and are checked in CI. Regenerate them with the CI workflow's *update-visual* run (it uploads them as an artifact), or locally with `bun run --filter @stackmap/viewer visual:update` (Playwright's Linux image in Docker). `bun run --filter @stackmap/viewer metrics:gen` regenerates the font metrics after a font change.
 
 ## Credits

assets/brand/README.md

@@ -0,0 +1,39 @@
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="stackmap-lockup-dark.svg">
+  <img alt="stackmap" src="stackmap-lockup.svg" height="48">
+</picture>
+
+# Brand assets
+
+The stackmap mark is one connection routed across the dot grid, from a grey source card to an indigo target card. Everything else stays as quiet as the viewer: ink on neutral grounds, Geist, and one touch of colour.
+
+Every file carries explicit colours, so pick the light file or its `-dark` twin to match the ground. Text is outlined from Geist 600, so no font is needed.
+
+| File | Use |
+|---|---|
+| `stackmap-mark.svg`, `-dark` | The full mark with grid dots, at 48px and up |
+| `stackmap-mark-compact.svg`, `-dark` | 16–32px: no dots, heavier route, taller cards |
+| `stackmap-mark-mono-black.svg`, `-white` | One ink, for single-colour print and embossing |
+| `stackmap-lockup.svg`, `-dark` | The default horizontal lockup |
+| `stackmap-lockup-small.svg`, `-dark` | Lockups 32px tall or less: nav bars, badges, sidebars |
+| `stackmap-lockup-stacked.svg`, `-dark` | Square slots: avatars, stickers, title cards |
+| `stackmap-wordmark.svg`, `-dark` | The name alone, where the mark would be under 16px |
+| `stackmap-app-icon.svg`, `-512.png`, `stackmap-apple-touch-icon-180.png` | The full mark on the near-black icon tile |
+| `stackmap-favicon.svg`, `-32.png`, `-16.png` | The compact mark on the icon tile (inlined in the viewer) |
+| `stackmap-readme-header.svg`, `-dark` | The 1280×320 README header, in a `<picture>` at 640px wide |
+| `stackmap-social-card.png`, `.svg`, `-light.svg` | The 1200×630 link preview (`og:image`, the GitHub social preview) |
+
+## Rules
+
+- Keep a quarter of the mark's height clear on every side.
+- The source card stays grey and the target card stays indigo (`#4f63c9` light, `#8fa6f2` dark). The route and dots are always ink. Never recolour, swap, rotate, mirror, outline or shadow the mark.
+- Put the mark on the page grey or the stage (white or near-black). On anything else, use the mono mark or the app icon tile.
+- The name is always "stackmap", lowercase, in Geist 600 at -0.035em. Use the outlined files; never retype it.
+- The brand accent belongs to brand surfaces (README, social card, CLI output). Inside the viewer, colour means node type and nothing else.
+- In the terminal: the wordmark in bold, a middle dot, the command; output paths in the accent. Plain text when piped or with `NO_COLOR`.
+
+## Voice
+
+- **Tagline:** Every layer of your stack, on one map.
+- **Descriptor:** Architecture diagrams your coding agent writes, as one offline HTML file.
+- Plain, exact and calm. Say what it does, in the viewer's words: diagram, node, connection, view, your coding agent. No emoji, no exclamation marks, no "seamless", "supercharge" or "AI-powered".