Merge pull request #18 from posecode-dev/claude/brand-icon

Author: a-baran-orhan

docs/brand/README.md

@@ -0,0 +1,39 @@
+# Posecode brand kit
+
+The Posecode mark is a **kinematic figure in an open, energetic pose**: bones are
+strokes, joints are markers, the same rig the app animates. It hints at the
+project (human movement + a technical rig) while staying friendly and legible
+down to 16px.
+
+## Palette
+
+| Token | Hex | Use |
+| --- | --- | --- |
+| Lime | `#c6f24a` | The figure / accent |
+| Lime (light) | `#d6ff5e` | Top of the figure gradient |
+| Lime (deep) | `#a9e02f` | Bottom of the figure gradient |
+| Ink | `#0a0d12` | Dark background / tile |
+
+Type: **Hanken Grotesk** (wordmark), **JetBrains Mono** (code).
+
+## Files
+
+| File | What it is |
+| --- | --- |
+| `posecode-mark.svg` | Figure only, `currentColor` (inherits text color). For inline logos. |
+| `posecode-mark-512.png` | Figure only, lime, transparent background. |
+| `posecode-icon.svg` | Rounded dark app-icon tile with glow + joint markers. |
+| `posecode-icon-512.png` | The app icon, rendered, transparent corners. Good for avatars. |
+| `posecode-icon-360.png` | Full-bleed square (no rounded corners) for iOS / masked contexts. |
+| `posecode-social.png` | 1280×640 GitHub social preview (mark + wordmark + tagline). |
+
+The live favicon (`playground/public/favicon.svg`) and iOS icon
+(`playground/public/apple-touch-icon.png`) are wired into the site.
+
+## Using them on GitHub
+
+- **Repo social preview:** Settings → General → Social preview → upload
+  `posecode-social.png`.
+- **Org / project avatar:** upload `posecode-icon-512.png` (square, rounded) or
+  `posecode-icon-360.png` (full-bleed).
+- **README badge / inline:** reference `posecode-mark-512.png`.

docs/brand/posecode-icon-360.png

@@ -4,10 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Posecode: Describe Human Movement as Text, Animated in 3D</title>
-    <link
-      rel="icon"
-      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3 29 16 16 29 3 16Z' fill='%23c6f24a'/%3E%3C/svg%3E"
-    />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <meta
       name="description"
       content="Posecode is an open-source text-to-motion language for LLMs. Describe exercises, physiotherapy, yoga, or dance in plain text and watch an anatomically safe 3D figure animate in your browser."
@@ -115,7 +113,7 @@
     <!-- Nav -->
     <header class="nav">
       <a class="brand" href="./index.html" aria-label="Posecode home">
-        <span class="logo" aria-hidden="true">◆</span>
+        <svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="19" height="19" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg>
         <span class="wordmark">Posecode</span>
       </a>
       <nav class="nav-links" aria-label="Primary">
@@ -315,7 +313,7 @@ <h2>Common questions</h2>
     <!-- Footer -->
     <footer class="footer">
       <div class="footer-brand">
-        <span class="logo" aria-hidden="true">◆</span> Posecode
+        <svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="19" height="19" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode
         <span class="footer-tag">kinematic motion as text</span>
       </div>
       <p class="footer-note">

docs/brand/posecode-icon-512.png

@@ -4,10 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Posecode Playground: Write and Preview 3D Human Movement as Text</title>
-    <link
-      rel="icon"
-      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3 29 16 16 29 3 16Z' fill='%23c6f24a'/%3E%3C/svg%3E"
-    />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <meta
       name="description"
       content="Try Posecode live: paste text from ChatGPT, Claude, or Gemini and watch it animate a 3D figure. Browse a library of movements across fitness, physiotherapy, yoga, and dance."
@@ -38,7 +36,7 @@
 
     <header class="topbar">
       <a class="brand" href="./index.html" aria-label="Posecode home">
-        <span class="logo" aria-hidden="true">◆</span>
+        <svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg>
         <span class="wordmark">Posecode</span>
         <span class="tag">playground</span>
       </a>