feat(assets): add high-detail cameleer3-logo.svg traced from PNG via Inkscape

32-scan potrace vector trace with transparent background. Added to brand
assets inventory, documentation, and package exports.

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

CLAUDE.md

@@ -119,13 +119,12 @@ import type { ChartSeries, DataPoint } from '@cameleer/design-system'
 // Styles (once, at app root)
 import '@cameleer/design-system/style.css'
 
-// Brand assets (static files — logo variants and favicon sizes)
+// Brand assets (static files via ./assets/* export)
-import logo from '@cameleer/design-system/logo'           // full resolution PNG
+import logo from '@cameleer/design-system/assets/cameleer3-logo.png'     // full resolution
-import logo16 from '@cameleer/design-system/logo-16'       // 16×16 favicon
+import logo32 from '@cameleer/design-system/assets/cameleer3-32.png'     // 32×32 favicon
-import logo32 from '@cameleer/design-system/logo-32'       // 32×32 favicon
+import logo180 from '@cameleer/design-system/assets/cameleer3-180.png'   // Apple touch icon
-import logo48 from '@cameleer/design-system/logo-48'       // 48×48 taskbar
+import logo192 from '@cameleer/design-system/assets/cameleer3-192.png'   // Android/PWA icon
-import logo180 from '@cameleer/design-system/logo-180'     // Apple touch icon
+import logo512 from '@cameleer/design-system/assets/cameleer3-512.png'   // PWA splash, og:image
-import logo192 from '@cameleer/design-system/logo-192'     // Android/PWA icon
+import logoSvg from '@cameleer/design-system/assets/cameleer3-logo.svg'   // high-detail SVG logo
-import logo512 from '@cameleer/design-system/logo-512'     // PWA splash, og:image
+import camelSvg from '@cameleer/design-system/assets/camel-logo.svg'     // simplified camel SVG
-import logoSvg from '@cameleer/design-system/logo-svg'     // SVG vector logo
 ```

COMPONENT_GUIDE.md

@@ -336,23 +336,24 @@ See `CLAUDE.md` "Using This Design System in Other Apps" for full setup instruct
 
 ## Brand Assets
 
-The design system ships logo assets as static files via package exports. These are not React components — they resolve to file URLs when imported via a bundler.
+The design system ships logo assets as static files via the `./assets/*` package export. These are not React components — they resolve to file URLs when imported via a bundler. All PNGs have transparent backgrounds.
 
-| Export | Size | Use case |
+| File | Size | Use case |
-|--------|------|----------|
+|------|------|----------|
-| `@cameleer/design-system/logo` | Original | Full resolution for print/marketing |
+| `cameleer3-logo.png` | Original | Full resolution for print/marketing |
-| `@cameleer/design-system/logo-16` | 16×16 | Browser tab favicon |
+| `cameleer3-16.png` | 16×16 | Browser tab favicon |
-| `@cameleer/design-system/logo-32` | 32×32 | Standard favicon, bookmarks |
+| `cameleer3-32.png` | 32×32 | Standard favicon, bookmarks |
-| `@cameleer/design-system/logo-48` | 48×48 | Windows taskbar |
+| `cameleer3-48.png` | 48×48 | Windows taskbar |
-| `@cameleer/design-system/logo-180` | 180×180 | Apple touch icon |
+| `cameleer3-180.png` | 180×180 | Apple touch icon |
-| `@cameleer/design-system/logo-192` | 192×192 | Android/PWA icon |
+| `cameleer3-192.png` | 192×192 | Android/PWA icon |
-| `@cameleer/design-system/logo-512` | 512×512 | PWA splash, og:image |
+| `cameleer3-512.png` | 512×512 | PWA splash, og:image |
-| `@cameleer/design-system/logo-svg` | Vector | SVG logo for scalable usage |
+| `cameleer3-logo.svg` | Vector | High-detail SVG logo (traced from PNG, transparent) |
+| `camel-logo.svg` | Vector | Simplified camel SVG logo |
 
 ### Usage
 
 ```tsx
-import logo from '@cameleer/design-system/logo-512'
+import logo from '@cameleer/design-system/assets/cameleer3-512.png'
 <img src={logo} alt="Cameleer3" />
 ```
 

package.json

@@ -11,14 +11,7 @@
       "import": "./dist/index.es.js"
     },
     "./style.css": "./dist/style.css",
-    "./logo": "./assets/cameleer3-logo.png",
+    "./assets/*": "./assets/*"
-    "./logo-16": "./assets/cameleer3-16.png",
-    "./logo-32": "./assets/cameleer3-32.png",
-    "./logo-48": "./assets/cameleer3-48.png",
-    "./logo-180": "./assets/cameleer3-180.png",
-    "./logo-192": "./assets/cameleer3-192.png",
-    "./logo-512": "./assets/cameleer3-512.png",
-    "./logo-svg": "./assets/camel-logo.svg"
   },
   "files": [
     "dist",

src/pages/Inventory/sections/BrandAssetsSection.tsx

@@ -1,6 +1,7 @@
 import styles from './BrandAssetsSection.module.css'
 import camelLogoSvg from '../../../assets/camel-logo.svg'
 import cameleer3Logo from '../../../assets/cameleer3-logo.png'
+import cameleer3LogoSvg from '../../../assets/cameleer3-logo.svg'
 
 const LOGO_SIZES = [16, 32, 48, 180, 192, 512] as const
 
@@ -13,7 +14,7 @@ export function BrandAssetsSection() {
         <h3 className={styles.componentTitle}>Cameleer3 Logo (PNG)</h3>
         <p className={styles.componentDesc}>
           Full-resolution logo and pre-generated size variants for favicons, PWA icons, and social images.
-          Shipped as static assets via package exports.
+          Shipped as static assets via <code>@cameleer/design-system/assets/*</code> export.
         </p>
         <div className={styles.demoArea}>
           <div className={styles.logoGrid}>
@@ -28,7 +29,7 @@ export function BrandAssetsSection() {
                   />
                 </div>
                 <span className={styles.logoLabel}>{size}×{size}</span>
-                <code className={styles.logoExport}>@cameleer/design-system/logo-{size}</code>
+                <code className={styles.logoExport}>assets/cameleer3-{size}.png</code>
               </div>
             ))}
             <div className={styles.logoItem}>
@@ -41,25 +42,32 @@ export function BrandAssetsSection() {
                 />
               </div>
               <span className={styles.logoLabel}>Original</span>
-              <code className={styles.logoExport}>@cameleer/design-system/logo</code>
+              <code className={styles.logoExport}>assets/cameleer3-logo.png</code>
             </div>
           </div>
         </div>
       </div>
 
       <div className={styles.componentCard}>
-        <h3 className={styles.componentTitle}>Camel Logo (SVG)</h3>
+        <h3 className={styles.componentTitle}>SVG Logos</h3>
         <p className={styles.componentDesc}>
-          Vector logo for scalable usage. Shipped as a static asset via package export.
+          Vector logos for scalable usage. Transparent backgrounds, infinitely scalable.
         </p>
         <div className={styles.demoArea}>
           <div className={styles.logoGrid}>
+            <div className={styles.logoItem}>
+              <div className={styles.logoPreview}>
+                <img src={cameleer3LogoSvg} alt="Cameleer3 SVG logo" width={96} height={96} />
+              </div>
+              <span className={styles.logoLabel}>Cameleer3 SVG</span>
+              <code className={styles.logoExport}>assets/cameleer3-logo.svg</code>
+            </div>
             <div className={styles.logoItem}>
               <div className={styles.logoPreview}>
                 <img src={camelLogoSvg} alt="Camel SVG logo" width={96} height={96} />
               </div>
-              <span className={styles.logoLabel}>SVG</span>
+              <span className={styles.logoLabel}>Camel SVG</span>
-              <code className={styles.logoExport}>@cameleer/design-system/logo-svg</code>
+              <code className={styles.logoExport}>assets/camel-logo.svg</code>
             </div>
           </div>
         </div>