> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bebop.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# Brand Kit

> Bebop brand colors, logos, and usage guidelines.

Brand assets for partners and integrators. Reference the official color palette.

## Color palette

Bebop's palette has twelve colors split into two tiers. The primary row is used across the core brand, and the secondary row supports illustrations, accents, and UI states.

### Primary

<div className="color-grid">
  <div className="color-swatch">
    <div className="color-swatch-block" style={{ background: '#171717', border: '1px solid #656565' }}>
      <span style={{ color: '#ffffff' }}>#171717</span>
    </div>

    <span className="color-swatch-label">Black</span>
  </div>

  <div className="color-swatch">
    <div className="color-swatch-block" style={{ background: '#00E64F' }}>
      <span style={{ color: '#171717' }}>#00E64F</span>
    </div>

    <span className="color-swatch-label">Green</span>
  </div>

  <div className="color-swatch">
    <div className="color-swatch-block" style={{ background: '#D4FF00' }}>
      <span style={{ color: '#171717' }}>#D4FF00</span>
    </div>

    <span className="color-swatch-label">Yellow</span>
  </div>

  <div className="color-swatch">
    <div className="color-swatch-block" style={{ background: '#F83DDA' }}>
      <span style={{ color: '#171717' }}>#F83DDA</span>
    </div>

    <span className="color-swatch-label">Pink</span>
  </div>

  <div className="color-swatch">
    <div className="color-swatch-block" style={{ background: '#8B13CC' }}>
      <span style={{ color: '#ffffff' }}>#8B13CC</span>
    </div>

    <span className="color-swatch-label">Purple</span>
  </div>

  <div className="color-swatch">
    <div className="color-swatch-block" style={{ background: '#2F50FF' }}>
      <span style={{ color: '#ffffff' }}>#2F50FF</span>
    </div>

    <span className="color-swatch-label">Dark Blue</span>
  </div>
</div>

### Secondary

<div className="color-grid">
  <div className="color-swatch">
    <div className="color-swatch-block" style={{ background: '#6A6A6A' }}>
      <span style={{ color: '#ffffff' }}>#6A6A6A</span>
    </div>

    <span className="color-swatch-label">Grey</span>
  </div>

  <div className="color-swatch">
    <div className="color-swatch-block" style={{ background: '#004618' }}>
      <span style={{ color: '#ffffff' }}>#004618</span>
    </div>

    <span className="color-swatch-label">Dark Green</span>
  </div>

  <div className="color-swatch">
    <div className="color-swatch-block" style={{ background: '#FF8300' }}>
      <span style={{ color: '#171717' }}>#FF8300</span>
    </div>

    <span className="color-swatch-label">Orange</span>
  </div>

  <div className="color-swatch">
    <div className="color-swatch-block" style={{ background: '#D80500' }}>
      <span style={{ color: '#ffffff' }}>#D80500</span>
    </div>

    <span className="color-swatch-label">Red</span>
  </div>

  <div className="color-swatch">
    <div className="color-swatch-block" style={{ background: '#FF8CFF' }}>
      <span style={{ color: '#171717' }}>#FF8CFF</span>
    </div>

    <span className="color-swatch-label">Light Pink</span>
  </div>

  <div className="color-swatch">
    <div className="color-swatch-block" style={{ background: '#35F3FF' }}>
      <span style={{ color: '#171717' }}>#35F3FF</span>
    </div>

    <span className="color-swatch-label">Light Blue</span>
  </div>
</div>

## Logos

Use the appropriate variant depending on the background. Do not modify, recolor, or distort the logo.

<div className="logo-showcase-row">
  <div className="logo-showcase logo-showcase-dark">
    <div className="logo-showcase-left">
      <img src="https://mintcdn.com/bebop-bfd66c5f/RHicXH3BZLQhTzEJ/resources/logos/Bebop_Logo_Brandmark_White.svg?fit=max&auto=format&n=RHicXH3BZLQhTzEJ&q=85&s=5736c74c4b7de18595edb5d2dabe1128" alt="Bebop brandmark, white" className="logo-sm" width="100" height="100" data-path="resources/logos/Bebop_Logo_Brandmark_White.svg" />

      <img src="https://mintcdn.com/bebop-bfd66c5f/RHicXH3BZLQhTzEJ/resources/logos/Bebop_Logo_BrandmarkLogo_Horizontal_White.svg?fit=max&auto=format&n=RHicXH3BZLQhTzEJ&q=85&s=11098ebc91f4f32481af7d2600e2545a" alt="Bebop horizontal logo, white" className="logo-md" width="342" height="100" data-path="resources/logos/Bebop_Logo_BrandmarkLogo_Horizontal_White.svg" />

      <img src="https://mintcdn.com/bebop-bfd66c5f/RHicXH3BZLQhTzEJ/resources/logos/Bebop_Logo_Logo_Horizontal_White.svg?fit=max&auto=format&n=RHicXH3BZLQhTzEJ&q=85&s=5c42e6f6642f3869cddac452e8bc4608" alt="Bebop wordmark, white" className="logo-md" width="222" height="70" data-path="resources/logos/Bebop_Logo_Logo_Horizontal_White.svg" />
    </div>

    <div className="logo-showcase-right">
      <img src="https://mintcdn.com/bebop-bfd66c5f/RHicXH3BZLQhTzEJ/resources/logos/Bebop_Logo_BrandmarkLogo_Vertical_White.svg?fit=max&auto=format&n=RHicXH3BZLQhTzEJ&q=85&s=03ddf68399ae4f7a9af0f0f7fa62a782" alt="Bebop vertical logo, white" className="logo-lg" width="300" height="375" data-path="resources/logos/Bebop_Logo_BrandmarkLogo_Vertical_White.svg" />
    </div>

    <span className="logo-showcase-label">Dark background</span>
  </div>

  <div className="logo-showcase logo-showcase-light">
    <div className="logo-showcase-left">
      <img src="https://mintcdn.com/bebop-bfd66c5f/RHicXH3BZLQhTzEJ/resources/logos/Bebop_Logo_Brandmark_Black.svg?fit=max&auto=format&n=RHicXH3BZLQhTzEJ&q=85&s=526fe269b6a6de46f41360b8ead134df" alt="Bebop brandmark, black" className="logo-sm" width="100" height="100" data-path="resources/logos/Bebop_Logo_Brandmark_Black.svg" />

      <img src="https://mintcdn.com/bebop-bfd66c5f/RHicXH3BZLQhTzEJ/resources/logos/Bebop_Logo_BrandmarkLogo_Horizontal_Black.svg?fit=max&auto=format&n=RHicXH3BZLQhTzEJ&q=85&s=fd6ed65dd28f415783481749d9ed05b5" alt="Bebop horizontal logo, black" className="logo-md" width="342" height="100" data-path="resources/logos/Bebop_Logo_BrandmarkLogo_Horizontal_Black.svg" />

      <img src="https://mintcdn.com/bebop-bfd66c5f/RHicXH3BZLQhTzEJ/resources/logos/Bebop_Logo_Logo_Horizontal_Black.svg?fit=max&auto=format&n=RHicXH3BZLQhTzEJ&q=85&s=00529cb4b3af55f1ab8306d812e115e0" alt="Bebop wordmark, black" className="logo-md" width="222" height="70" data-path="resources/logos/Bebop_Logo_Logo_Horizontal_Black.svg" />
    </div>

    <div className="logo-showcase-right">
      <img src="https://mintcdn.com/bebop-bfd66c5f/RHicXH3BZLQhTzEJ/resources/logos/Bebop_Logo_BrandmarkLogo_Vertical_Black.svg?fit=max&auto=format&n=RHicXH3BZLQhTzEJ&q=85&s=17db1adf91dec0b479732caa5bb83d63" alt="Bebop vertical logo, black" className="logo-lg" width="300" height="375" data-path="resources/logos/Bebop_Logo_BrandmarkLogo_Vertical_Black.svg" />
    </div>

    <span className="logo-showcase-label">Light background</span>
  </div>
</div>

[Download](https://bebop-public-images.s3.eu-west-2.amazonaws.com/Bebop_Logo.zip).

## Usage guidelines

When using Bebop brand assets, please keep the following in mind: always maintain clear space around the logo, never place it on visually busy backgrounds, and use the correct color variant for the surface it sits on. If you need additional formats or have questions, reach out at [hello@bebop.xyz](mailto:hello@bebop.xyz).