# Brand assets (/start/brand)



This page collects the official Pixi’VN visual identity — brand colors, logo, and icon — for anyone who wants to reference the project in an article, video, store page, or community post. Every asset below can be downloaded directly from its card.

## Card [#card]

A ready-made social/banner card pairing the logo with the brand mascot, in a version for light backgrounds and one for dark backgrounds.

<div className="not-prose grid grid-cols-1 gap-4 my-6 sm:grid-cols-2">
  <div className="overflow-hidden rounded-xl border border-fd-border bg-fd-card">
    <div className="flex min-h-40 items-center justify-center bg-fd-muted p-6">
      <img src="/brand/logo-card-light.png" alt="Pixi’VN banner card for light backgrounds" className="h-auto max-h-28 w-auto" />
    </div>

    <div className="flex items-center justify-between gap-2 border-t border-fd-border p-3">
      <div>
        <p className="text-sm font-medium">
          Light theme
        </p>

        <p className="text-xs text-fd-muted-foreground">
          PNG · 291 KB
        </p>
      </div>

      <a href="/brand/logo-card-light.png" className="inline-flex items-center gap-1.5 rounded-md border border-fd-border px-3 py-1.5 text-sm font-medium transition-colors hover:bg-fd-accent">
        Download
      </a>
    </div>
  </div>

  <div className="overflow-hidden rounded-xl border border-fd-border bg-fd-card">
    <div className="flex min-h-40 items-center justify-center bg-fd-muted p-6">
      <img src="/brand/logo-card-dark.png" alt="Pixi’VN banner card for dark backgrounds" className="h-auto max-h-28 w-auto" />
    </div>

    <div className="flex items-center justify-between gap-2 border-t border-fd-border p-3">
      <div>
        <p className="text-sm font-medium">
          Dark theme
        </p>

        <p className="text-xs text-fd-muted-foreground">
          PNG · 283 KB
        </p>
      </div>

      <a href="/brand/logo-card-dark.png" className="inline-flex items-center gap-1.5 rounded-md border border-fd-border px-3 py-1.5 text-sm font-medium transition-colors hover:bg-fd-accent">
        Download
      </a>
    </div>
  </div>
</div>

## Logo [#logo]

The Pixi’VN wordmark, with a small heart between "Pixi" and "VN", available as a transparent PNG and as a scalable SVG.

<div className="not-prose my-6 max-w-md overflow-hidden rounded-xl border border-fd-border bg-fd-card">
  <div className="flex min-h-40 items-center justify-center bg-fd-muted p-6">
    <img src="/brand/logo.png" alt="Pixi’VN logo" className="h-auto max-h-24 w-auto" />
  </div>

  <div className="flex items-center justify-between gap-2 border-t border-fd-border p-3">
    <p className="text-sm font-medium">
      Logo
    </p>

    <div className="flex gap-2">
      <a href="/brand/logo.png" className="inline-flex items-center gap-1.5 rounded-md border border-fd-border px-3 py-1.5 text-sm font-medium transition-colors hover:bg-fd-accent">
        PNG
      </a>

      <a href="/brand/logo.svg" className="inline-flex items-center gap-1.5 rounded-md border border-fd-border px-3 py-1.5 text-sm font-medium transition-colors hover:bg-fd-accent">
        SVG
      </a>
    </div>
  </div>
</div>

The lettering is set in **Magneto**, bold weight (the font file is commonly distributed as `MAGNETOB.TTF`) — a bold, hand-lettered script typeface, paired with a `cursive` fallback for environments where it isn't installed.

## Icon [#icon]

<div className="not-prose my-6 max-w-md overflow-hidden rounded-xl border border-fd-border bg-fd-card">
  <div className="flex min-h-40 items-center justify-center bg-fd-muted p-6">
    <img src="/brand/icon.png" alt="Pixi’VN icon" className="h-auto max-h-28 w-auto rounded-lg" />
  </div>

  <div className="flex items-center justify-between gap-2 border-t border-fd-border p-3">
    <p className="text-sm font-medium">
      Icon
    </p>

    <div className="flex gap-2">
      <a href="/brand/icon.png" className="inline-flex items-center gap-1.5 rounded-md border border-fd-border px-3 py-1.5 text-sm font-medium transition-colors hover:bg-fd-accent">
        PNG
      </a>

      <a href="/brand/icon.svg" className="inline-flex items-center gap-1.5 rounded-md border border-fd-border px-3 py-1.5 text-sm font-medium transition-colors hover:bg-fd-accent">
        SVG
      </a>
    </div>
  </div>
</div>

The icon artwork depicts **Juliette**, a character used as a placeholder in the very first tests of Pixi’VN, in its early development.

## Colors [#colors]

The palette is made of two colors, both extracted from the logo lettering: an azure blue from "Pixi" and a violet/magenta from "VN".

<div className="not-prose grid grid-cols-1 gap-4 my-6 sm:grid-cols-2">
  <div className="overflow-hidden rounded-xl border border-fd-border bg-fd-card">
    <div className="h-20 w-full" style="{ backgroundColor: &#x22;hsl(206, 70%, 52%)&#x22; }" />

    <div className="p-4">
      <p className="font-medium">
        Primary
      </p>

      <p className="text-sm text-fd-muted-foreground">
        <code>
          \--color-brand-primary
        </code>
      </p>

      <p className="text-sm text-fd-muted-foreground">
        hsl(206, 70%, 52%) · ≈ #2F90DA
      </p>
    </div>
  </div>

  <div className="overflow-hidden rounded-xl border border-fd-border bg-fd-card">
    <div className="h-20 w-full" style="{ backgroundColor: &#x22;hsl(305, 60%, 49%)&#x22; }" />

    <div className="p-4">
      <p className="font-medium">
        Secondary
      </p>

      <p className="text-sm text-fd-muted-foreground">
        <code>
          \--color-brand-secondary
        </code>
      </p>

      <p className="text-sm text-fd-muted-foreground">
        hsl(305, 60%, 49%) · ≈ #C832BB
      </p>
    </div>
  </div>
</div>

These are exposed as CSS variables in the wiki's own theme:

```css
--color-brand-primary: hsl(206, 70%, 52%);
--color-brand-secondary: hsl(305, 60%, 49%);
```