style(assets): make all logo PNGs transparent using Inkscape trace

Traced the original logo with Inkscape (16-scan potrace, background removal)
and re-exported all PNG variants with transparent backgrounds. Also reduces
total asset size from ~1.7MB to ~630KB.

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

CLAUDE.md

@@ -118,4 +118,14 @@ 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)
+import logo from '@cameleer/design-system/logo'           // full resolution PNG
+import logo16 from '@cameleer/design-system/logo-16'       // 16×16 favicon
+import logo32 from '@cameleer/design-system/logo-32'       // 32×32 favicon
+import logo48 from '@cameleer/design-system/logo-48'       // 48×48 taskbar
+import logo180 from '@cameleer/design-system/logo-180'     // Apple touch icon
+import logo192 from '@cameleer/design-system/logo-192'     // Android/PWA icon
+import logo512 from '@cameleer/design-system/logo-512'     // PWA splash, og:image
+import logoSvg from '@cameleer/design-system/logo-svg'     // SVG vector logo
 ```

COMPONENT_GUIDE.md

@@ -334,6 +334,34 @@ import type { Column, DataTableProps, SearchResult } from '@cameleer/design-syst
 
 See `CLAUDE.md` "Using This Design System in Other Apps" for full setup instructions.
 
+## 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.
+
+| Export | Size | Use case |
+|--------|------|----------|
+| `@cameleer/design-system/logo` | Original | Full resolution for print/marketing |
+| `@cameleer/design-system/logo-16` | 16×16 | Browser tab favicon |
+| `@cameleer/design-system/logo-32` | 32×32 | Standard favicon, bookmarks |
+| `@cameleer/design-system/logo-48` | 48×48 | Windows taskbar |
+| `@cameleer/design-system/logo-180` | 180×180 | Apple touch icon |
+| `@cameleer/design-system/logo-192` | 192×192 | Android/PWA icon |
+| `@cameleer/design-system/logo-512` | 512×512 | PWA splash, og:image |
+| `@cameleer/design-system/logo-svg` | Vector | SVG logo for scalable usage |
+
+### Usage
+
+```tsx
+import logo from '@cameleer/design-system/logo-512'
+<img src={logo} alt="Cameleer3" />
+```
+
+```html
+<!-- Favicons in index.html -->
+<link rel="icon" type="image/png" sizes="32x32" href="/cameleer3-32.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/cameleer3-180.png">
+```
+
 ## Styling Rules
 
 - **CSS Modules only** — no inline styles except dynamic values (width, color from props)

package.json

@@ -10,10 +10,19 @@
       "types": "./dist/index.es.d.ts",
       "import": "./dist/index.es.js"
     },
-    "./style.css": "./dist/style.css"
+    "./style.css": "./dist/style.css",
+    "./logo": "./assets/cameleer3-logo.png",
+    "./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"
+    "dist",
+    "assets"
   ],
   "sideEffects": [
     "*.css"

src/pages/Inventory/Inventory.tsx

@@ -3,6 +3,7 @@ import styles from './Inventory.module.css'
 import { PrimitivesSection } from './sections/PrimitivesSection'
 import { CompositesSection } from './sections/CompositesSection'
 import { LayoutSection } from './sections/LayoutSection'
+import { BrandAssetsSection } from './sections/BrandAssetsSection'
 
 const NAV_SECTIONS = [
   {
@@ -93,6 +94,13 @@ const NAV_SECTIONS = [
       { label: 'TopBar', href: '#topbar' },
     ],
   },
+  {
+    label: 'Brand Assets',
+    href: '#brand-assets',
+    components: [
+      { label: 'Cameleer3 Logo', href: '#brand-assets' },
+    ],
+  },
 ]
 
 export function Inventory() {
@@ -121,6 +129,7 @@ export function Inventory() {
           <PrimitivesSection />
           <CompositesSection />
           <LayoutSection />
+          <BrandAssetsSection />
         </main>
       </div>
     </div>

src/pages/Inventory/sections/BrandAssetsSection.module.css

@@ -0,0 +1,86 @@
+.section {
+  margin-bottom: 40px;
+}
+
+.sectionTitle {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 24px;
+}
+
+.componentCard {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 20px;
+  margin-bottom: 16px;
+  box-shadow: var(--shadow-sm);
+}
+
+.componentTitle {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 4px;
+}
+
+.componentDesc {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin: 0 0 16px;
+}
+
+.demoArea {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: flex-start;
+}
+
+.logoGrid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  align-items: flex-end;
+}
+
+.logoItem {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+
+.logoPreview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-body);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 12px;
+  min-width: 48px;
+  min-height: 48px;
+}
+
+.logoPreview img {
+  display: block;
+  image-rendering: auto;
+}
+
+.logoLabel {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.logoExport {
+  font-size: 10px;
+  font-family: var(--font-mono);
+  color: var(--text-muted);
+  background: var(--bg-body);
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+  white-space: nowrap;
+}

src/pages/Inventory/sections/BrandAssetsSection.tsx

@@ -0,0 +1,69 @@
+import styles from './BrandAssetsSection.module.css'
+import camelLogoSvg from '../../../assets/camel-logo.svg'
+import cameleer3Logo from '../../../assets/cameleer3-logo.png'
+
+const LOGO_SIZES = [16, 32, 48, 180, 192, 512] as const
+
+export function BrandAssetsSection() {
+  return (
+    <section id="brand-assets" className={styles.section}>
+      <h2 className={styles.sectionTitle}>Brand Assets</h2>
+
+      <div className={styles.componentCard}>
+        <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.
+        </p>
+        <div className={styles.demoArea}>
+          <div className={styles.logoGrid}>
+            {LOGO_SIZES.map((size) => (
+              <div key={size} className={styles.logoItem}>
+                <div className={styles.logoPreview}>
+                  <img
+                    src={cameleer3Logo}
+                    alt={`Logo ${size}×${size}`}
+                    width={Math.min(size, 96)}
+                    height={Math.min(size, 96)}
+                  />
+                </div>
+                <span className={styles.logoLabel}>{size}×{size}</span>
+                <code className={styles.logoExport}>@cameleer/design-system/logo-{size}</code>
+              </div>
+            ))}
+            <div className={styles.logoItem}>
+              <div className={styles.logoPreview}>
+                <img
+                  src={cameleer3Logo}
+                  alt="Full resolution logo"
+                  width={96}
+                  height={96}
+                />
+              </div>
+              <span className={styles.logoLabel}>Original</span>
+              <code className={styles.logoExport}>@cameleer/design-system/logo</code>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className={styles.componentCard}>
+        <h3 className={styles.componentTitle}>Camel Logo (SVG)</h3>
+        <p className={styles.componentDesc}>
+          Vector logo for scalable usage. Shipped as a static asset via package export.
+        </p>
+        <div className={styles.demoArea}>
+          <div className={styles.logoGrid}>
+            <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>
+              <code className={styles.logoExport}>@cameleer/design-system/logo-svg</code>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}