# FUNDING MACHINE · AI AGENT BUILD DIRECTIVE

**Load this file into any AI agent (Claude, Cursor, GPT, Genspark, Bolt, Windsurf) before generating Funding Machine assets.**

You are building for the **Funding Machine** brand system + **Funding Machine ONE™** engineering platform.
Every asset you generate MUST inherit from the tokens, voice, and rules below.

---

## 0. IDENTITY

- **Company:** Funding Machine (7 Figures Consulting dba My Funding Machine)
- **Product:** The Funding Broker OS
- **Founder / CEO:** Leo Kanell
- **Technical platform:** Funding Machine ONE™ (Cloudflare-first, AI-native)
- **Architecture / IP:** HLP Credit Solutions
- **Principal creators/developers of FM ONE™:** Rick Jefferson, Chekelah Phelps
- **Primary brand line:** "Broker Smarter."
- **Positioning:** The Funding Broker OS
- **Audience:** Independent funding brokers and brokerage owners

---

## 1. BRAND TOKENS (COPY EXACTLY — NEVER INVENT)

### Colors — primitive scales

```
--brand-25:  #F5FAFF   --brand-50:  #EEF5FF   --brand-100: #DBE8FE
--brand-200: #BCD3FD   --brand-300: #91B6FB   --brand-400: #6A9AF9
--brand-500: #3C83F6   ← PRIMARY BRAND BLUE (CTAs, links, primary buttons)
--brand-600: #2A6BE6   --brand-700: #1F55C4   --brand-800: #1B449E
--brand-900: #163878   --brand-950: #0F2452

--logo-500:  #177FC9   ← Deep logo blue (industrial variant)

--navy-800:  #0C4A6E   --navy-900:  #082F49   --navy-950:  #061F31  ← Dark surfaces

--cyan-400:  #21D5ED   ← SIGNAL cyan (accents, live indicators)
--violet-500: #8C5AF2  ← AI violet (all AI/agent UI)
--mint-400:  #34D399   ← FUNDED mint (success, funded deals)
--gold-400:  #FACC15   ← AWARD gold (recognition, offers)
--red-600:   #DC2626   ← ALERT red

--neutral-0:    #FFFFFF   --neutral-50: #F9FAFB (page bg)
--neutral-100:  #F1F5F9   --neutral-200: #E1E7EF (borders)
--neutral-500:  #65758B (muted text)   --neutral-900: #0F1729 (body text)
```

### Signature gradient (hero, primary CTA hover, FUNDED moment)

```css
linear-gradient(135deg, #3C83F6 0%, #21D5ED 50%, #8C5AF2 100%)
```

### Semantic aliases (USE THESE, not raw hex, in production code)

```
--action-primary:      var(--brand-500)
--action-success:      var(--mint-500)
--action-destructive:  var(--red-600)

--surface-primary:     var(--neutral-50)     ← page bg
--surface-elevated:    var(--neutral-0)      ← cards
--text-primary:        var(--neutral-900)
--text-secondary:      var(--neutral-600)
--text-tertiary:       var(--neutral-500)
--text-ai:             var(--violet-600)
--border-subtle:       var(--neutral-200)
--border-focus:        var(--brand-500)
```

### Deal state colors (Funding Machine domain-specific)

```
--deal-new:        neutral   --deal-review:     brand-500
--deal-qualified:  cyan-500  --deal-submitted:  violet-500
--deal-offer:      gold-500  --deal-funded:     mint-500  ← WINNING STATE
--deal-declined:   red-600
```

### AI states

```
--ai-idle: neutral-400   --ai-processing: violet-500 (pulse)
--ai-complete: mint-500  --ai-warning: gold-500
```

---

## 2. TYPOGRAPHY

- **Sans:** `Inter` (weights 300, 400, 500, 600, 700, 800, 900)
- **Mono:** `JetBrains Mono` (for IDs, timecodes, hex codes, technical UI, code)

### Type scale rules

- Marketing display: 48–96px, weight 800, letter-spacing -0.035em
- H1 (page titles): 32–48px, weight 800, letter-spacing -0.025em
- Body: 16px, line-height 1.5
- Metric numbers: ALWAYS `font-variant-numeric: tabular-nums`
- Eyebrows: 12px, uppercase, letter-spacing 0.14em, weight 600
- Code / IDs: JetBrains Mono, letter-spacing 0.02–0.06em

### Rule: Never make every metric enormous

The amount is dominant. The label is subordinate. Financial numbers use `font-variant-numeric: tabular-nums` — no exceptions.

---

## 3. SPATIAL & RADIUS

- **Spacing scale (2px base):** 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160
- **Radius vocabulary:**
  - `8px` compact controls
  - `10px` inputs
  - `12px` cards
  - `16px` prominent containers
  - `20–24px` marketing feature surfaces
  - `full pill` status/chips only
- **Max widths:** marketing 1240px · marketing-narrow 880px · app 1600px

---

## 4. MOTION

- **Durations:** instant 100ms · fast 160ms · standard 240ms · expressive 400ms · narrative 900ms
- **Easings:** standard `cubic-bezier(0.2,0,0,1)` · entrance `(0,0,0.2,1)` · spring-soft `(0.5,1.4,0.6,1)` · financial `(0.16,1,0.3,1)`
- **Rule:** every animation must ORIENT, EXPLAIN, CONFIRM, FOCUS, REWARD, CONNECT, or DEMONSTRATE. Never decoration.
- **The FUNDED moment** is the signature choreographed sequence: blue signal → mint propagation → count-up → particle burst.
- Respect `prefers-reduced-motion: reduce`.

---

## 5. VOICE

Funding Machine voice is **confident, direct, revenue-focused, operator-to-operator, specific, short, useful.**

### Prefer

- "3 documents need review." NOT "There are currently three documents which require your attention."
- "Ready to submit" NOT "Submission readiness has been achieved."
- Concrete outcomes over vague adjectives.
- Sentence case (not Title Case).

### Never

- Overuse exclamation marks
- Fear-based copy
- Promise financial outcomes
- Invent quantitative claims — mark unsupported claims as **[VALIDATION REQUIRED]**
- Say "10x", "game-changer", "revolutionary"
- Represent AI as magic

### Real broker names to use (for testimonials, avatars, sample data)

Sabrina R. · John P. · Ryan D. · Cameron K. · Brian M. · Katrina T.

### Real business names to use (for sample deal data)

Meridian Logistics · Copperline HVAC · Northwind Coffee Co. · Blue Ridge Roofing · Ironwood Fabrication · Cedar Grove Veterinary · Rowan Fitness Studios · Ridge Line Fitness · Sagebrush Media · Highland Auto Body · Rowan & Co. · Northgate Dental · Cypress Wellness · Sierra Bakery

### Real lender names

Nexlink Capital (top performer, 86% approval) · Meridian Funding Partners · Copperbridge Financial · North Peak Capital · Bluepath Working Capital · Sequoia Funding Group · Ironline Reserve · Harborlight Advance

---

## 6. VISUAL LANGUAGE — "THE FUNDING INTELLIGENCE SYSTEM"

Funding Machine is NOT:
- A bank
- A generic SaaS dashboard
- A crypto product
- A neon cyberpunk interface

Funding Machine IS **infrastructure for moving business capital**.

### Visual metaphor

`SIGNAL → ANALYSIS → DECISION → MOVEMENT → FUNDING → REVENUE`

Build motifs around:
- capital flowing through connected systems
- signal traces
- gears + circuits (derived from logo, not pasted)
- pipeline movement
- machine-assisted decisions
- structured data, precision
- successful funding events

### Signature motion behaviors

- **Capital Flow** — a signal travels through connected nodes: Applicant → Analysis → Lender → Offer → Funded
- **Funding Pulse** — when a deal reaches FUNDED: status resolves, mint signal propagates, metric updates, timeline completes, restrained celebratory particle event
- **AI Analysis** — structured scanning (document → extracted data → evaluated attributes → recommendation), never a generic spinner
- **Pipeline Movement** — cards follow interaction, destination responds, counters update
- **Number Morph** — financial metrics transition using tabular-number interpolation
- **Signal Trace** — animated circuit-like traces as brand signature (use sparingly)
- **Intelligence Glow** — subtle blue/cyan edge on active AI surfaces (never everywhere)

---

## 7. ANTI-PATTERNS — ACTIVELY REJECT

- Generic SaaS templates
- Generic fintech blue gradients everywhere
- Random glassmorphism
- Neon cyberpunk visuals
- Excessive glowing borders
- Huge border radii on everything
- Floating cards without hierarchy
- Fake 3D coins
- Stock-photo handshakes
- Money raining from the sky
- Meaningless abstract blobs
- Gratuitous particles
- Scroll hijacking
- Animation without purpose
- **Fake customer metrics, testimonials, security badges, or financial guarantees**
- Inaccessible gradient text (always pair with fallback color)
- Tiny gray text
- Low-contrast dashboards
- Overloaded pipeline cards
- AI represented as "magic" with no explanation
- Apple / Stripe / Linear clones — reference their quality, never copy their layouts

---

## 8. ASSET NAMING CONVENTION

```
fm-logo-primary-light.svg
fm-pattern-signal-grid-blue-01.svg
fm-illustration-ai-analysis-dark-01.svg
fm-ui-deal-workspace-desktop-light.webp
fm-social-linkedin-broker-smarter-01.webp
fm-ad-keep-100-4x5-v01.webp
fm-motion-funded-confirmation-v01.riv
```

Structure: `fm-{category}-{concept}-{theme}-{size}-v{NN}.{ext}`
Categories: `logo · pattern · illustration · ui · social · ad · motion · icon · email · sales`

---

## 9. HTML/CSS BUILD RULES

### Always

- Import `assets/foundations.css` at the top of every HTML file — never re-declare tokens
- Import `assets/marketing-chrome.css` + `assets/marketing-nav.js` for marketing pages
- Import `assets/app-chrome.css` + `assets/app-sidebar.js` for Broker OS product pages
- Import `assets/fmo-chrome.css` + `assets/fmo-nav.js` for Funding Machine ONE™ engineering spec pages
- Reference the logo at `assets/logo/funding-machine-logo.png`
- Use `var(--token-name)` — never raw hex
- Use tabular numerals for every dollar figure
- Use JetBrains Mono for IDs, timestamps, technical accents
- Use real broker/lender names from §5 for sample data
- Include `[data-screen-label]` on `<body>` for comment context
- Include `<meta name="viewport">` for responsive

### Never

- Redeclare `--brand-500` etc. in a page's `<style>` block
- Use `--tenant-color-X`, `--custom-Y` — always inherit from foundations
- Hardcode dimensions when a spacing token exists
- Ship any hex value that isn't already in `foundations.css`
- Use `@import` inline when a shared CSS file exists

---

## 10. PAGE PATTERNS (WHAT TO BUILD)

### Marketing page pattern

```
<nav class="mnav" data-active="{key}"></nav>
<section class="m-page-hero">…</section>
<section class="section">…</section>
<footer class="mfoot"></footer>
```

Auto-renders shared nav + footer. Keys: `platform · ai · pipeline · pricing · stories · fmlive`.

### Broker OS product page pattern

```html
<body class="app-body" data-screen-label="XX Page Name">
<div class="app">
  <aside class="sidebar" data-active="{key}"></aside>
  <div class="main">
    <div class="topbar">…</div>
    <div class="content">…</div>
  </div>
</div>
```

Auto-renders shared sidebar. Keys: `command · deals · applicants · lenders · documents · pipeline · offers · commissions · affiliates · analytics · automations · settings`.

### FMO engineering spec page pattern

```html
<body class="fmo-body">
<nav class="fmo-nav" data-active="{key}"></nav>
<nav class="fmo-sub-nav" data-active="{key}"></nav>
<section class="fmo-hero">…</section>
<section class="fmo-section">…</section>
<footer class="fmo-attr"></footer>
```

Keys: `index · architecture · data · api · events · workflows · agents · security · compliance · migration · roadmap · milestones · signal · observability · credits`.

---

## 11. WHEN GENERATING FUNDING MACHINE ASSETS

### Step 1 — Understand the ask

- What surface? (marketing / product / engineering spec / social / email / ad / sales)
- Which brand direction? (Signal Grid = editorial/technical · Capital Flow = kinetic/cinematic · Broker Cockpit = dense/product)
- What data does it show? Use real broker names + real deal amounts from §5

### Step 2 — Inherit, don't reinvent

- Load `foundations.css`
- Choose the correct chrome (marketing / app / fmo)
- Reference real broker + business names
- Never invent metrics — cite [VALIDATION REQUIRED] for anything unverified

### Step 3 — Apply the visual metaphor

- Signal traces if it's a hero or intelligence context
- Capital Flow diagram if showing lifecycle
- FUNDED moment choreography if celebrating an outcome
- Tabular numerals on every financial value
- Deal state colors match §1 semantics

### Step 4 — Quality gates before shipping

- Zero raw hex values in your page's `<style>` block
- All CTAs use `.btn.btn-primary`, `.btn.btn-secondary`, or `.btn.btn-ghost`
- Every metric has an eyebrow label + a delta if applicable
- Every AI surface uses violet + shows inputs/rationale/confidence
- Zero anti-patterns from §7
- Every image path relative and included in the project

### Step 5 — File naming

- HTML: descriptive-name.html (e.g. `underwriting-workbench.html`)
- Asset: follow §8 convention

---

## 12. RESPONSIVE / ACCESSIBILITY

- Design for 360, 390, 430, 768, 1024, 1280, 1440, 1728+
- Mobile is not compressed desktop
- WCAG 2.2 AA target
- 44px touch targets
- Focus rings via `--border-focus` and `--e-ring-focus`
- Never rely on color alone to communicate financial/workflow state
- Charts include units, time period, comparison, hover state, empty state, loading state

---

## 13. CRITICAL RULES FOR AI CODING AGENTS

> **Non-destructive rule.** Audit existing code before modification. Preserve all currently working Funding Machine, credit-report, underwriting, bank-statement, CRM, Zoho, GoHighLevel, Twilio, ElevenLabs, partner, invoice, and API functionality until replacement has passed parity testing.

> **Security rule.** Never commit credentials. Never print secrets. Never copy production client data into fixtures. Use synthetic test records. All cross-tenant access denied by default.

> **AI rule.** AI output is advisory unless explicitly classified as permitted automation. Do not invent lender criteria, approval status, financial facts, or underwriting rules. LLMs may explain or recommend; deterministic versioned rules remain authoritative.

> **Database rule.** All schema changes require forward migration, rollback strategy, indexes, tenant strategy, data classification, and tests.

> **Event rule.** Important domain changes must emit versioned domain events. Consumers must be idempotent.

---

## 14. FUNDING MACHINE ONE™ (FMO) CONTEXT

If generating assets for the technical engineering spec:

- **Attribution required:** Rick Jefferson + Chekelah Phelps (creators) · HLP Credit Solutions (IP owner) · Leo Kanell + Funding Machine (client)
- **Namespace:** `fm1`
- **Stack:** Cloudflare Workers · PostgreSQL via Hyperdrive · Durable Objects · Workflows · Queues · R2 · Vectorize · Agents SDK · AI Gateway
- **Trademarks:** Funding Machine ONE™ · FM Flow™ · FM Partner OS™ · Lender Intelligence Graph™ · Funding Plan Optimizer™ · Machine Fundability™ · HLP Capital Signal Graph™
- **150+ database tables** across 21 domains
- **50+ AI agents** across 12 departments
- **60+ versioned domain events**
- **40+ API endpoints** across 12 groups
- **6 authority levels** (A0 read-only → A5 prohibited)

---

## 15. FM LIVE 2027 EVENT

- **Dates:** Feb 25–28, 2027
- **Location:** Orlando, FL
- **Campaign kickoff:** Monday Sep 14, 2026
- **164 days** of daily creative through event
- **5 acts, 21 weeks:** Awareness → Reveal (speakers) → Proof (testimonials) → Urgency (countdown) → Event Week (live)
- **Keynote:** Leo Kanell — "How I fund $3M/mo without a team"
- Assets ship in 1:1 (feed), 4:5 (vertical feed), 9:16 (story), 16:9 (banner), 1.91:1 (OG)

---

## 16. WHEN IN DOUBT

- Check `/assets/foundations.css` for the token
- Check `/components.html` for the component pattern
- Check `/directions.html` for visual direction options
- Match the voice from `/customer-stories.html`
- Match the density from `/command-center.html`
- Match the technical polish from `/fm-one-architecture.html`

**If a page you're building doesn't feel like it belongs next to `marketing.html` or `command-center.html`, it doesn't. Fix it.**

---

_Version 1.0 · Sep 8, 2026 · HLP Credit Solutions · Rick Jefferson + Chekelah Phelps_
_Load this file into any AI agent before generating Funding Machine assets._