# Prospr brand kit

Source: PROSPR Brand Guidelines PDF (2026), aligned 2026-08-13.
Dark-first; authenticated product surfaces use the Midnight application system.
This file is the brand-kit source of truth. Visual philosophy lives in
[`VISUAL-DIRECTION.md`](VISUAL-DIRECTION.md); application tokens and components live in
[`DESIGN-SYSTEM.md`](DESIGN-SYSTEM.md). If those files disagree with the type or logo
rules below, this file and the PDF win.

## Canonical mark

**`/assets/images/logo/ProsprMark.svg`** — official logomark in Electric Blue `#2A65D8`.
Fixed fills — do not recolor in place for product UI.

Color variants:
- `ProsprMark.svg` / `ProsprMark-white.svg` / `ProsprMark-black.svg`
- Designer sources: `Logomark_Eletric Blue.svg`, `Logomark_Pure White.svg`, `Logomark_True Black.svg`

In React, use `ProsprLogo` / `ProsprMark` (`src/components/brand/ProsprLogo.js`).
Pass `size` as wordmark capital height **H** (px).

## Canonical wordmark (Primary #1)

**`/assets/images/logo/ProsprWordmark.svg`** — official Primary #1 signature (outlined PROSPR).
Default fill is Pure White for dark UI.

Color variants:
- `ProsprWordmark.svg` (white) / `ProsprWordmark-blue.svg` / `ProsprWordmark-black.svg`
- Designer sources: `Primary #1_Eletric Blue.svg`, `Primary #1_Pure White.svg`, `Primary #1_Ture Black.svg`

## Mark-to-text sizing (capital height = H)

| Element | Size |
| --- | --- |
| Wordmark capital height | **1.00H** |
| Mark height | **1.72H** |
| Mark width | **~1.755H** (aspect ≈ 1.020∶1) |
| Mark-to-wordmark gap | **0.385H** |

Wordmark: **custom outlined vector** (Primary #1), never live typed text. Aspect ≈ 6.402∶1 at cap height.

```jsx
<ProsprLogo size={16} />
<ProsprMark capHeight={16} />
<ProsprWordmark capHeight={16} />
```

## Typography

Plus Jakarta Sans is the primary typeface. Syne is supporting, and only for a sung line.
IBM Plex Mono is not part of the system. Do not load it. `--font-mono` is a *role*
(tabular, comparable data), not a second family.

| Role | Face | Case / weight | Token |
| --- | --- | --- | --- |
| Headline | Plus Jakarta Sans | Upper & lowercase / Bold | `--font-brand` |
| Subhead / eyebrow | Plus Jakarta Sans | ALL CAPS / Semibold | `--font-brand` |
| Body | Plus Jakarta Sans | Upper & lowercase / Regular | `--font-brand` |
| Marketing CTA | Plus Jakarta Sans | Upper & lowercase / Bold | `--font-brand` |
| App commit / pill | Plus Jakarta Sans | ALL CAPS / Bold | `--font-brand` |
| Data, balances, tables | Plus Jakarta Sans | Tabular numerals | `--font-mono` |
| Quotation / tagline | Syne | Upper & lowercase / Semi Bold (600) only | `--font-display` |
| Logo | Custom vector wordmark | Never live-typed, including in Syne | SVG |

**Syne rules:** one quotation or tagline per surface; never a paragraph, never all-caps,
never a page title, never nav or UI, never the authenticated app. The wordmark is not Syne
set in type.

**Size floors:** public / marketing / access labels start at 12px (`--app-t-xs` /
`--text-xs`). In the app, 11px (`--app-t-micro`) is only for axes, table headers,
timestamps, and true micro metadata.

## Colors

| Token | Hex | Use |
| --- | --- | --- |
| Electric Blue | `#2A65D8` | **Logo only** (on pearl / black / white) |
| Bright Orange | `#FF931C` | Primary commitment/action (`--brand-primary`) |
| Pearl Grey | `#CACACA` | Neutral |
| Storm Grey | `#A6A6A6` | Neutral |
| Pure Black | `#000000` | Dark surfaces / app icon ground |
| Warm Suede / Sweet Chestnut / Dark Bronze | secondary | Marketing atmosphere |

Commit buttons: pill (`rounded-full`), Bright Orange, dark `#0C0C0E` ALL CAPS bold text.
Standard, reversible actions use neutral rectangular controls; not every button is a pill.

## Product interface language

The authenticated product inherits the brand's material, not the landing page's scene
choreography. The live `/dashboard` baseline is the implementation reference.

- **Ground:** neutral Midnight surfaces (`#0A0A0C` through `#1A1A1F`), with depth created by
  tonal steps, hairline borders, and soft black shadow. No neon borders or ambient glow.
- **Hierarchy:** one focal object per screen. High-traffic leads may use
  `DashboardCard variant="stage"` with `.app-chrome`; secondary routes remain quieter.
- **Action:** orange is reserved for the primary commitment, active navigation, and focus.
  Reversible controls use `.app-btn--standard`; tertiary actions use `.app-btn--quiet` or
  `.app-btn--nav`.
- **Structure:** Electric Blue is logo/data structure, not a CTA fill. Use `--data-info`
  (`#7FA3FF`) for legible informational text and comparison series.
- **Data:** comparable figures use the `--font-mono` role (Plus Jakarta Sans) with tabular
  numerals, including public product theatre. Green and red are semantic market/status
  colors, never decorative fills.
- **Composition:** build routes with `DashboardPage`, `DashboardPageHeader`,
  `DashboardWorkspaceHeader`, `DashboardWorkspaceNav`, `DashboardSelector`, `DashboardSection`,
  `DashboardGrid`, `DashboardToolbar`, and `DashboardStage`. Portfolio, Automated Investing,
  Intelligence, Earn/Rewards, Token Center, and Account/Settings use the workspace header so
  identity, navigation, state, and actions share one responsive hierarchy. Route navigation,
  Documentation tabs, and Exchange
  use one selector geometry; route location uses the action-tint state while local filters use a
  neutral selected state. Dense exchange/DOM workspaces may compress spacing but do not opt out
  of tokens, hierarchy, or responsive containment.
- **Utilities:** Account, billing, security, documents, tax, AI connections, Investor, Token
  Center, and Documentation use the same composition contract. Build Settings interiors with
  `SettingsSection`, `SettingsRows`, `SettingsRow`, `SettingsNotice`, `SettingsEmptyState`, and
  `SettingsSwitch`; use `.app-control` for fields. Related values belong in rows, not a stack of
  single-purpose cards. Consequential changes confirm through one commit or destructive action.
- **Charts:** use `src/components/chart/theme.js` (`chartTheme`, `chartSeries`); do not introduce
  per-page rainbow palettes or raw brand hex values.

Current certified scope: the 50 active user-facing `/dashboard` page components, excluding
redirect/re-export routes and `/dashboard/layout-map`, plus all nine active `/settings` pages.
The sidebar Utilities scope is certified across 18 active pages: Investor, seven Token Center
routes, Account/Settings, Billing, and Documentation. `/admin-dashboard` is not certified.

## Brand kit files

- `prospr-mark-blue.svg` / `-black.svg` / `-white.svg`
- `prospr-mark-midnight.svg` — blue mark (dark UI)
- `prospr-lockup-midnight.svg` — Signature #2 (mark + PROSPR)
- `prospr-lockup-stacked.svg` — Signature #1
- `prospr-logotype.svg` — Primary #1 wordmark only
- `prospr-app-icon.svg` + `pwa-icon-*.png` — black squircle + blue mark
- Header-backed: `prospr-*-header-dark.svg` / `-light.svg`

## Rules

- Prefer canonical `ProsprMark.svg` + `ProsprWordmark.svg` in app and marketing.
- Electric Blue logo only on pearl grey, pure black, or white.
- On secondary colors, use black or white logo.
- Dark application theme only for now; the light-theme alias intentionally resolves to the
  same Midnight tokens.
- Minimum mark height ≈ 16px.


Work only in the current `spacegtaco/quantatradeai` checkout. Confirm the
active branch and dirty worktree before editing.

The homepage is the React landing at `/` (`src/app/(public)/page.js`). Components,
hooks, and section-owned CSS live in `src/components/public/landing/`.

Preserve all existing routes, anchors, form behavior, navigation behavior, chart behavior, accessibility semantics, and legal disclosures.

Preserve confirmed copy, figures, token mechanics, pricing, and performance methodology unless a prompt explicitly requests a state label required for accuracy.

Keep prototype, planned pricing, simulated performance, and illustrative AI labels visible. Never make the product appear live.

Do not add new claims, partnerships, licences, assets under management, security guarantees, or performance figures.

Do not add dependencies. Use semantic HTML, CSS, existing SVG assets, and the current JavaScript.

Use the canonical logo assets in public/assets/images/logo/. Never recreate or type the wordmark.

Use public/brand/BRAND.md, public/brand/VISUAL-DIRECTION.md, and public/brand/linkedin-banner.svg as repository sources of truth.

Do not copy third-party assets or layouts. Translate principles into Prospr's own visual system.

Keep the site dark-first. Light or pearl surfaces may appear only as contained product panels, not as a full light-theme conversion.

Maintain WCAG AA contrast, keyboard focus, reduced-motion support, and usable layouts at 1440, 1024, 768, 390, and 360 pixels.