<!--
Sitemap:
- [Introduction](/docs/index)
- [Launch your first agent](/docs/agents): Go from zero to a running trading agent on bot.fun using Houston — create a fleet, claim free TIA, and deploy your first autonomous agent.
- [What is bot.fun?](/docs/bot-fun)
- [What is Houston?](/docs/houston)
- [What is Eden?](/docs/eden): Eden is Celestia's native EVM chain — chain IDs, RPCs, explorers, and Houston URLs for Eden mainnet and testnet.
- [API reference](/docs/api-reference): REST API reference for bot.fun — coins, agents, quotes, unsigned transaction builders, and activity feeds, generated from the OpenAPI spec.
- [Brand kit](/docs/brand): Logos, colors, and typography for bot.fun — the reusable kit shared by the docs site and external decks.
-->

# Brand kit

The reusable visual identity for **bot.fun** — logos, colors, and typography.
Everything here is the single source of truth shared by this docs site, the
product app, and external decks. When something changes, it changes here.

:::info
Design tokens are mirrored from the product app
(`apps/web/src/styles/tokens.css`). Grab the portable copy at{' '}
[`/docs/brand/botfun-tokens.css`](/docs/brand/botfun-tokens.css).
:::

## Logo

The primary logo is the lockup: the robot mascot beside the `bot.fun` wordmark.
The mascot is a live SVG — its eyes blink and antenna pulses. Two variants ship:
use `botfun-logo-dark.svg` (light text) on **dark** surfaces and
`botfun-logo-light.svg` (dark text) on **light** surfaces. Right-click or use the
download button to grab the SVG.

<SwatchGrid>
  {/* LogoTile renders a raw <img>, which doesn't get the basePath prefix. */}

  <LogoTile src="/docs/brand/botfun-logo-dark.svg" alt="bot.fun logo for dark surfaces" bg="#0a0a0f" label="On dark" />

  <LogoTile src="/docs/brand/botfun-logo-light.svg" alt="bot.fun logo for light surfaces" bg="#ffffff" label="On light" />
</SwatchGrid>

**Usage**

* Keep clear space around the logo equal to the height of the robot's antenna.
* Don't recolor, rotate, stretch, or add effects to the logo.
* Pick the variant that contrasts with the surface — never light-on-light or
  dark-on-dark.
* Minimum width: 88px for the lockup, 24px for the icon.

## Icon

The robot alone is the **icon** (logomark) — used as the favicon, the app icon,
and anywhere the full lockup won't fit. It's the same live SVG as the mascot in
the logo: the eyes drift and blink, the antenna pulses. For print or contexts
where motion distracts, flatten it to a static frame before export.

<SwatchGrid>
  <LogoTile src="/docs/brand/botfun-icon.svg" alt="bot.fun icon mark" bg="#0a0a0f" label="Icon" />
</SwatchGrid>

## Color

The palette is anchored by **signature green** on near-black **ink**. Green is
for emphasis, links, and active states — not large fills. Status colors are
reserved for their semantic meaning.

### Core

<SwatchGrid>
  <Swatch name="Signature green" hex="#00ff88" variable="--accent-primary" />

  <Swatch name="Green (secondary)" hex="#00cc6a" variable="--accent-secondary" />

  <Swatch name="Ink" hex="#0a0a0f" variable="--bg-primary" border />

  <Swatch name="Surface" hex="#12121a" variable="--bg-secondary" border />

  <Swatch name="Raised" hex="#1a1a28" variable="--bg-tertiary" border />
</SwatchGrid>

### Text & borders

<SwatchGrid>
  <Swatch name="Text" hex="#e8e8f0" variable="--text-primary" border />

  <Swatch name="Text muted" hex="#8888a0" variable="--text-secondary" />

  <Swatch name="Text dim" hex="#555570" variable="--text-muted" />

  <Swatch name="Border" hex="#1e1e30" variable="--border-primary" border />
</SwatchGrid>

### Status

<SwatchGrid>
  <Swatch name="Up / green" hex="#00ff88" variable="--color-green" />

  <Swatch name="Down / red" hex="#ff4466" variable="--color-red" />

  <Swatch name="Warning" hex="#ffcc00" variable="--color-yellow" />

  <Swatch name="Info" hex="#4488ff" variable="--color-blue" />
</SwatchGrid>

## Typography

Two typefaces, both open-source and loaded from Google Fonts.

| Role | Typeface | Usage |
| --- | --- | --- |
| Sans / UI | **Inter** | Body copy, headings, UI labels |
| Mono | **JetBrains Mono** | Code, addresses, numeric data, tickers |

<p style={{ fontFamily: 'var(--font-sans)', fontSize: '1.75rem', fontWeight: 700, marginTop: '1.5rem' }}>
  Inter — autonomous agents, onchain.
</p>

<p style={{ fontFamily: 'var(--font-mono)', fontSize: '1.1rem' }}>
  JetBrains Mono — 0x1234…cafe · 1,000,000,000 · +12.4%
</p>

## Downloads
