# Gaming Oasis — Agent Brand Brief

> **Purpose:** Attach this file at the start of an agent session for **software**, **design**, **documentation**, and **slide/video** work under Gaming Oasis and its sub-brands. Use the tokens, type, logos, and asset URLs below — do not invent colors, fonts, or logo treatments.
>
> **Human brand guide:** https://gamingoasis.gg/brand
>
> **Download (markdown):** https://gamingoasis.gg/brand/agents · https://gamingoasis.gg/AGENTS.md
>
> **Web reference implementation:** `gaming-oasis-site` (`src/app/globals.css`, `src/lib/brand-guide-data.ts`)
>
> **Tagline:** Play more, Live more.

## How to use this brief

1. **Pick brand context** — Gaming Oasis (default), League Hub / Event Solutions, or SEL/NEL only (see §1).
2. **Use exact tokens** — hex from §3 for Figma, Slides, and docs; CSS variables for code (§3–§5).
3. **Oxanium everywhere** — load from [Google Fonts](https://fonts.google.com/specimen/Oxanium) (400 / 500 / 600) when the tool allows custom fonts.
4. **Official assets** — logos and 16:9 backgrounds from §6 and §9 (absolute URLs); transparent PNGs only.
5. **Dark UI default** — Text Primary `#FFFFFF`, Text Muted `#999999`; chromatic page wash `#1A1419` or flat chrome `#1A1A1A` per layout role.

### By deliverable

| Deliverable | What to apply |
|-------------|----------------|
| **Websites & tools** | §2 stack, `:root` tokens, `btn-*` / `surface-card`, §7 page shell — see §10 dev checklist |
| **Design (Figma, etc.)** | §3 hex + §4 type scale; style colors from tokens; §8 layout and contrast rules |
| **Documentation** | Oxanium or embedded fallbacks; hex tokens in tables; master vs conference naming from §1; link to https://gamingoasis.gg/brand |
| **Slide decks** | 16:9 slides; backgrounds from §9; Oxanium; dark chromatic or branded PNG slides; logo per context |
| **Streams & video** | §9 PNG/WEBM; OBS/browser sources; flag loops **muted**; conference assets in conference scenes only |

### Quick paths by role

| Role | Start with |
|------|------------|
| **Engineer** | §2 → §3 `:root` → §5 components → §7 shell → §10 checklist |
| **Designer** | §3 colors → §4 type → §6 logos → §8 design rules → §9 backgrounds |
| **Docs / PM** | §1 architecture → §3–§4 tokens & type → §6 logos → §8 voice & structure |
| **Decks / broadcast** | §9 backgrounds → §6 logos → §3–§4 color & type on dark slides |

---

## 1. Brand architecture

**Parent:** Gaming Oasis — Parent company and master brand

**Platform products (use master Gaming Oasis palette + Oxanium):**
- **League Hub** — League management platform
- **Event Solutions** — Talent, production, design, and tournament operations

**Conference brands (use SEL or NEL colors only in conference context):**
- **SEL** — Southeastern Esports League
- **NEL** — Northeastern Esports League

### Context rules

1. Default to **Gaming Oasis** (master) for corporate site, League Hub, Event Solutions, and general marketing.
2. Use **SEL** colors, logos, and backgrounds only for Southeastern Esports League content.
3. Use **NEL** colors, logos, and backgrounds only for Northeastern Esports League content.
4. Do not mix SEL and NEL accents on the same layout unless explicitly co-branding both conferences.
5. Never place logos on a solid matte fill — use transparent PNGs on dark or brand-tinted backgrounds.
6. In code, **scope conference tokens** — do not use `btn-sel`, `--sel-blue`, etc. on master-brand pages unless the content is conference-specific.

---

## 2. Stack & repository conventions

**Canonical marketing site:** `gaming-oasis-site`

| Layer | Choice |
|-------|--------|
| Framework | Next.js 16 (App Router), React 19 |
| Styling | Tailwind CSS v4 (`@import "tailwindcss"` in `globals.css`) |
| Theme bridge | `@theme inline` maps `--color-*` → CSS variables for utilities like `text-foreground`, `bg-surface` |
| Font | Oxanium via `next/font/google` → `--font-oxanium`; `--font-sans: var(--font-oxanium)` |
| Brand source of truth | `src/lib/brand-guide-data.ts` (colors, logos, type scale, buttons, backgrounds) |
| Global styles | `src/app/globals.css` (`:root` tokens, gradients, buttons, cards) |
| Static brand assets | `public/brands/`, `public/brands/backgrounds/` |
| Regenerate this file | `npm run brand:agents` (writes `public/AGENTS.md`) |

**When adding a new Gaming Oasis property (tool, microsite, admin):**

- Import or duplicate the `:root` token block; do not fork hex values under new names.
- Set `html` / `body` like the marketing site if the app is page-based (chromatic wash + fixed gradients).
- Use `.site-chrome` (flat `--background`) only for persistent nav chrome, not full-page fills.
- Prefer extending `brand-guide-data.ts` and the live brand guide over ad-hoc README color lists.

---

## 3. Color system

Use **CSS variables** in code; **hex** in Figma, Google Slides, Word/Notion, and PDF exports. UI and decks are **dark mode first** unless explicitly printing on white (then use dark wordmark).

### Gaming Oasis
Master brand palette for the marketing website and Event Solutions.

- **Brand Gold** `#F6AC18` `--brand` — Primary CTA, accents, selection highlight
- **Brand Contrast** `#252525` `--brand-contrast` — Text on gold buttons
- **Brand Purple** `#47213F` `--brand-purple` — Deep brand purple — page depth, hover backgrounds, gradient atmosphere
- **Accent Orange** `#C7564B` `--accent-orange` — Warm coral accent — Event Solutions, bottom-left glow, card hover
- **Accent Purple** `#713060` `--accent-purple` — Plum accent — hero text gradient, top-right glow, border highlights

### Neutrals
Dark UI foundation. Background is the flat neutral base; Chromatic Background adds the marketing gradient wash on pages.

- **Background** `#1A1A1A` `--background` — Solid neutral gray. Sticky header, footer, mobile nav drawer, and html fallback — flat, no gradient.
- **Chromatic Background** `#1A1419` `--background-chromatic` — Marketing page wash. Body fill plus fixed brand gradients on html/body — purple-tinted atmosphere behind content.
- **Surface** `#2D2D2D` `--surface` — Panels, cards, inputs, and hover states
- **Border** `#404040` `--border` — Borders and dividers

### SEL
Southeastern Esports League — use only in SEL conference contexts.

- **SEL Blue** `#007BF4` `--sel-blue` — Primary SEL accent
- **Conference Yellow** `#FCC500` `--sel-yellow` — Border and gradient highlights
- **SEL Navy** `#101C2B` `--sel-navy` — Deep background accent

### NEL
Northeastern Esports League — use only in NEL conference contexts.

- **NEL Purple** `#644EB5` `--nel-purple` — Primary NEL accent
- **Conference Yellow** `#FCC500` `--nel-yellow` — Border and gradient highlights
- **NEL Deep** `#302063` `--nel-deep` — Deep background accent

### Typography colors (not in Colors panel — required for type)

- **Text Primary** `#FFFFFF` `--foreground` — Tailwind `text-foreground` — Headings, body, and emphasis
- **Text Muted** `#999999` `--muted` — Tailwind `text-muted` — Supporting copy, labels, and placeholders

### `:root` token map (copy into new apps)

```css
--background: #1A1A1A;           /* flat chrome */
--background-chromatic: #1A1419; /* page wash + gradients */
--foreground: #FFFFFF;
--muted: #999999;
--surface: #2D2D2D;
--border: #404040;
--brand: #F6AC18;
--brand-contrast: #252525;
--brand-purple: #47213F;
--accent-orange: #C7564B;
--accent-purple: #713060;
--sel-blue: #007BF4;
--sel-yellow: #FCC500;
--sel-navy: #101C2B;
--nel-purple: #644EB5;
--nel-yellow: #FCC500;
--nel-deep: #302063;
--btn-radius: 0.5rem;
--btn-height: 2.25rem;
--btn-padding-x: 1rem;
--ring: color-mix(in srgb, var(--brand) 45%, var(--accent-purple));
```

### Tailwind / utility usage

| Intent | Prefer |
|--------|--------|
| Primary text | `text-foreground` (`--foreground`) |
| Supporting text | `text-muted` (`--muted`) |
| Brand accent in copy | `text-[var(--brand)]` |
| Card / panel | `surface-card` class or `bg-surface` / `border-border` |
| Page chrome | `background: var(--background)` via `.site-chrome` |
| One-off brand mix | `color-mix(in srgb, var(--token) X%, transparent)` — match existing patterns in `globals.css` |

Avoid hardcoding `#F6AC18`, `#1A1419`, etc. in new components when a token exists.

---

## 4. Typography

- **Typeface:** Oxanium only — Google Fonts via next/font
- **Weights:** Regular (400), Medium (500), Semibold (600)
- **CSS:** `--font-oxanium` → `var(--font-sans) on the marketing website`
- **Google Fonts:** https://fonts.google.com/specimen/Oxanium
- **Scope:** All Gaming Oasis marketing pages, the brand guide, and Event Solutions surfaces.

### Type scale

- **Hero headline** — 36px → 60px · Semibold · Tight tracking · Text Primary
  - Classes: `text-4xl font-semibold tracking-tight text-foreground md:text-6xl`
  - Color: Text Primary (`--foreground`)
  - Use: Page heroes and primary marketing headlines. Optional text-gradient for gold emphasis.
- **Section title** — 30px → 36px · Semibold · Tight tracking · Text Primary
  - Classes: `text-3xl font-semibold tracking-tight text-foreground md:text-4xl`
  - Color: Text Primary (`--foreground`)
  - Use: Section headings via the shared Section component
- **Card title** — 20px · Semibold · Text Primary
  - Classes: `text-xl font-semibold text-foreground`
  - Color: Text Primary (`--foreground`)
  - Use: Feature cards, info blocks, and supporting headings
- **Body copy** — 16px → 18px · Regular · Text Muted
  - Classes: `text-base text-muted md:text-lg`
  - Color: Text Muted (`--muted`)
  - Use: Descriptions, supporting paragraphs, and card copy
- **Eyebrow label** — 12px · Regular · 0.2em tracking · Uppercase · Text Muted
  - Classes: `stat-pill inline-flex px-3 py-1 text-xs tracking-[0.2em] uppercase text-muted`
  - Color: Text Muted (`--muted`)
  - Use: Section tags and metadata chips — pair with the stat-pill surface

### Hero emphasis (web)

Optional gold gradient headline class on the marketing site: `text-gradient` (white → brand gold → accent purple).

**Next.js font setup (reference):**

```tsx
import { Oxanium } from "next/font/google";

const oxanium = Oxanium({
  variable: "--font-oxanium",
  subsets: ["latin"],
  weight: ["400", "500", "600"],
  display: "swap",
});

// <html className={`${oxanium.variable} antialiased`}>
// <body className="font-sans">
```

---

## 5. UI components & CSS classes

Reuse these from `globals.css` before creating parallel button or card systems.

### Buttons

- **Primary** (`btn-primary`) — Default Gaming Oasis action — main CTAs, form submits, and confirmations.
- **Secondary** (`btn-secondary`) — Secondary actions, alternate paths, and lower-emphasis links styled as buttons.
- **SEL** (`btn-sel`) — Southeastern Esports League actions only — Discord joins, registration, conference CTAs.
- **NEL** (`btn-nel`) — Northeastern Esports League actions only — Discord joins, registration, conference CTAs.

| Class | Token / behavior |
|-------|------------------|
| `btn-primary` | `--brand` fill, `--brand-contrast` text |
| `btn-secondary` | transparent, `--border`, hover uses `--brand-purple` mix |
| `btn-sel` | `--sel-blue` — **SEL pages only** |
| `btn-nel` | `--nel-purple` — **NEL pages only** |

Shared: `--btn-radius` (8px), `--btn-height` (36px), semibold, `inline-flex` center.

### Surfaces & layout

| Class | Use |
|-------|-----|
| `site-container` | `min(1200px, 92vw)` centered page width |
| `site-chrome` | Header/footer — flat `--background`, no page gradient |
| `surface-card` | Default panel: `--surface` gradient, `--border`, 1rem radius, hover lift |
| `section-pad` | Vertical section spacing (4–5rem) |
| `stat-pill` | Eyebrow chip surface for section labels |
| `text-gradient` | Hero headline gradient text |
| `brand-gradient` | Decorative brand wash overlay |

### Section / marketing patterns

- **Section titles:** `text-3xl font-semibold tracking-tight text-foreground md:text-4xl` (see `Section` in `src/components/site/section.tsx`).
- **Eyebrows:** `stat-pill` + `text-xs tracking-[0.2em] uppercase text-muted`.
- **Links on dark UI:** `text-muted hover:text-foreground` or `text-[var(--brand)]` for accent links.

---

## 6. Logos & static assets

Rules: transparent PNG only; no matte behind marks; `gaming-oasis-logo-light.png` on dark UI, `gaming-oasis-logo-dark.png` on light UI.

**Public paths (relative to site origin):**

| Asset | Path |
|-------|------|
| Favicon | `/brands/gaming-oasis-favicon.png` |
| Wordmark (light) | `/brands/gaming-oasis-logo-light.png` |
| Wordmark (dark) | `/brands/gaming-oasis-logo-dark.png` |
| SEL logo | `/brands/sel-logo.png` |
| NEL logo | `/brands/nel-logo.png` |

### Download URLs (https://gamingoasis.gg)

### Gaming Oasis
Master brand favicon and wordmarks for the website, League Hub, and marketing.

- **Favicon** — [`gaming-oasis-favicon.png`](https://gamingoasis.gg/brands/gaming-oasis-favicon.png) (750×750px)
  - Browser tab, PWA icon, and small-square slots
  - Square yellow mark for favicon and tiny UI placements.

- **Wordmark (Light)** — [`gaming-oasis-logo-light.png`](https://gamingoasis.gg/brands/gaming-oasis-logo-light.png) (1711×286px)
  - Website header, marketing, and League Hub lockups
  - Light for dark backgrounds; dark for light backgrounds.
- **Wordmark (Dark)** — [`gaming-oasis-logo-dark.png`](https://gamingoasis.gg/brands/gaming-oasis-logo-dark.png) (1711×286px)
  - Website header, marketing, and League Hub lockups
  - Light for dark backgrounds; dark for light backgrounds.

### SEL
Southeastern Esports League — use only in SEL conference contexts.

- **SEL Logo** — [`sel-logo.png`](https://gamingoasis.gg/brands/sel-logo.png) (3000×2094px)
  - Conference logo — Southeastern Esports League
  - Transparent PNG on dark or SEL-tinted surfaces. Served and downloaded as uploaded. Pair with SEL Blue (#007BF4) and Conference Yellow (#FCC500).

### NEL
Northeastern Esports League — use only in NEL conference contexts.

- **NEL Logo** — [`nel-logo.png`](https://gamingoasis.gg/brands/nel-logo.png) (721×563px)
  - Conference logo — Northeastern Esports League
  - Transparent PNG on dark or NEL-tinted surfaces. Served and downloaded as uploaded. Pair with NEL Purple (#644EB5) and Conference Yellow (#FCC500).

**Next.js image:** use `next/image` with explicit dimensions; `unoptimized` for SEL logo if required. Header wordmark: `brand-image` class, transparent background.

---

## 7. Page shell & atmosphere

Match the marketing site unless the product is intentionally flat chrome only.

```text
html     → background-color: var(--background)  /* flat fallback */
html/body → fixed multi-layer radial gradients + linear wash (see globals.css)
body     → background-color: var(--background-chromatic)
header/footer (.site-chrome) → var(--background) only — no gradient
cards    → .surface-card on var(--background-chromatic) pages
```

Do **not** replace the chromatic wash with a single flat hex on marketing pages. Conference-tinted panels may use `color-mix(in srgb, var(--sel-navy) …)` patterns already in `globals.css`.

**Focus ring:** `outline: 2px solid var(--ring)` on interactive elements.

---

## 8. Design, documentation & decks

Shared rules across Figma, Notion/Confluence/Google Docs, PowerPoint/Google Slides, and PDFs.

### Visual design

- **Canvas:** Prefer dark backgrounds — Chromatic Background `#1A1419` with subtle purple/gold atmosphere, or flat Background `#1A1A1A` for chrome-like frames. Match §7 when mimicking the website.
- **Primary accent:** Brand Gold `#F6AC18` for CTAs, highlights, and key metrics — not for large text blocks.
- **Conference work:** SEL palette (blue `#007BF4`, navy `#101C2B`, Conference Yellow `#FCC500`) or NEL palette (purple `#644EB5`, deep `#302063`, same yellow) — never both on one layout unless co-branding.
- **Cards / panels:** Surface `#2D2D2D`, border `#404040`, 16px corner radius (align with `surface-card`).
- **Type hierarchy:** Mirror §4 — hero/section titles in white; body and captions in `#999999`; eyebrows small caps with letter-spacing.
- **Logos:** Download from §6; no boxes or drop-shadow mats; reserve top-left safe zone on “with logo” backgrounds (§9).

### Documentation (Notion, Confluence, Markdown, PDF)

- State the **product context** in the title or intro (Gaming Oasis, League Hub, SEL, NEL).
- Use **exact hex** or token names from §3 in spec tables and handoffs (e.g. “Text Muted `--muted` / `#999999`”).
- Link to the live brand guide (https://gamingoasis.gg/brand) for humans; attach this file for agents.
- **Terminology:** “Conference Yellow” is `#FCC500` for both SEL and NEL; “Background” vs “Chromatic Background” are distinct tokens (§3).
- Screenshots of UI should reflect dark mode and Oxanium where possible.

### Slide decks (Google Slides, PowerPoint, Keynote)

- **Slide size:** 16:9 (matches 1024×576 assets).
- **Master slides:** Import or place §9 backgrounds — *with logo*, *without logo*, or *plain* per slide role; download PNGs from listed URLs.
- **Title slides:** Gaming Oasis palm + icon variant for corporate; SEL/NEL branded backgrounds for conference decks.
- **Typography:** Oxanium Semibold for titles, Regular/Medium for body; minimum ~18pt body on projectors.
- **Bullets:** White or muted gray on dark slides; gold for emphasis sparingly.
- **Charts/diagrams:** Use brand hex for series colors; avoid default chart palettes (blue/red/green).

### Streams & video

- Use §9 WEBM flag loops for SEL/NEL stingers (muted); PNG backgrounds for static scenes.
- Do not stretch assets out of 16:9; letterbox if needed.

---

## 9. Asset backgrounds (16:9)

Dimensions: **1024×576**. Paths under `/brands/backgrounds/`. Use for **decks**, **stream scenes**, **doc covers**, and **social** templates.

- **With logo**: Brand artwork + logo in the top-left safe zone.
- **Without logo**: Brand artwork only — add your own lockup or overlays.
- **Plain**: Atmosphere only (gradient + dot texture) — no artwork or logo.

### Gaming Oasis
Master brand 16:9 backgrounds (1024×576 PNG). Palm-outline artwork on the purple marketing wash.

- **With logo** (PNG) — [`gaming-oasis-background-with-logo.png`](https://gamingoasis.gg/brands/backgrounds/gaming-oasis-background-with-logo.png)
  - Default stream overlay and deck opener — palm artwork plus the Gaming Oasis icon in the top-left safe zone.
- **Without logo** (PNG) — [`gaming-oasis-background-no-logo.png`](https://gamingoasis.gg/brands/backgrounds/gaming-oasis-background-no-logo.png)
  - When you supply your own lockup (sponsor slide, co-branded stream, or custom title safe area).
- **Plain** (PNG) — [`gaming-oasis-background-plain.png`](https://gamingoasis.gg/brands/backgrounds/gaming-oasis-background-plain.png)
  - Gradient and dot texture only — no palm outlines or logo. Use as a neutral slide or document wash.

### SEL
Southeastern Esports League backgrounds — navy wash with SEL letterform outlines, plus a looping flag WEBM for streams. Conference contexts only.

- **With logo** (PNG) — [`sel-background-with-logo.png`](https://gamingoasis.gg/brands/backgrounds/sel-background-with-logo.png)
  - SEL streams, championship decks, and docs — large SEL outline artwork plus the conference logo in the top-left.
- **Without logo** (PNG) — [`sel-background-no-logo.png`](https://gamingoasis.gg/brands/backgrounds/sel-background-no-logo.png)
  - SEL artwork without the corner logo — place registration QR codes, casters, or partner lockups in the safe zone.
- **Plain** (PNG) — [`sel-background-plain.png`](https://gamingoasis.gg/brands/backgrounds/sel-background-plain.png)
  - Navy gradient and dot grid only — no SEL letterforms or logo. Conference-neutral filler slides.

**Animated**

- **Flag (animated)** (WEBM) — [`sel-flag-background.webm`](https://gamingoasis.gg/brands/backgrounds/sel-flag-background.webm)
  - Looping SEL flag motion for OBS/stream scenes, stingers, and video bumper plates. Export as a Browser Source or media fill — keep muted.

### NEL
Northeastern Esports League backgrounds — purple wash with NEL letterform outlines, plus a looping flag WEBM for streams. Conference contexts only.

- **With logo** (PNG) — [`nel-background-with-logo.png`](https://gamingoasis.gg/brands/backgrounds/nel-background-with-logo.png)
  - NEL streams, championship decks, and docs — large NEL outline artwork plus the conference logo in the top-left.
- **Without logo** (PNG) — [`nel-background-no-logo.png`](https://gamingoasis.gg/brands/backgrounds/nel-background-no-logo.png)
  - NEL artwork without the corner logo — for custom title cards or partner overlays.
- **Plain** (PNG) — [`nel-background-plain.png`](https://gamingoasis.gg/brands/backgrounds/nel-background-plain.png)
  - Purple gradient and dot grid only — no NEL letterforms or logo. Conference-neutral filler slides.

**Animated**

- **Flag (animated)** (WEBM) — [`nel-flag-background.webm`](https://gamingoasis.gg/brands/backgrounds/nel-flag-background.webm)
  - Looping NEL flag motion for OBS/stream scenes, stingers, and video bumper plates. Export as a Browser Source or media fill — keep muted.

---

## 10. Checklists

### Software (websites & tools)

- [ ] Correct brand context (master vs SEL vs NEL) for routes and components
- [ ] Colors via `var(--…)` / Tailwind theme tokens — no new one-off hex unless added to `:root` and brand guide
- [ ] Oxanium loaded; `font-sans` on body
- [ ] Buttons use `btn-primary` / `btn-secondary` / conference variants appropriately
- [ ] Cards and sections follow `surface-card`, `site-container`, type scale classes
- [ ] Logos from `/brands/*` — transparent, correct light/dark wordmark
- [ ] Header/footer use `.site-chrome` + `--background`; page content sits on chromatic wash
- [ ] If tokens changed: update `brand-guide-data.ts`, `globals.css`, run `npm run brand:agents`

### Design, docs & decks

- [ ] Correct brand context (Gaming Oasis vs SEL vs NEL)
- [ ] Oxanium (or document exact fallback if fonts cannot embed)
- [ ] Official hex tokens — no approximate oranges/purples
- [ ] Sufficient contrast: `#FFFFFF` / `#999999` on dark backgrounds
- [ ] Official logo/background files from §6 / §9 — not recreated from memory
- [ ] Conference yellow is **`#FCC500`** for both SEL and NEL
- [ ] Decks use 16:9 and appropriate background variant (with / without / plain logo)
- [ ] Docs name tokens and link https://gamingoasis.gg/brand when handing off to engineering

---

## 11. Do / Don't

**Do**
- Use one token system across code, design, and slides (§3)
- Reuse §9 backgrounds and §6 logos for decks and stream packages
- Keep SEL/NEL scoped to conference content
- For code: extend `globals.css` patterns (`btn-*`, `surface-card`, `text-foreground` / `text-muted`)
- For docs: table hex + token name together for developer handoff

**Don't**
- Invent new brand colors, gradients, or logo redraws
- Mix SEL and NEL palettes on master Gaming Oasis materials (unless showcasing both conferences)
- Place logos on solid white/colored mats
- Use light-mode-first layouts for customer-facing Gaming Oasis materials without approval
- Substitute Arial/Inter for Oxanium in branded deliverables when Oxanium is supported
- Put `btn-sel` / `btn-nel` on master-site CTAs (code)

---

*Generated from `brand-guide-data.ts`. Asset URLs use origin `https://gamingoasis.gg`. For human review see https://gamingoasis.gg/brand.*