# The Crypto Hub — Brand Guide

This folder is the single source of truth for **The Crypto Hub** brand assets:
logo, colors, typography, and the reusable visual language. Every value here is
extracted directly from the codebase (it is **not** invented) — the canonical
implementation lives in the shared [`Logo`](../src/components/shared/logo.tsx)
component and [`src/app/globals.css`](../src/app/globals.css).

> The product is **dark-mode-first**. Treat the dark theme as the primary brand
> surface; the light theme is a supported alternate.

```
branding/
├── README.md                          ← you are here (brand guide)
├── logo/
│   ├── logo-full.svg                  ← icon + wordmark lockup (dark bg, gradient)
│   ├── logo-full-light-bg.svg         ← solid-color wordmark for light backgrounds
│   ├── logo-icon.svg                  ← icon mark only (Orbital Hub)
│   ├── favicon.svg                    ← square app / favicon icon
│   └── legacy-hexagon.svg             ← DEPRECATED old hexagon mark
├── colors/
│   ├── colors.json                    ← machine-usable name → hex + role
│   ├── colors.css                     ← :root / .dark custom properties
│   └── swatches.html                  ← self-contained visual palette (open in browser)
└── visual-elements/
    ├── README.md                      ← notes on glass/card styling & public assets
    ├── gradients-and-effects.css      ← gradient text, chips, glows, backgrounds
    └── icon-chips.svg                 ← visual reference of icon-chip tints
```

---

## 1. Brand name

**The Crypto Hub** — written as a single-word wordmark **`TheCryptoHub`** in the
logo lockup. Tagline / description used across metadata:
*"Your all-in-one crypto trading, learning, and portfolio management platform."*
Production domain: `thecryptohub.io`.

---

## 2. Logo

### Current / official mark — "Orbital Hub"
The canonical logo is the shared React component
[`src/components/shared/logo.tsx`](../src/components/shared/logo.tsx) (the icon
glyph is also exported as `LogoMark`). It is used across the app sidebar,
marketing navbar, and footer, the admin brand, the auth screens, the browser
tab (favicon) and push notifications, and consists of:

1. **Icon mark** — the bespoke **Orbital Hub**: an **open orbit ring** (the
   "hub" — a central point of connection) with an **ascending spark** that rises
   from the lower-left, through the hub, and breaks out through the ring's gap to
   a **bright node** at the upper right (upward momentum / growth). It is painted
   in the brand green gradient — a diagonal stroke gradient
   (`#16A34A → #22C55E → #4ADE80`) on the ring and spark, with a bright
   `#4ADE80` node. Strokes are intentionally heavy (≈6/64) so the mark reads
   clearly down to a **16px favicon**. In the app it sits inside the
   rounded-square icon chip (`rounded-lg`, `h-8 w-8` = 32px, `bg-profit/20`)
   which deepens and gains a green glow on hover
   (`shadow-[0_0_16px_rgba(34,197,94,0.35)]`).
2. **Wordmark** — the text `TheCryptoHub` in the display font (**Orbitron**),
   `font-bold`, `tracking-wider`, painted with the green `.gradient-text`
   gradient (`linear-gradient(135deg, #22C55E, #4ADE80, #22C55E)`).

> This mark replaces the previous generic lucide `trending-up` glyph. The name
> "The Crypto **Hub**" is expressed literally: an orbit/hub ring with a rising
> spark — connection plus growth.

Exported faithfully as SVG in `logo/` (and mirrored to `public/logo.svg` and
`src/app/icon.svg` / `favicon.ico` / `apple-icon.png` for the runtime app):

| File | Use |
|---|---|
| `logo/logo-full.svg` | Primary lockup for **dark** backgrounds (gradient icon + wordmark). |
| `logo/logo-full-light-bg.svg` | Lockup for **light** backgrounds (solid `#16A34A` icon + wordmark). |
| `logo/logo-icon.svg` | Icon mark only (gradient Orbital Hub on transparent); also shipped as `public/logo.svg`. |
| `logo/favicon.svg` | Square favicon/app icon (solid gradient chip, dark knocked-out mark); also shipped as `src/app/icon.svg`. |

### Legacy / deprecated mark
`logo/legacy-hexagon.svg` is an older **hexagon** mark with an embedded chart
line. It is **deprecated** and kept for reference only. Do **not** use it for new
surfaces; use the Orbital Hub lockup instead. (`public/logo.svg` now serves the
Orbital Hub mark.)

### Clear space & sizing
- Maintain clear space around the lockup of at least the **chip height** (≈32px /
  the height of the icon) on all sides.
- The Orbital Hub holds up down to **16px** — use `favicon.svg` (solid gradient
  chip) at those small sizes for maximum contrast.
- Minimum wordmark height ≈ 20px so `TheCryptoHub` stays legible.

### Do
- Use the **gradient** wordmark + gradient icon on dark surfaces (primary usage).
- Use the solid-green (`#16A34A`) variant on light surfaces if the gradient lacks
  contrast.
- Keep the icon in the brand green and, in-app, inside the translucent green
  chip, per the component.

### Don't
- Don't recolor the wordmark or mark outside the approved green (or its solid fallback).
- Don't stretch, rotate, or add drop shadows beyond the defined green hover glow.
- Don't reintroduce the old flat legacy hexagon mark (`legacy-hexagon.svg`).
- Don't swap the Orbital Hub for a stock icon (e.g. a plain `trending-up`).
- Don't close the ring's gap or detach the spark's node — the "break-out" is the
  whole idea.

---

## 3. Color palette

Primary brand accents (theme-independent). Full surface/text tokens are in
`colors/colors.json` and `colors/colors.css`.

### Brand accents

| Name | Role | Hex | CSS var / Tailwind token | Light (gradient/chip) |
|---|---|---|---|---|
| Profit / Green | **Primary brand**, positive change, buy | `#22C55E` | `--profit` / `profit` | `#4ADE80` |
| Loss / Red | Negative change, sell, destructive | `#EF4444` | `--loss` / `loss` | `#F87171` |
| Gold / Amber | Premium, highlights, **light-theme primary** | `#F59E0B` | `--gold` / `gold` | `#FBBF24` |
| Purple | Secondary data accent (charts, DeFi) | `#8B5CF6` | `--purple-accent` / `purple` | `#A78BFA` |
| Cyan | Tertiary data accent (charts, info) | `#06B6D4` | `--chart-5` / `chart-5` | `#22D3EE` |
| Orange | Quaternary accent (chips, warnings) | `#F97316` | *(chip only)* | `#FB923C` |

### Dark theme — surfaces & text (primary brand surface)

| Name | Role | Value | CSS var |
|---|---|---|---|
| Background | App background | `#111113` | `--background` |
| Background (simplified) | Pure-black view mode | `#000000` | `--background` |
| Sidebar | Navigation surface | `#0E0E10` | `--sidebar` |
| Popover | Menus, dialogs | `#18181B` | `--popover` |
| Foreground | Primary text | `#EAEAEC` | `--foreground` |
| Muted foreground | Secondary text | `#A1A1AA` | `--muted-foreground` |
| Primary | Primary action (green on dark) | `#22C55E` | `--primary` |
| Card | Glass card surface | `rgba(255,255,255,0.035)` | `--card` |
| Border | Hairline border | `rgba(255,255,255,0.07)` | `--border` |

### Light theme — surfaces & text

| Name | Role | Value | CSS var |
|---|---|---|---|
| Background | App background | `#F8FAFC` | `--background` |
| Foreground | Primary text | `#1E293B` | `--foreground` |
| Card | Card surface | `#FFFFFF` | `--card` |
| Muted foreground | Secondary text | `#64748B` | `--muted-foreground` |
| Border | Default border | `#E2E8F0` | `--border` |
| Primary | Primary action (gold on light) | `#F59E0B` | `--primary` |

> Open `colors/swatches.html` in a browser for a rendered palette.

---

## 4. Typography

Fonts are loaded via `next/font/google` in
[`src/app/layout.tsx`](../src/app/layout.tsx).

| Role | Family | CSS var / Tailwind | Weights | Usage |
|---|---|---|---|---|
| Display / Heading | **Orbitron** | `--font-display` / `font-display` | 400, 500, 600, 700 | Logo wordmark, hero & section headings, stat values, uppercase labels. Usually paired with wide tracking (`tracking-wider` / `tracking-tight`). |
| Body / Sans (base) | **Exo 2** | `--font-sans` / `font-sans` | 300, 400, 500, 600, 700 | Default UI/body text (`html { font-sans }`). |
| Mono | **Geist Mono** | `--font-geist-mono` / `font-mono` | (default) | Numeric/tabular data, code, `.mono-sm` — usually `font-variant-numeric: tabular-nums`. |

Typographic conventions (from `globals.css`): small **uppercase** labels with
wide letter-spacing (`section-label`, `card-title`, `stat-label` at ~10–11px,
`letter-spacing: 0.12–0.15em`), bold tabular stat values, and tight tracking on
large display headings.

---

## 5. Visual language

The brand aesthetic is a **dark fintech / glassmorphism** look. See
[`visual-elements/`](./visual-elements/) for copy-paste CSS and references.

- **Gradient text** — 135° green (also gold & purple variants) clipped to text;
  the logo wordmark's signature treatment.
- **Icon chips** — tinted rounded containers (`0.18→0.06` alpha diagonal
  gradient + `0.22` border + lighter accent glyph) in six accent colors.
- **Glass surfaces** — translucent white fills with backdrop blur; cards warm to
  a green border + glow on hover.
- **Glows & ambient backgrounds** — soft colored shadows plus grid, radial glow,
  and backlight scenes over the near-black `#111113` background.

---

*Generated as a design deliverable. This folder is intentionally committable
(unlike the gitignored `docs/`). If any value here drifts from the code, the code
in `src/components/shared/logo.tsx` and `src/app/globals.css` wins.*