# DF4 Labs — Assets

`assets/` is the **canonical** source of brand and product imagery. Anything in this folder is reviewed and ships. Anything in `uploads/` is raw input from a designer or a teammate and is *not* canonical — it should be promoted into `assets/` (with cleanup) or deleted.

## Folder layout

```
assets/
  logo/        DF4 wordmark + cube-arrow mark, all variants
  brand/       OG image, full favicon set, Apple touch icon
  products/    FoxLitX, Repolize, House AI logos
```

## Canonical sizes

### Logo (`assets/logo/`)

| File                      | Format | Use                                            |
|---------------------------|--------|------------------------------------------------|
| `df4-logo-light.svg`    | SVG    | Logo on dark backgrounds (default for hero / dark sections). |
| `df4-logo-dark.svg`     | SVG    | Logo on light backgrounds (default for parent surfaces).     |
| `df4-logo-clean.svg`    | SVG    | Mark-only, no wordmark. For square avatars and corner glyphs. |
| `df4-logo-animated.svg` | SVG    | Hero / load animation only. Arrow nudges out of cube. Never loops. |
| `df4-logo-light.png`    | PNG    | 1024×1024 raster fallback, light variant.   |
| `df4-logo-dark.png`     | PNG    | 1024×1024 raster fallback, dark variant.    |

### Brand assets (`assets/brand/`)

| File                            | Size       | Use                                |
|---------------------------------|------------|------------------------------------|
| `og-image.png`                | 1200×630 | Open Graph + Twitter card.         |
| `apple-touch-icon.png`        | 180×180  | iOS / iPadOS home-screen.           |
| `android-chrome-512x512.png`  | 512×512  | PWA / Android maskable.             |
| `android-chrome-192x192.png`  | 192×192  | Android standard.                   |
| `favicon-128x128.png`         | 128×128  | Browser favicon (HiDPI).            |
| `favicon-96x96.png`           | 96×96    | Browser favicon.                    |
| `favicon-64x64.png`           | 64×64    | Browser favicon.                    |
| `favicon-48x48.png`           | 48×48    | Browser favicon (Windows tile).     |
| `favicon-32x32.png`           | 32×32    | Browser favicon (standard).         |
| `favicon-16x16.png`           | 16×16    | Browser favicon (legacy).           |
| `favicon.png`                 | 32×32    | Default `<link rel="icon">`.       |

### Product logos (`assets/products/`)

Each product has a SVG (canonical) and a PNG (raster fallback at 1024×1024). Use SVG everywhere except embeds that don't support it.

| File                | SVG | PNG | Use                                          |
|---------------------|-----|-----|----------------------------------------------|
| `foxlitx.svg/png` | ✓ | ✓ | FoxLitX product mark.                       |
| `repolize.svg/png`| ✓ | ✓ | Repolize product mark.                       |
| `houseai.svg/png` | ✓ | ✓ | House AI product mark.                        |

## Iconography

DF4 uses **Phosphor Icons** at a single weight (`regular`), monotone, never inside coloured tiles. Inline as SVG (preferred) or via `@phosphor-icons/react`. Sizes: `16` (inline UI), `20` (default), `24` (section / hero), `32` (landmark only).

## What does **not** live in `assets/`

- Marketing screenshots, social cards, or hero photos. Those live with the page that uses them, not in shared `assets/`.
- Any per-page texture, illustration, or generated SVG. `assets/` is brand-canonical only.
- Anything in `uploads/` until promoted.

## Adding new assets

1. Drop the file into `uploads/` (raw input).
2. Run optimisation (svgo for SVG, oxipng/squoosh for PNG).
3. Move into `assets/<folder>/` with the canonical filename.
4. Add a row to the table above.
5. Delete the original from `uploads/` if it is no longer needed.