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

# Brand Kit

> Follow these guidelines to use our brand correctly when contributing to the B3 ecosystem.

<div className="text-center my-4 font-bold text-lg tracking-wide text-primary">
  ✦ COMMUNITY DRIVEN ✦ FUN ✦ ECOSYSTEM ALIGNED ✦
</div>

## Primary Logo

<CardGroup cols={3}>
  <Card title="Blue Logo">
    <img src="https://mintcdn.com/npclabs/i3FbahzgrmPWASGi/images/b3-logo-blue.svg?fit=max&auto=format&n=i3FbahzgrmPWASGi&q=85&s=93cb8e93e830fda277a3ee3d8bbff835" alt="B3 Blue Logo" className="p-6 bg-black rounded-xl my-3" width="390" height="221" data-path="images/b3-logo-blue.svg" />

    <div className="flex justify-start items-center gap-4">
      <a href="https://cdn.b3.fun/b3_logo.svg" target="_blank" download="b3-logo-blue.svg">SVG</a>
      <a href="https://cdn.b3.fun/b3_logo@.png" target="_blank" download="b3-logo-blue.png">PNG</a>
    </div>
  </Card>

  <Card title="White Logo">
    <img src="https://mintcdn.com/npclabs/i3FbahzgrmPWASGi/images/b3-logo-white.svg?fit=max&auto=format&n=i3FbahzgrmPWASGi&q=85&s=279d63f6e24ecbbff7c1daaa31f8227d" alt="B3 White Logo" className="p-6 bg-black rounded-xl my-3" width="390" height="221" data-path="images/b3-logo-white.svg" />

    <div className="flex justify-start items-center gap-4">
      <a href="https://cdn.b3.fun/b3_logo_white.svg" target="_blank" download="b3-logo-white.svg">SVG</a>
    </div>
  </Card>

  <Card title="Black Logo">
    <img src="https://mintcdn.com/npclabs/i3FbahzgrmPWASGi/images/b3_logo_black.svg?fit=max&auto=format&n=i3FbahzgrmPWASGi&q=85&s=843659b90ffc7606f5f4c18a2b116f40" alt="B3 Black Logo" className="p-6 bg-white rounded-xl my-3" width="390" height="221" data-path="images/b3_logo_black.svg" />

    <div className="flex justify-start items-center gap-4">
      <a href="https://cdn.b3.fun/b3_logo_black.svg" target="_blank" download="b3-logo-black.svg">SVG</a>
    </div>
  </Card>
</CardGroup>

## Colors

Don't limit yourself to just this common brand colors. B3 invites you to be expressive with different fun, vibrant color palletes.

<CardGroup cols={3}>
  <Card title="Primary Blue">
    <div style={{ backgroundColor: "#007AFF", height: "80px", borderRadius: "8px", margin: "1rem 0" }} />

    ```
    #007AFF
    ```
  </Card>

  <Card title="Grey">
    <div style={{ backgroundColor: "#6B7280", height: "80px", borderRadius: "8px", margin: "1rem 0" }} />

    ```
    #6B7280
    ```
  </Card>

  <Card title="White">
    <div style={{ backgroundColor: "#FFFFFF", height: "80px", borderRadius: "8px", border: "2px solid #e5e7eb", margin: "1rem 0" }} />

    ```
    #FFFFFF
    ```
  </Card>
</CardGroup>

## Brand Guidelines

<CardGroup cols={2}>
  <Card title="Let it breathe" icon="expand">
    Our logo works best when it has adequate margins.
  </Card>

  <Card title="Make it fun" icon="heart">
    Keep things light, friendly, and engaging.
  </Card>
</CardGroup>

## Fonts

Import inside CSS stylesheet:

```css theme={null}
@import url("https://cdn.b3.fun/fonts.css");
```

Import via `<link>` tag:

```html theme={null}
<link href="https://cdn.b3.fun/fonts.css" rel="stylesheet">
```

Now you can use the fonts:

```css theme={null}
body { font-family: "Neue Montreal Medium", sans-serif; }
```

#### Available fonts:

* **Neue Montreal Bold**
* **Neue Montreal Regular**
* **Neue Montreal Book**
* **Neue Montreal Medium**
* **Neue Montreal Semibold**
* **Calibre Bold**
* **Calibre Heavy**
* **Pack**

#### Download the original fonts:

<Card title="Calibre">
  [License](https://klim.co.nz/retail-fonts/calibre/)
</Card>

<Card title="Neue Montreal">
  [License](https://pangrampangram.com/products/neue-montreal)
</Card>

<Card title="PACK">
  [License](https://harrycresswell.com/pack/)
</Card>

## Fun Assets

<CardGroup cols={3}>
  <Card title="The Cursor">
    <img src="https://mintcdn.com/npclabs/BqgbIxC-QswCxsQH/images/cursor.png?fit=max&auto=format&n=BqgbIxC-QswCxsQH&q=85&s=a28d0780bfe0a7b30983b75f5b1ebabc" alt="B3 Cursor" className="rounded-xl my-3 aspect-square p-6 bg-white" width="169" height="182" data-path="images/cursor.png" />

    <div className="flex justify-start items-center gap-4">
      <a href="https://cdn.b3.fun/cursor.png" target="_blank" download="cursor.png">PNG</a>
      <a href="https://cdn.b3.fun/cursor%402x.png" target="_blank" download="cursor@2x.png">PNG @ 2x</a>
    </div>
  </Card>

  <Card title="Blue Texture">
    <img src="https://mintcdn.com/npclabs/T8myXHRpwbznxu_Y/images/b3-bg-texture.jpg?fit=max&auto=format&n=T8myXHRpwbznxu_Y&q=85&s=70b774d4e79036598efd201ad0347efc" alt="B3 Blue Texture" className="rounded-xl my-3 aspect-square" width="1000" height="1000" data-path="images/b3-bg-texture.jpg" />

    <div className="flex justify-start items-center gap-4">
      <a href="https://cdn.b3.fun/b3-bg-texture.jpg" target="_blank" download="b3-bg-texture.jpg">JPG</a>
    </div>
  </Card>

  <Card title="The Grid">
    <img src="https://mintcdn.com/npclabs/i3FbahzgrmPWASGi/images/b3_grid.svg?fit=max&auto=format&n=i3FbahzgrmPWASGi&q=85&s=d607c99b3ef2bd10b9644e4aa574cee7" alt="B3 Grid" className="rounded-xl my-3 aspect-square p-6 bg-white" width="3633" height="1647" data-path="images/b3_grid.svg" />

    <div className="flex justify-start items-center gap-4">
      <a href="https://cdn.b3.fun/b3_grid.svg" target="_blank" download="b3_grid.svg">SVG</a>
      <a href="https://cdn.b3.fun/b3_grid.png" target="_blank" download="b3_grid.png">PNG</a>
    </div>
  </Card>
</CardGroup>

## Motion

Animations are welcomed when representing B3, after all - movement is fun!

We recommend Framer Motion as a React animation library, but you can use whatever you like!

<CardGroup cols={2}>
  <Card title="Logo Animation (16:9)">
    <video controls className="rounded-xl my-3 aspect-video" src="https://mintcdn.com/npclabs/T8myXHRpwbznxu_Y/images/b3-logo-animation-wide.mp4?fit=max&auto=format&n=T8myXHRpwbznxu_Y&q=85&s=6edbe9a65b495bbef1362fd23eee8f2d" data-path="images/b3-logo-animation-wide.mp4">
      Your browser does not support the video tag.
    </video>

    <div className="flex justify-start items-center gap-4">
      <a href="https://cdn.b3.fun/b3-logo-animation-wide.mp4" target="_blank" download="b3-logo-animation-wide.mp4">MP4</a>
      <a href="https://cdn.b3.fun/b3-logo-animation-wide-after-effects-project.zip" target="_blank" download="b3-logo-animation-wide-after-effects-project.zip">After Effects Project</a>
    </div>
  </Card>

  <Card title="Logo Animation (1:1)">
    <video controls className="rounded-xl my-3 aspect-square" src="https://mintcdn.com/npclabs/T8myXHRpwbznxu_Y/images/b3-logo-animation-square.mp4?fit=max&auto=format&n=T8myXHRpwbznxu_Y&q=85&s=629bf9dbcfff00c49a57c7e80f871841" data-path="images/b3-logo-animation-square.mp4">
      Your browser does not support the video tag.
    </video>

    <div className="flex justify-start items-center gap-4">
      <a href="https://cdn.b3.fun/b3-logo-animation-square.mp4" target="_blank" download="b3-logo-animation-square.mp4">MP4</a>
      <a href="https://cdn.b3.fun/b3-logo-animation-square-after-effects-project.zip" target="_blank" download="b3-logo-animation-square-after-effects-project.zip">After Effects Project</a>
    </div>
  </Card>
</CardGroup>

## Vibe 👌

B3 is all about having fun, and representing that in your life through gaming & more.

Rep B3 swag in other ways!

## Phone Lock Screen Wallpapers

<CardGroup cols={3}>
  <Card title="Lock Screen v1">
    <img src="https://mintcdn.com/npclabs/T8myXHRpwbznxu_Y/images/b3-iphone-wallpaper-v1.png?fit=max&auto=format&n=T8myXHRpwbznxu_Y&q=85&s=b3e7b45ecd50415ed2c7b8775bf3076d" alt="B3 iPhone Wallpaper v1" className="rounded-xl my-3" width="1890" height="4096" data-path="images/b3-iphone-wallpaper-v1.png" />

    [Download](https://cdn.b3.fun/b3-iphone-wallpaper-v1.png)
  </Card>

  <Card title="Lock Screen v2">
    <img src="https://mintcdn.com/npclabs/T8myXHRpwbznxu_Y/images/b3-iphone-wallpaper-v2.png?fit=max&auto=format&n=T8myXHRpwbznxu_Y&q=85&s=10b9966b846a40ef191e34c8b764b09c" alt="B3 iPhone Wallpaper v2" className="rounded-xl my-3" width="1974" height="4256" data-path="images/b3-iphone-wallpaper-v2.png" />

    [Download](https://cdn.b3.fun/b3-iphone-wallpaper-v2.png)
  </Card>

  <Card title="Lock Screen v3">
    <img src="https://mintcdn.com/npclabs/T8myXHRpwbznxu_Y/images/b3-iphone-wallpaper-simple.png?fit=max&auto=format&n=T8myXHRpwbznxu_Y&q=85&s=ed389bd8bb701b6048f3461ae8c62116" alt="B3 iPhone Wallpaper Simple" className="rounded-xl my-3" width="1418" height="3251" data-path="images/b3-iphone-wallpaper-simple.png" />

    [Download](https://cdn.b3.fun/b3-iphone-wallpaper-simple.png)
  </Card>
</CardGroup>

## Contribute to B3 brand

Let's build B3 together - we welcome creators, artists, developers, gamers, players & everyone to contribute & be rewarded.

Reach out if you've built something cool for the B3 community.