feat: add PNG variants of SenseCraft logotype

- Renamed PNGs to match SVG naming (sensecraft-{variant}.png)
- install.sh: download all 4 PNG variants alongside SVGs
- DESIGN.md: document SVG + PNG asset pairs

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: Rida2000

DESIGN.md

@@ -49,11 +49,14 @@ The SenseCraft logotype is a custom wordmark — **not a font**. It is composed
 - Do not place the logotype on busy or low-contrast backgrounds
 
 #### Asset Files
-SVG exports are in `assets/logo/`:
-- `sensecraft-duel.svg`
-- `sensecraft-mono-bright.svg`
-- `sensecraft-mono-dark.svg`
-- `sensecraft-mono-primary.svg`
+Both SVG and PNG exports are in `assets/logo/`. Use SVG for web/digital, PNG for legacy contexts (slide decks, image-only platforms):
+
+| Variant | SVG | PNG |
+|---------|-----|-----|
+| Duel | `sensecraft-duel.svg` | `sensecraft-duel.png` |
+| Mono-bright | `sensecraft-mono-bright.svg` | `sensecraft-mono-bright.png` |
+| Mono-dark | `sensecraft-mono-dark.svg` | `sensecraft-mono-dark.png` |
+| Mono-primary | `sensecraft-mono-primary.svg` | `sensecraft-mono-primary.png` |
 
 ---
 

assets/logo/sensecraft-duel.png

@@ -481,9 +481,8 @@ <h4 id="variants">Variants</h4>
 <h4 id="usage-rules">Usage Rules</h4>
 <ul><li><strong>Never modify the logotype</strong> — do not stretch, rotate, recolor outside the defined variants, add effects, or rasterize at low resolution</li><li><strong>Clear space</strong>: maintain a minimum clear zone equal to the height of the letter &quot;e&quot; in &quot;Sense&quot; on all sides</li><li><strong>Minimum width</strong>: <code>120px</code> on screen to preserve legibility</li><li>Use <strong>Duel</strong> as the default whenever possible; fall back to mono variants only when background contrast requires it</li><li>On dark backgrounds, use <strong>Mono-bright</strong>; on light backgrounds, use <strong>Duel</strong> or <strong>Mono-dark</strong></li><li>Do not place the logotype on busy or low-contrast backgrounds</li></ul>
 <h4 id="asset-files">Asset Files</h4>
-<p>SVG exports are in <code>assets/logo/</code>:</p>
-<ul><li><code>sensecraft-duel.svg</code></li><li><code>sensecraft-mono-bright.svg</code></li><li><code>sensecraft-mono-dark.svg</code></li><li><code>sensecraft-mono-primary.svg</code></li></ul>
-<hr/>
+<p>Both SVG and PNG exports are in <code>assets/logo/</code>. Use SVG for web/digital, PNG for legacy contexts (slide decks, image-only platforms):</p>
+<div class="table-wrap"><table><thead><tr><th>Variant<th>SVG<th>PNG</tr></thead><tbody><tr><td>Duel</td><td><code>sensecraft-duel.svg</code></td><td><code>sensecraft-duel.png</code></td></tr><tr><td>Mono-bright</td><td><code>sensecraft-mono-bright.svg</code></td><td><code>sensecraft-mono-bright.png</code></td></tr><tr><td>Mono-dark</td><td><code>sensecraft-mono-dark.svg</code></td><td><code>sensecraft-mono-dark.png</code></td></tr><tr><td>Mono-primary</td><td><code>sensecraft-mono-primary.svg</code></td><td><code>sensecraft-mono-primary.png</code></td></tr></tbody></table></div><hr/>
 <h2 id="2-color-palette-roles" class="section-heading">2. Color Palette &amp; Roles</h2>
 <h3 id="primary-lime-green-action-status">Primary (Lime Green — Action &amp; Status)</h3>
 <div class="swatch-grid">