# Prospr visual direction — Modern Financial Intelligence

Companion to [`BRAND.md`](BRAND.md) (logo, colors, type) and [`Prospr_Public_Brand_Positioning_and_Messaging_Framework.md`](../../src/lib/Prospr_Public_Brand_Positioning_and_Messaging_Framework.md) (voice, sequencing).

For the authenticated application, see [`DESIGN-SYSTEM.md`](DESIGN-SYSTEM.md) — it records the
implemented dashboard tokens, component contracts, composition rules, and remaining scope.

**Purpose:** Give every landing and marketing edit a shared decision system so changes stay coherent — not isolated style tweaks.

---

## North star

**Prospr is modern financial intelligence:** simple on the surface, serious underneath.

| Layer | Feels like | Looks like |
| --- | --- | --- |
| **Surface** | Clarity, control, guided entry | Readable copy, one focal moment, warm editorial breath |
| **Substance** | Execution, automation, intelligence | Product-led surfaces, data composition, methodology proof |
| **Depth** | Premium fintech, not meme crypto | Architectural dark fields, contained light panels, precise tabular data |

Strategic rule (from messaging): **platform first, token later.** Visual sequencing mirrors narrative sequencing.

---

## What Prospr is not

- Meme crypto / exchange template (glowing borders, scattered tiles, coin decoration, circuit motifs)
- Generic “AI super app” (orbs, chat bubbles everywhere, purple gradients, sparkle icons)
- Cold institutional terminal (flat black, monospace headlines, dense grids with no editorial rhythm)
- Soft robo-advisor pastel (rounded everything, illustration-heavy, no product proof)

Translate inspo **principles** (Neon chapter bands, Revolut trust rhythm, Revolut/Neon editorial restraint) — never copy layouts or third-party chrome.

---

## Color system

### Roles (strict)

| Token | Hex / source | Role | Use |
| --- | --- | --- | --- |
| **Midnight stack** | `--midnight-*` | Architectural ground | Page environment, system chapter, chrome |
| **Warm Suede field** | `--suede-field` `#F3EEE6` | Editorial breath | Product chapter background; contained panels only |
| **Electric Blue** | `#2A65D8` | **Structural / data** | Grids, train bands, chrome rules, chart structure, links in trust ledger — **not** headline emphasis |
| **Bright Orange** | `#FF931C` | **Action / rare emphasis** | Primary CTA fill, active tab indicator, one hero metric — **not** every `<em>` |
| **Pearl / Storm grey** | `#CACACA` / `#A6A6A6` | Copy hierarchy | Body, meta, disclaimers |
| **Green positive** | `#4ADE80` | Data only | Up candles, positive P/L in mono — never decorative |

### Blue vs orange decision tree

```
Is it clickable or the single primary action in a section?
  → Orange (btn--primary, active tab underline)

Is it data structure, methodology, or product chrome?
  → Blue tint (--blue-reflect, --stage-chrome-*, --data-accent-train)

Is it editorial emphasis in a headline?
  → Prefer weight/scale/line-break — orange only if ONE word is the section's sole punch

Is it legal/state labeling?
  → Neutral uppercase (.label-illustrative, .label-planned) — never orange
```

**Logo blue** stays in canonical SVG assets only (`ProsprMark.svg`). Do not spread `#2A65D8` as a brand wash.

### Warm suede / paper

Suede is **atmosphere and reading comfort**, not a second brand.

- Full chapter background: `--env-product` (product-light band)
- Contained cards on dark: optional cream/pearl inset panels (pricing slabs, editorial callouts)
- Never convert the whole site to light theme

---

## Typography

Canonical roles are in [`BRAND.md`](BRAND.md). Do not invent a third face or revive IBM Plex Mono.

| Role | Font | Use |
| --- | --- | --- |
| Headlines, UI, body, CTAs | Plus Jakarta Sans | Nav, h1–h3, copy, buttons |
| Subheads / eyebrows | Plus Jakarta Sans | ALL CAPS Semibold |
| Quotation / tagline | Syne Semi Bold, upper & lowercase | One sung line per surface. Never a title, paragraph, or UI |
| Data | Plus Jakarta Sans + tabular numerals (`.mono`) | Balances, percentages, axes, gate numbers — public and app |
| Wordmark | SVG only | Never live-type “PROSPR”, including in Syne |

**Hierarchy through size and spacing first**, color second. Tabular nums on all financial figures.
Public labels start at 12px. Syne is `--font-display` and is excluded from the authenticated app.

---

## Depth model

Depth comes from **tone steps, scale, and lighting** — not glow borders.

| Level | Token | When |
| --- | --- | --- |
| 0 | `--depth-0` | Page environment, transparent chapter overlays |
| 1 | `--depth-1` | Inline chips, subtle rails |
| 2 | `--depth-2` | Cards, trust rows |
| 3 | `--depth-3` | **Product stage** (`.product-surface`) — one per section max |
| 4 | `--depth-4` | Modal / elevated inspector only |

**Lighting (allowed):**

- `--blue-reflect` / `--orange-glow` as **large, low-opacity radial fields** on dark chapters (environment.css pattern)
- Inset 1px highlights on dark planes (`--depth-*-shadow` inset values)

**Forbidden:**

- Neon card borders, pulsing glows on static content, decorative bloom on non-interactive elements
- Multiple competing elevated panels in one viewport

---

## Section choreography

Three macro environments (scroll-driven via `data-environment-start`):

```
opening-dark  →  product-light  →  system-dark
(#0A0A0C)        (#F3EEE6)         (#050506)
```

| Chapter | Job | Visual character |
| --- | --- | --- |
| **Opening** | Promise + front door | Dark field, single product theatre, editorial copy column |
| **Product** | Platform + experience + evidence | Suede breath; dark product stages as contained objects |
| **System** | Trust + commercial + token + close | Return to midnight; slower, denser, more institutional |

**Rhythm rule:** alternate **editorial band** (copy-led, no chrome) with **product band** (one stage). Avoid three full mockups stacked without an editorial beat between them.

**Chapter markers:** `01 · Label` format — number in orange, label in muted uppercase. Use consistently or not at all; do not mix numbered and unnumbered sections arbitrarily.

---

## Hierarchy rules (mandatory)

### 1. One focal moment per section

Each section gets **exactly one** dominant visual anchor:

| Section type | Focal moment | Supporting elements |
| --- | --- | --- |
| Hero | Product stage OR headline — not both at equal weight | CTA pair, one metric |
| Editorial (promise, intros) | Headline block | One metaphor or diagram, muted |
| Platform / modes | Interactive product stage | Tab labels, one explain column |
| Evidence | Chart + hero metric | Baseline stats, disclosure |
| Trust | Commitment ledger | Resource links |
| Pricing | Comparison slab | Planned-state banner |
| Token | Utility diagram | Route labels |
| CTA | Headline + primary button | No second product mock |

Everything else is **subordinate** (smaller type, muted ink, fewer borders).

### 2. One primary CTA style

**`.btn.btn--primary`** only — pill, Bright Orange, dark `--on-orange`, Plus Jakarta Bold.
The brand PDF sets marketing CTAs in upper & lowercase. Application commit pills stay
ALL CAPS (DESIGN-SYSTEM Law 5). Do not invent a third CTA voice.

| Variant | Class | When |
| --- | --- | --- |
| Primary | `.btn--primary` | One main action per section (Explore prototype, Get updates) |
| Secondary | `.btn--ghost` | Alternate path (See planned pricing) — max one per section |
| Tertiary | Text link with arrow | In-content navigation (`trust__row-link`, `platform__selector-link`) |
| Non-action | `.label-*`, spans in mocks | Never styled as buttons |

Do not invent `.btn--secondary`, gradient buttons, or blue CTAs on marketing surfaces.

Authenticated product controls use the equivalent `.app-btn` hierarchy: `--commit` for the
single flow-completing action, `--standard` for reversible commands, `--quiet` for tertiary
commands, and `--nav` for navigation. Legacy `GlowButton` remains only as a compatibility
wrapper over those classes; it must not reintroduce glow.

Route-family headers use `DashboardWorkspaceHeader` with `DashboardWorkspaceNav`. The page title
leads, supporting context sits beneath it, controls align to the right, and related destinations
occupy a separate scan line. Route navigation uses the same bordered selector geometry as
Documentation and Exchange, with a restrained orange-tint location state and horizontal overflow
on narrow screens. Local modes and filters use the same base segment geometry with a neutral
selected state; do not introduce a second tab or underline language inside dashboard pages.
Portfolio, Automated Investing, Intelligence, Earn/Rewards, Token Center, and Account/Settings
all own this selector locally; the dashboard shell does not render a global submenu strip.

Utility interiors use one compact account-control language beneath that header. Group a task in
`SettingsSection`, place comparable account values in `SettingsRows` / `SettingsRow`, and use
`SettingsNotice`, `SettingsEmptyState`, `SettingsSwitch`, and `.app-control` for state, empty,
binary, and field behavior. The focal task wins through row hierarchy and whitespace, not a
gradient title or another highlighted card. Green and red appear only when the utility is
reporting real status or consequence.

### 3. One evidence surface style

All methodology, quant, and validation content uses the **evidence surface**:

- Background: `--evidence-bg` on dark or editorial ink on suede
- Data ink: `.mono`, `--data-mono-ink`
- Structure: `--evidence-grid`, `--evidence-rule`
- Train/holdout: `--data-accent-train` (blue), `--data-accent-hold` (orange **for data series only**)
- Required: inline disclosure + footer methodology paragraph
- Labels: `label-illustrative`, simulated/planned copy always visible

Do not render proof as generic candle charts or exchange widgets. Charts serve **methodology narrative**, not market hype.

### 4. One trust surface style

Trust content uses the **trust ledger** pattern:

- Dark field, row-based links (`.trust__row`)
- Status pills: neutral uppercase (`Stated before launch`, `Labeled separately`)
- Orange only on row link text / arrow — not row backgrounds
- No regulator logos, no fake badges, no stats walls pre-launch

Honest-by-design is **structural** (scannable rows, plain language), not decorative shields.

---

## Surface taxonomy

Use the correct surface — do not mix:

| Class / pattern | Purpose | Max per page area |
| --- | --- | --- |
| `.product-surface` | Interactive prototype chrome | **1 active stage** in viewport |
| `.editorial-width` + copy | Narrative, lede, chapter intro | Unlimited but keep short |
| Evidence composition | Quant / validation | 1 chart-led block |
| `.trust__ledger` | Commitments | 1 band |
| `.pricing__slab` | Planned tiers | 1 comparison |
| `.token__ledger` | Utility routing | 1 diagram |
| Decorative / `aria-hidden` | Handoff rails, geometry | Minimize; candidate for removal |

---

## Motion rules

Motion must **explain state, scrolling context, or product causality** — never decorate.

| Allowed | Purpose |
| --- | --- |
| Environment crossfade (`--dur-env`) | Scroll chapter handoff |
| Reveal on enter (`.reveal`, `[data-motion]`) | Section arrival |
| Tab/panel switch (`--platform-dur`) | Product state change |
| Co-pilot typing sequence | Causality: question → analysis → action |
| Token path draw | Utility route selection |
| Metric count-up (once) | Draw eye to hero figure |
| Hero chart (intersection-gated) | Live prototype feel — must keep illustrative label |

| Forbidden | Why |
| --- | --- |
| Infinite ambient loops on decorative elements | Noise |
| Parallax on logos / marks | Crypto cliché |
| Glow pulse on static cards | Generic fintech |
| Motion without reduced-motion fallback | A11y |

Always gate with `prefers-reduced-motion: reduce` (foundation.css zeroes durations).

---

## Headline & emphasis rules

Messaging line: *Simple to start. Powerful to scale.*

**Visual emphasis priority:**

1. Line break + scale (Jakarta Bold display size clamp)
2. Weight (700 on the key word; 800 is landing-only, never in the app)
3. Syne — **only** if the line is a quotation or tagline, Semi Bold, upper & lowercase
4. Orange `<em>` — **at most one per section**, and not on every section of the page

Current pattern to move away from: orange `<em>` on every h2 fragment (`Invest, Trade, *Prosper*`, `Honest by *Design*`, etc.). Reserve orange-in-headline for **one** opening brand moment; elsewhere use ink contrast.

---

## State & legal labeling (non-negotiable)

Visual system must keep these visible:

| Label | Meaning |
| --- | --- |
| `label-illustrative` | Demo UI, not live data |
| `label-planned` | Pricing/product not live |
| Prototype / simulated copy | Hero, modes, co-pilot |
| Footer disclaimer | Walk-forward methodology |
| Entity disclosure | Pre-launch regulatory status |

Style: small caps, muted ink — **never** hide in footnotes alone when attached to figures.

---

## Responsive & accessibility

Breakpoints: 1440, 1024, 768, 390, 360 (per BRAND.md).

- WCAG AA contrast on all chapter transitions (`data-page-contrast` sampling)
- Focus: orange outline (`--focus-color`)
- No horizontal overflow; `overflow: clip` on theatres
- Mobile: nav must expose anchors (current gap: links hidden ≤768 with no menu)

---

## Edit decision checklist

Before merging any landing visual change, confirm:

1. **Which chapter?** (opening / product / system) — colors and ghost buttons follow chapter contrast.
2. **What is the one focal moment?** — if you added a second stage, remove or demote something.
3. **Does orange appear more than once in this section for non-CTA reasons?** — reduce.
4. **Is blue doing structure/data work?** — if blue is decorative, remove.
5. **Is this surface the right taxonomy?** — product vs evidence vs trust vs editorial.
6. **Does motion explain a state change?** — if not, cut it.
7. **Are prototype/planned/simulated labels still visible?**
8. **Logo rules intact?** — canonical SVG, no recolored mark, no typed wordmark.

---

## Current landing — gap notes (audit baseline)

Issues to resolve in future passes (not blockers for this doc):

- Three stacked product mockups (hero, platform, modes) before trust — violates one-stage rhythm
- Repeated orange `<em>` headline pattern — dilutes action color
- BTC concentration demo repeated 3× — narrative redundancy
- Promise scatter tiles — generic crypto decoration candidate
- CTA geometry glow — decorative depth candidate
- Chapter markers only on sections 01–02 — inconsistent orientation
- Header nav hidden on mobile without replacement

---

## File map (active implementation)

| File | Role |
| --- | --- |
| `src/components/public/landing/styles/foundation.css` | Tokens, primitives, buttons, labels |
| `src/components/public/landing/styles/campaign/` | Campaign scenes by narrative section |
| `src/components/public/landing/styles/exhibits/` | Platform, Guided/Pro, process, and token layouts |
| `src/components/public/landing/styles/prototype/` | Prototype shell and surface overrides |
| `src/components/public/landing/styles/environment.css` | Chapter environments |
| `src/components/public/landing/styles/motion.css` | State motion |
| `public/brand/BRAND.md` | Logo + canonical hex |
| This file | Visual direction + hierarchy rules |

The React component tree and its colocated styles are the only homepage source
of truth. Do not recreate a parallel static implementation.