diff --git a/CLAUDE.md b/CLAUDE.md index cad545a..aee43c0 100644 --- a/CLAUDE.md +++ b/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 ``` diff --git a/COMPONENT_GUIDE.md b/COMPONENT_GUIDE.md index 3876c2e..15fce57 100644 --- a/COMPONENT_GUIDE.md +++ b/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' +Cameleer3 +``` + +```html + + + +``` + ## Styling Rules - **CSS Modules only** — no inline styles except dynamic values (width, color from props) diff --git a/assets/camel-logo.svg b/assets/camel-logo.svg new file mode 100644 index 0000000..b83d1b0 --- /dev/null +++ b/assets/camel-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/cameleer3-16.png b/assets/cameleer3-16.png new file mode 100644 index 0000000..4cfc9ed Binary files /dev/null and b/assets/cameleer3-16.png differ diff --git a/assets/cameleer3-180.png b/assets/cameleer3-180.png new file mode 100644 index 0000000..af68bc6 Binary files /dev/null and b/assets/cameleer3-180.png differ diff --git a/assets/cameleer3-192.png b/assets/cameleer3-192.png new file mode 100644 index 0000000..8e63d6d Binary files /dev/null and b/assets/cameleer3-192.png differ diff --git a/assets/cameleer3-32.png b/assets/cameleer3-32.png new file mode 100644 index 0000000..35257dd Binary files /dev/null and b/assets/cameleer3-32.png differ diff --git a/assets/cameleer3-48.png b/assets/cameleer3-48.png new file mode 100644 index 0000000..5653c90 Binary files /dev/null and b/assets/cameleer3-48.png differ diff --git a/assets/cameleer3-512.png b/assets/cameleer3-512.png new file mode 100644 index 0000000..fa2c5f6 Binary files /dev/null and b/assets/cameleer3-512.png differ diff --git a/assets/cameleer3-logo.png b/assets/cameleer3-logo.png new file mode 100644 index 0000000..f1f5f49 Binary files /dev/null and b/assets/cameleer3-logo.png differ diff --git a/package.json b/package.json index 3494a86..71066d4 100644 --- a/package.json +++ b/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" diff --git a/src/assets/cameleer3-logo.png b/src/assets/cameleer3-logo.png new file mode 100644 index 0000000..f1f5f49 Binary files /dev/null and b/src/assets/cameleer3-logo.png differ diff --git a/src/pages/Inventory/Inventory.tsx b/src/pages/Inventory/Inventory.tsx index ba94051..952276d 100644 --- a/src/pages/Inventory/Inventory.tsx +++ b/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() { + diff --git a/src/pages/Inventory/sections/BrandAssetsSection.module.css b/src/pages/Inventory/sections/BrandAssetsSection.module.css new file mode 100644 index 0000000..3b0d2d6 --- /dev/null +++ b/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; +} diff --git a/src/pages/Inventory/sections/BrandAssetsSection.tsx b/src/pages/Inventory/sections/BrandAssetsSection.tsx new file mode 100644 index 0000000..304a31d --- /dev/null +++ b/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 ( +
+

Brand Assets

+ +
+

Cameleer3 Logo (PNG)

+

+ Full-resolution logo and pre-generated size variants for favicons, PWA icons, and social images. + Shipped as static assets via package exports. +

+
+
+ {LOGO_SIZES.map((size) => ( +
+
+ {`Logo +
+ {size}×{size} + @cameleer/design-system/logo-{size} +
+ ))} +
+
+ Full resolution logo +
+ Original + @cameleer/design-system/logo +
+
+
+
+ +
+

Camel Logo (SVG)

+

+ Vector logo for scalable usage. Shipped as a static asset via package export. +

+
+
+
+
+ Camel SVG logo +
+ SVG + @cameleer/design-system/logo-svg +
+
+
+
+
+ ) +}