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

Logos, colours, type, and assets for representing B3 — for partners, press, and anyone building in the ecosystem.

✦ SERIOUS PLAY ✦ ONCHAIN ARCHITECTS ✦

Everything here is cleared for partner, press, and ecosystem use — take what you need without asking first. Every preview links the real file on `cdn.b3.fun`, so what you download is what we use. The CDN serves files inline, so open the link and save from there.

## Brandmark

The full lockup: wordmark, positioning line, and the stack it names. Use it when B3 needs to introduce itself — a title card, a deck cover, a partnership announcement. Everywhere else, the wordmark alone is enough.

**B3 Labs Brandmark**

![B3 Labs brandmark — Serious Play, Onchain Architects](https://cdn.b3.fun/b3-brandmark.svg)

  [SVG](https://cdn.b3.fun/b3-brandmark.svg)

## Logo

The B3 wordmark. Use the SVG wherever you can — the PNG is a fallback, not a preference.

**Wordmark**

![B3 wordmark](https://cdn.b3.fun/b3-logo-v2.svg)

    For navy, black, and photography.

    [SVG](https://cdn.b3.fun/b3-logo-v2.svg)

  **On Blue**

![B3 wordmark on brand blue](https://cdn.b3.fun/b3-new-logo.png)

    App icons, avatars, tiles — anywhere the mark needs its own container.

    [PNG](https://cdn.b3.fun/b3-new-logo.png)

  **Sphere**

![B3 sphere](https://cdn.b3.fun/b3-ball-w-shadow.svg)

    The rounded mark, for round frames and social avatars.

    [SVG](https://cdn.b3.fun/b3-ball-w-shadow.svg)
      [Coin PNG](https://cdn.b3.fun/b3-coin.png)

Working on a light surface and need the wordmark in brand blue, or on a dark one and need a knockout we don't list here? Ask — we'd rather send the right file than watch one get recoloured by hand.

### Using the mark

**Let it breathe**

Keep clear space of at least 25% of the mark's height on all four sides. Nothing enters that box — no type, no rules, no other logos, no image edge.

  **Keep the contrast**

Light mark on navy, blue, black, or photography. Blue or navy mark on white and near-white. If a background sits in between, put the mark in its own tile rather than dropping it straight on.

  **Don't redraw it**

No stretching, rotating, recolouring, outlining, drop shadows, or re-typesetting the name in another face. The mark is a fixed shape in a fixed set of colours.

  **Write it as B3**

All caps, no space. "B3 Labs" for the company; "B3" for the network and the token. Not "b3", not "B-3".

## Colours

One blue, quiet everything else. B3 blue is the only accent — the neutrals do the structural work, and a surface where three things compete for attention has no accent at all.

**B3 Blue**

```
    #2450FF
    ```

    Primary actions, links, live state.

  **Navy**

```
    #11172F
    ```

    Dark surfaces, headings on light.

  **Gray**

```
    #D9D9D9
    ```

    The signature canvas — b3.fun's own stage.

  **Lavender**

```
    #C9C8D0
    ```

    Panels and dividers on gray.

  **Steel**

```
    #535C89
    ```

    Secondary text and quiet links.

  **Muted**

```
    #9496A8
    ```

    Captions, labels, table headers.

## Typography

**Helvetica Neue LT Pro**

Interface, headings, body, and data. **55 Roman** for text, **65 Medium** for anything that carries weight. Tracking stays at 0 — only small uppercase labels get wide tracking.

    [Licensing — Linotype](https://www.linotype.com/1266/neue-helvetica-family.html)

  **EK Modena**

Technical tags, diagram labels, small system text. Used sparingly, never for body copy.

    [Licensing — Erkin Karamemet](https://erkinkaramemet.com/modena/)

Both are commercially licensed, so we don't redistribute the font files — license them directly from the foundries above. If you can't, this stack degrades honestly:

```css
body {
  font-family: "Helvetica Neue LT Pro 55 Roman", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
```

`https://cdn.b3.fun/fonts.css` still serves the previous typefaces (Neue Montreal, Calibre, Pack). It is kept alive for older properties — don't wire it into anything new.

**Type in use**

![B3 typography composition](https://cdn.b3.fun/b3-type-diagram.png)

  **Type in use — navy**

![B3 typography composition, navy](https://cdn.b3.fun/b3-typography-navy-diagram.png)

## Assets

The dimensional B3 — extruded, isometric, and coined. These carry the brand where a flat wordmark can't.

**Isometric**

![B3 isometric](https://cdn.b3.fun/b3-3d-isomorphic.png)

    [PNG](https://cdn.b3.fun/b3-3d-isomorphic.png)

  **Coin Pattern**

![B3 coin pattern, dark](https://cdn.b3.fun/b3-coins-bg-dark.svg)

    [Dark](https://cdn.b3.fun/b3-coins-bg-dark.svg)
      [Light](https://cdn.b3.fun/b3-coins-bg-light.svg)

  **The Machine**

![B3 PC](https://cdn.b3.fun/b3-pc.webp)

    [WEBP](https://cdn.b3.fun/b3-pc.webp)

### Backgrounds

Full-bleed brand surfaces for slides, covers, and headers.

**Blue**

![B3 background, blue](https://cdn.b3.fun/b3-bg-1.png)

    [Download](https://cdn.b3.fun/b3-bg-1.png)

  **Isometric Navy**

![B3 background, isometric navy](https://cdn.b3.fun/b3-bg-2.png)

    [Download](https://cdn.b3.fun/b3-bg-2.png)

  **Dark**

![B3 background, dark](https://cdn.b3.fun/b3-bg-4.png)

    [Download](https://cdn.b3.fun/b3-bg-4.png)

More in the same set: [b3-bg-3.png](https://cdn.b3.fun/b3-bg-3.png) and [b3-bg-5.png](https://cdn.b3.fun/b3-bg-5.png).

## Motion

Movement is part of the brand — systems coming online, not decoration. Fast state changes, subtle transitions, no bounce, and always respect `prefers-reduced-motion`.

**Grid**

![B3 grid animation](https://cdn.b3.fun/b3-animation-1.gif)

    [Download](https://cdn.b3.fun/b3-animation-1.gif)

  **Orbit**

![B3 orbit animation](https://cdn.b3.fun/b3-animation-2.gif)

    [Download](https://cdn.b3.fun/b3-animation-2.gif)

  **Sphere**

![B3 sphere animation](https://cdn.b3.fun/b3-animation-3.gif)

    [Download](https://cdn.b3.fun/b3-animation-3.gif)

The full-length brand background loop is a large file — link it rather than embedding it: [b3-bg-animation.mp4](https://cdn.b3.fun/b3-bg-animation.mp4) (~17 MB).

## Co-branding

Partnership lockups follow one shape: each mark in its own dotted ring, separated by `×`, at equal weight. Nobody's logo gets top billing.

**On Blue**

![B3 partnership template on blue](https://cdn.b3.fun/b3-partnership-template-1.png)

    [Download](https://cdn.b3.fun/b3-partnership-template-1.png)

  **On Gray**

![B3 partnership template on gray](https://cdn.b3.fun/b3-partnership-template-2.png)

    [Download](https://cdn.b3.fun/b3-partnership-template-2.png)

  **On Type**

![B3 partnership template on typography](https://cdn.b3.fun/b3-partnership-template-3.png)

    [Download](https://cdn.b3.fun/b3-partnership-template-3.png)

## Contribute to the B3 brand

Let's build B3 together — we welcome creators, artists, developers, and everyone else who wants to make something with it.

Reach out if you've built something for the B3 community, or if you need an asset that isn't here.