# Brand & Assets

Official logos and design guidelines for Warthog branding purposes can be found in the **[`brand-kit`](https://github.com/warthog-network/brand-kit)** repository.

## Logo

The following logo variants are available as PNG and SVG types in the [brand-kit `logo/` directory](https://github.com/warthog-network/brand-kit/tree/master/logo). The primary theme to be used is "Yellow".

| Variant | Yellow | Black | BW | Negative | Negative Yellow |
|---------|--------|-------|-----|----------|-----------------|
| **Full** | <a href="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Full%20Yellow.png"><img src="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Full%20Yellow.png" alt="Full Yellow" width="100"></a> | <a href="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Full%20Black.png"><img src="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Full%20Black.png" alt="Full Black" width="100"></a> | <a href="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Full%20BW.png"><img src="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Full%20BW.png" alt="Full BW" width="100"></a> | <a href="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Full%20Negative.png"><img src="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Full%20Negative.png" alt="Full Negative" width="100"></a> | <a href="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Full%20Negative%20Yellow.png"><img src="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Full%20Negative%20Yellow.png" alt="Full Negative Yellow" width="100"></a> |
| **Circle** | <a href="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Circle%20Yellow.png"><img src="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Circle%20Yellow.png" alt="Circle Yellow" width="100"></a> | <a href="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Circle%20Black.png"><img src="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Circle%20Black.png" alt="Circle Black" width="100"></a> | <a href="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Circle%20BW.png"><img src="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Circle%20BW.png" alt="Circle BW" width="100"></a> | <a href="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Circle%20Negative.png"><img src="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Circle%20Negative.png" alt="Circle Negative" width="100"></a> | <a href="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Circle%20Negative%20Yellow.png"><img src="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Circle%20Negative%20Yellow.png" alt="Circle Negative Yellow" width="100"></a> |
| **Short** | <a href="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Short%20Yellow.png"><img src="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Short%20Yellow.png" alt="Short Yellow" width="100"></a> | <a href="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Short%20Black.png"><img src="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Short%20Black.png" alt="Short Black" width="100"></a> | — | <a href="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Short%20Negative.png"><img src="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Short%20Negative.png" alt="Short Negative" width="100"></a> | — |
| **Stacked** | <a href="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Stacked%20Yellow.png"><img src="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Stacked%20Yellow.png" alt="Stacked Yellow" width="100"></a> | <a href="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Stacked%20Black.png"><img src="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Stacked%20Black.png" alt="Stacked Black" width="100"></a> | <a href="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Stacked%20BW.png"><img src="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Stacked%20BW.png" alt="Stacked BW" width="100"></a> | <a href="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Stacked%20Negative.png"><img src="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Stacked%20Negative.png" alt="Stacked Negative" width="100"></a> | <a href="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Stacked%20Negative%20Yellow.png"><img src="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Stacked%20Negative%20Yellow.png" alt="Stacked Negative Yellow" width="100"></a> |
| **Ticker** | <a href="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Ticker%20Yellow.png"><img src="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Ticker%20Yellow.png" alt="Ticker Yellow" width="100"></a> | <a href="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Ticker%20Black.png"><img src="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Ticker%20Black.png" alt="Ticker Black" width="100"></a> | <a href="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Ticker%20BW.png"><img src="https://raw.githubusercontent.com/warthog-network/brand-kit/master/logo/Ticker%20BW.png" alt="Ticker BW" width="100"></a> | — | — |

For Discord we use [`logo/DISCORD.png`](https://github.com/warthog-network/brand-kit/blob/master/logo/DISCORD.png) as server banner.

## Color palette

The Warthog brand uses a primary palette of seven logo colors plus two supporting-illustration colors, and three brand gradients. The visual order matches the guideline's 3×3 grid (read column-by-column).

### Primary palette

| | Hex | Role |
|--|-----|------|
| <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%23FDB913'/%3E%3C/svg%3E" width="16" height="16" style="vertical-align:middle;border-radius:2px;" alt="#FDB913"> | `#FDB913` | **Brand yellow — primary** |
| <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%23F25C05'/%3E%3C/svg%3E" width="16" height="16" style="vertical-align:middle;border-radius:2px;" alt="#F25C05"> | `#F25C05` | Red-orange |
| <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%23000000'/%3E%3C/svg%3E" width="16" height="16" style="vertical-align:middle;border-radius:2px;" alt="#000000"> | `#000000` | Black |
| <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%23E79300'/%3E%3C/svg%3E" width="16" height="16" style="vertical-align:middle;border-radius:2px;" alt="#E79300"> | `#E79300` | Orange |
| <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%23FFFFFF' stroke='%23000' stroke-width='0.5'/%3E%3C/svg%3E" width="16" height="16" style="vertical-align:middle;border-radius:2px;" alt="#FFFFFF"> | `#FFFFFF` | White |
| <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%23E9E9E9' stroke='%23000' stroke-width='0.5'/%3E%3C/svg%3E" width="16" height="16" style="vertical-align:middle;border-radius:2px;" alt="#E9E9E9"> | `#E9E9E9` | Light gray — backgrounds only, not for marks |
| <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%23F20544'/%3E%3C/svg%3E" width="16" height="16" style="vertical-align:middle;border-radius:2px;" alt="#F20544"> | `#F20544` | Red / pink |
| <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%23035AA6'/%3E%3C/svg%3E" width="16" height="16" style="vertical-align:middle;border-radius:2px;" alt="#035AA6"> | `#035AA6` | Blue — supporting illustration only |
| <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%23033298'/%3E%3C/svg%3E" width="16" height="16" style="vertical-align:middle;border-radius:2px;" alt="#033298"> | `#033298` | Deep blue — supporting illustration only |

### Gradients

All three end on `#FDB913`.

| | Hex |
|--|-----|
| <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 16'%3E%3Cdefs%3E%3ClinearGradient id='g1' x1='0%25' x2='100%25'%3E%3Cstop offset='0%25' stop-color='%23F25C05'/%3E%3Cstop offset='100%25' stop-color='%23FDB913'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='80' height='16' fill='url(%23g1)'/%3E%3C/svg%3E" width="80" height="16" style="vertical-align:middle;border-radius:2px;" alt="Gradient"> | `#F25C05` → `#FDB913` |
| <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 16'%3E%3Cdefs%3E%3ClinearGradient id='g2' x1='0%25' x2='100%25'%3E%3Cstop offset='0%25' stop-color='%23E79300'/%3E%3Cstop offset='100%25' stop-color='%23FDB913'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='80' height='16' fill='url(%23g2)'/%3E%3C/svg%3E" width="80" height="16" style="vertical-align:middle;border-radius:2px;" alt="Gradient"> | `#E79300` → `#FDB913` |
| <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 16'%3E%3Cdefs%3E%3ClinearGradient id='g3' x1='0%25' x2='100%25'%3E%3Cstop offset='0%25' stop-color='%23F20544'/%3E%3Cstop offset='100%25' stop-color='%23FDB913'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='80' height='16' fill='url(%23g3)'/%3E%3C/svg%3E" width="80" height="16" style="vertical-align:middle;border-radius:2px;" alt="Gradient"> | `#F20544` → `#FDB913` |

Use `#FDB913` as the dominant accent (logos, links, headers, callouts). It is the same color used in the website, the wallet, the explorer, and the whitepaper.

## Font

The Warthog brand uses **Montserrat** for everything — both titles and text blocks. The `brand-kit/fonts/Montserrat.zip` file contains the full family.

| Use | Weight |
|-----|--------|
| Titles | Montserrat Bold |
| Text blocks | Montserrat (regular / family) |

If Montserrat is not available, fall back to a similar geometric sans (e.g., `Inter`, `Nunito Sans`) — do not substitute a serif or display face.
