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

Usage

Header logo:

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

Login logo:

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

Small footer or compact placement:

<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:

<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:

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.