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

# Branding

> How to use the Esports Hub wordmark, Mark, color, typography, and voice.

How to use our wordmark, Mark, color, and voice. These keep the brand consistent across every surface, from press to partner sites to community projects. The public version lives at [esportshub.io/brand](https://esportshub.io/brand), and the full asset zip is linked at the bottom.

## Wordmark

The Esports Hub wordmark is set in Inter Display with tightened tracking. It's our primary brand expression and should appear at a comfortable, legible size on every surface where we sign our name.

<img className="block dark:hidden" src="https://mintcdn.com/esp-hub/qidWMvsbW-U1Owir/images/brand-wordmark-light.png?fit=max&auto=format&n=qidWMvsbW-U1Owir&q=85&s=061767ac9af9647a1213544e403d7edd" alt="Esports Hub wordmark" style={{ maxWidth: "340px", margin: "1.5rem 0" }} width="510" height="124" data-path="images/brand-wordmark-light.png" />

<img className="hidden dark:block" src="https://mintcdn.com/esp-hub/qidWMvsbW-U1Owir/images/brand-wordmark-dark.png?fit=max&auto=format&n=qidWMvsbW-U1Owir&q=85&s=c9ea77cb00cf1e38302bdece83ef176f" alt="Esports Hub wordmark" style={{ maxWidth: "340px", margin: "1.5rem 0" }} width="510" height="124" data-path="images/brand-wordmark-dark.png" />

## The Mark

The Mark is more than a symbol. The bolt is the spark of a career taking off: a player getting signed, a team getting its name out, a deal landing. It stays sharp at any size, from a favicon to a jersey crest. Use it when space is too tight for the wordmark, or alongside the wordmark in a lockup.

<svg width="88" height="88" viewBox="0 0 24 24" fill="currentColor" aria-hidden style={{ margin: "1.5rem 0" }}>
  <path d="M13 2l.018 .001l.016 .001l.083 .005l.011 .002h.011l.038 .009l.052 .008l.016 .006l.011 .001l.029 .011l.052 .014l.019 .009l.015 .004l.028 .014l.04 .017l.021 .012l.022 .01l.023 .015l.031 .017l.034 .024l.018 .011l.013 .012l.024 .017l.038 .034l.022 .017l.008 .01l.014 .012l.036 .041l.026 .027l.006 .009c.12 .147 .196 .322 .218 .513l.001 .012l.002 .041l.004 .064v6h5a1 1 0 0 1 .868 1.497l-.06 .091l-8 11c-.568 .783 -1.808 .38 -1.808 -.588v-6h-5a1 1 0 0 1 -.868 -1.497l.06 -.091l8 -11l.01 -.013l.018 -.024l.033 -.038l.018 -.022l.009 -.008l.013 -.014l.04 -.036l.028 -.026l.008 -.006a1 1 0 0 1 .402 -.199l.011 -.001l.027 -.005l.074 -.013l.011 -.001l.041 -.002z" />
</svg>

## Color

Our palette is intentionally tight. Black sets the canvas, white carries the wordmark and body type, and Strike Red is the primary brand color. Stick to these values exactly. Gradients and tints of these colors are not part of the system.

<div style={{ display: "flex", gap: "12px", flexWrap: "wrap", margin: "1.25rem 0" }}>
  <div style={{ width: "72px", height: "72px", borderRadius: "12px", background: "#E41937", border: "1px solid rgba(128,128,128,0.25)" }} />

  <div style={{ width: "72px", height: "72px", borderRadius: "12px", background: "#FFFFFF", border: "1px solid rgba(128,128,128,0.25)" }} />

  <div style={{ width: "72px", height: "72px", borderRadius: "12px", background: "#0D0D0D", border: "1px solid rgba(128,128,128,0.25)" }} />

  <div style={{ width: "72px", height: "72px", borderRadius: "12px", background: "#000000", border: "1px solid rgba(128,128,128,0.25)" }} />
</div>

| Color      | Hex     | Where it's used                                               |
| ---------- | ------- | ------------------------------------------------------------- |
| Strike Red | #E41937 | The primary brand color: CTAs, badges, alerts, accents.       |
| White      | #FFFFFF | Mark and wordmark on dark, body text, primary CTA pills.      |
| Off-Black  | #0D0D0D | Cards, modals, the chat interface. One step above the canvas. |
| Black      | #000000 | The page canvas. Pair with the Mark and white type.           |

<Warning>
  Strike Red is reserved for brand marks and accents. Don't sprinkle it across page content just to use the brand color.
</Warning>

## Typography

Inter Display anchors the wordmark, and Geist Sans handles the body of every product surface. Both are open-source with wide weight ranges, so partners and contributors can recreate our look without licensing. Inter Display is reserved for the wordmark and major display headlines. Geist Sans carries the rest: navigation, body copy, marketing pages, and the chat interface. JetBrains Mono shows up in code blocks and technical readouts.

## Dos and don'ts

**Do**

* Pair the Mark with the wordmark in a lockup.
* Use the white Mark on dark backgrounds and the dark Mark on light backgrounds.
* Give the Mark room to breathe.

**Don't**

* Stretch, crop, or otherwise alter the wordmark.
* Recolor the wordmark or Mark, or use unapproved color variations.
* Add effects, shadows, or textures.
* Use the wordmark as a mask for imagery, or place the Mark on busy imagery.

## Using the brand (partners and third parties)

<AccordionGroup>
  <Accordion title="Discord Bots">
    Reference our bots by their official name in copy and support materials, no unofficial nicknames in formal contexts, and describe features accurately. A third party may say "compatible with Esports Hub Bot v2.x" but must not imply an official partnership without written approval. Bot names that include our trademarks need permission.
  </Accordion>

  <Accordion title="Mentors">
    Mentors are independent coaches offering paid sessions through the platform, not employees or representatives. Refer to them as "mentor" or "coach", never "staff" or "representative". Reviews and testimonials belong to the reviewers and mentors, not to Esports Hub, and shouldn't be reused for unrelated marketing without permission.
  </Accordion>

  <Accordion title="Non-partnerships">
    Using our products, joining the community, or appearing in a spotlight does not make someone a partner. Don't describe the relationship as a "partnership", "collaboration", or "sponsorship" without a written agreement. "We use Esports Hub" is fine when it's accurate; "in partnership with Esports Hub" requires a signed agreement.
  </Accordion>

  <Accordion title="Content attribution">
    Our blog, video, and social content can be quoted with attribution and a link back, kept short and unaltered. Product screenshots are welcome in editorial, tutorials, and reviews as long as they don't misrepresent features, pricing, or availability. For republishing long-form content, email [brand@esportshub.io](mailto:brand@esportshub.io).
  </Accordion>
</AccordionGroup>

## Downloads

<Card title="Download brand assets" icon="download" href="https://cdn.esportshub.io/brand/esports-hub-brand-assets.zip">
  One zip with the Mark in dark and light PNG plus a scalable SVG. Need partnership-lockup files? Email [brand@esportshub.io](mailto:brand@esportshub.io).
</Card>
