# Assets

Payd Labs currently uses shared Payd logo image assets across Stables, Sentinel,
Knowhere, Dispatch, OneLink, Secret Share, Shops, Connect docs, and other Payd
surfaces.

## Canonical Payd Logos

| Surface | URL |
|---|---|
| Light mode logo | `https://res.cloudinary.com/dadkir6u2/image/upload/v1767808544/payd_logo_for_light_mode_scwwdc.png` |
| Dark mode logo | `https://res.cloudinary.com/dadkir6u2/image/upload/v1767808543/payd_logo_for_dark_mode_otv7uv.png` |

## Usage

Header logo:

```html
<img :src="isDark ? LOGO_DARK : LOGO_LIGHT" alt="Payd" class="h-6 w-auto" />
```

Login logo:

```html
<img :src="isDark ? LOGO_DARK : LOGO_LIGHT" alt="Payd" class="h-7 w-auto mx-auto mb-3" />
```

Small footer or compact placement:

```html
<img :src="isDark ? LOGO_DARK : LOGO_LIGHT" alt="Payd" class="h-4 w-auto" />
```

## Product Lockups

The standard product lockup is Payd logo plus product name or product pill:

```html
<img :src="logo" alt="Payd" class="h-6 w-auto" />
<span class="bg-accent-100 text-accent-dark px-2 py-0.5 rounded-md text-[10px] font-semibold font-heading ml-2">
  Stables
</span>
```

For Sentinel and Knowhere control planes, the product name can sit as adjacent
text and the `Admin` pill can follow it.

## Theme Switching

The logo should switch with the root `.dark` class:

```ts
const isDark = ref(document.documentElement.classList.contains('dark'))

function toggleTheme() {
  isDark.value = !isDark.value
  document.documentElement.classList.toggle('dark', isDark.value)
  localStorage.setItem('payd_product_theme', isDark.value ? 'dark' : 'light')
}
```

## Alt Text

Use `alt="Payd"` for the Payd logo. Product names should be visible as text or
nearby pills, not encoded only in image alt text.

## What Not To Do

- Do not recreate the Payd logo as inline SVG.
- Do not stretch the logo into fixed width and height.
- Do not add drop shadows or glow to the logo.
- Do not use the light logo on dark surfaces or the dark logo on light surfaces.