Logo

The Plaaayground logo with variations for logomark and full lockup in different color options. A core logo component for consistent usage across all instances.

Our Logo

The Plaaayground logo features a distinctive organic paw-like logomark composed of ten overlapping shapes. The triple 'a' in the wordmark represents AI × Artistry × Access.

Logomark

The symbol can be used standalone in three colors and three sizes.

primary#0000FF

black

white

Full Lockup

The full logo combines the logomark with the wordmark. Available in primary (blue mark), dark, and light variants at three sizes.

Primary — blue mark on dark background

Dark — for light backgrounds

Clearspace

The area around our logo should provide ample breathing room so that it does not get crowded by external elements. Minimum clear space equals 1× the width of the logomark on all sides.

Color

The logomark works across different background colors. Use the primary blue on dark backgrounds, black on light backgrounds, and white when overlaying images or gradients.

Avatar

Logo avatars for social media, app icons, and profile images. Use the logomark centered within a circular container.

Minimum Size

  • Full lockup: minimum height 25px (digital), 8mm (print)
  • Logomark: minimum size 25px (digital), 8mm (print)
  • Wordmark: minimum height 13px (digital), 5mm (print)

Don'ts

✕Don't stretch or distort the logo
Plaaayground
✕Don't change the typeface
✕Don't place on busy backgrounds
✕Don't add effects (shadow, glow)
✕Don't rearrange symbol and wordmark
✕Don't recolor in unapproved colors

Downloads

Download logo assets as SVG or PNG. PNG exports are rendered at high resolution for crisp output.

Logomark

primary#0000FF

black

white

Full Logo

Lightfor dark backgrounds

Darkfor light backgrounds

React Usage

import {
  PlaaaygroundLogo,
  PlaaaygroundSymbol,
  PlaaaygroundWordmark,
} from '@/components/brand/PlaaaygroundLogo'

// Full lockup — primary (blue mark), dark, or light
<PlaaaygroundLogo height={42} color="primary" className="text-white" />
<PlaaaygroundLogo height={42} color="dark" />

// Logomark only — primary, black, white, or currentColor
<PlaaaygroundSymbol size="lg" color="primary" />
<PlaaaygroundSymbol size={48} color="black" />

// Wordmark only
<PlaaaygroundWordmark height={20} />