---
applyTo: "src/assets/**/*"
---

# Asset Management Instructions

## Asset Build System

All assets follow **src → out** workflow:
1. Source files in `src/assets/src/` (brand, social, web, icons)
2. Build artifacts in `src/assets/out/` (flat structure, no subdirs)
3. Astro imports assets directly from `src/assets/`

## Output Structure

- `src/assets/out/` is flat — all generated files are in the root with descriptive names
- Naming scheme: `logo.png`, `favicon.ico`, `twitter-profile.png`, `social-share.png`, etc.
- No subdirectories in `out/` — the filenames are self-documenting

## Makefile Commands

```bash
cd src/assets
make              # Show help
make all          # Build everything
make brand        # Logo + icons
make social       # Social covers
make decks        # Build slide decks (Typst)
make clean        # Remove generated files
```

## Presentations

Slide decks live in `src/assets/src/presentations/` and compile to flat PDFs in `src/assets/out/`.

Current decks:
- `make cultsync-deck` → `out/cultsync-deck.pdf`

Logos for decks are stored as SVG in `src/assets/src/*.svg` and used directly by Typst builds (compiled by `typst compile`).

## Asset Usage Patterns

**Build compositions when:**
- Generating platform-specific sizes (social covers, icons, favicons)
- Creating raster outputs from SVG sources
- Batch processing multiple variants

**Use compositions directly when:**
- Importing SVG into Astro components
- Source SVG is the desired format
- Browser will render the SVG

Example - Direct SVG import:
```astro
import logo from '@assets/src/cultscale-logo.svg';
<img src={logo.src} alt="CULTSCALE" />
```

Example - Built raster asset:
```astro
import socialShare from '@assets/out/cultscale-social-share.png';
<meta property="og:image" content={socialShare.src} />
```

## Social Media Cover Specifications

Each social cover SVG must:
- Reference logo: `<image xlink:href="../cultscale-logo.svg" />`
- Reference background: `<image xlink:href="../lib/images/audience-connection-original.jpg" />`
- Follow branding: 72% dark overlay, film grain, vignette, corner marks
- Use right-weighted text layout to avoid profile pic overlays

## Source Asset Descriptions

Understanding what source assets depict and how they're composed helps maintain brand consistency.

### Brand Logo (`src/cultscale-logo.svg`)
- **Description:** Two opposing white triangular shapes (▶ ◀) creating the CULTSCALE brand mark
- **Aspect ratio:** 2.39:1 (canonical cinema aspect ratio)
- **Symbolism:** Bidirectional flow of value between filmmakers and audiences
- **Usage:** Source for all derived formats (icons, favicons, profiles)

### Background Images (`lib/images/`)

**audience-connection-original.jpg** (1024×1024)
- **Subject:** Silhouetted cinema audience shot from behind, focused on screen
- **Focal point:** Creates emotional context of shared viewing experience
- **Represents:** The filmmaker-audience connection moment
- **Used in:** All social media cover compositions

### Social Cover Compositions (`src/cultscale-*.svg`)

All social covers follow the same compositional system:

**Visual layers:**
1. Base layer: Solid Milky Black (#121212)
2. Background image: `audience-connection-original.jpg` with positioning
3. Dark gradient overlay (72% opacity) - left reveals image, right creates text area
4. Film grain texture (15% opacity)
5. Vignette effect for depth
6. Corner marks (viewfinder aesthetic)
7. Logo reference: `<image xlink:href="../cultscale-logo.svg" />`
8. Text hierarchy: Tagline → Logo + Wordmark → Hero message

**Typography system:**
- Font: Space Grotesk (from `lib/fonts/SpaceGrotesk.ttf`)
- Tagline (Regular, 24pt, #E6E6E6): "Infrastructure for independent cinema"
- Logo Symbol: Two triangles (▶ ◀), 46px width, white
- Wordmark (Regular, 28pt, white): "CULTSCALE"
- Hero Text (Bold, 58pt, white): Multi-line mission statement

**Layout strategy:**
- Right-weighted text (avoids profile pic overlays on social platforms)
- Left side reveals background image
- Safe zones positioned to survive platform-specific crops

**Platform-specific dimensions:**
- `social-share.svg` → 1200×630 (Open Graph standard)
- `twitter-header.svg` → 1500×500 (3:1 wide format)
- `facebook-cover.svg` → 820×312 (ultra-wide format)
- `youtube-banner.svg` → 2560×1440 (TV-safe boundaries)
- `linkedin-company-cover.svg` → 1128×191 (extreme 5.9:1, right-biased +120-180px)
- `linkedin-personal-cover.svg` → 1584×396 (4:1, heavy right-bias +360-420px)

### Icon Sources (`src/icons/`) (imported by Astro)

SVG icons for UI elements (LinkedIn icon, etc.) - imported directly by Astro components.

### Generated Output Assets

Output assets in `out/` are built artifacts - refer to them by filename but don't catalog manually (the filesystem is the source of truth).

## Asset Imports in Astro

```astro
---
import logo from '@assets/src/cultscale-logo.svg';
import favicon from '@assets/out/cultscale-favicon.ico';
import socialShare from '@assets/out/cultscale-social-share.png';
import linkedinIcon from '@assets/src/icons/linkedin.svg';
---
<img src={logo.src} alt="CULTSCALE" />
<link rel="icon" href={favicon.src} />
```

## Open Graph Images

OG images must use absolute URLs. In BaseLayout.astro:

```astro
<meta property="og:image" content={`${siteUrl}${socialShareImg.src}`}>
<meta property="twitter:image" content={`${siteUrl}${socialShareImg.src}`}>
```

## Git LFS

Files in these directories are automatically tracked by Git LFS:
- `src/assets/lib/images/`
- `src/assets/lib/fonts/`
- `src/assets/out/`

## Makefile Dependencies

Makefile tracks all dependencies automatically:
- Logo changes → Rebuilds icons, profiles, and social covers
- Background image changes → Rebuilds all social covers
- Individual SVG changes → Rebuilds only that cover
- Web sources → Imported directly by Astro (no build step needed)