START-HERE.md¶

Campaign Brain — Executive Publication Site¶

Project: Interactive MDX Publication for Sales, Business & Executive Stakeholders
Codename: CIAAS Overview (Campaign Intelligence As A Service)
Format: MDX (Interactive Markdown) with React Components
Audience: Political technology decision-makers, campaign executives, investors

1. Mission Statement¶

Create a publication-grade, infographic-style website that tells the Campaign Brain story to non-technical stakeholders. This is NOT developer documentation—it's a visual narrative that makes executives say "I get it" within 30 seconds of landing on any page.

Core Principles: - Compact — Every word earns its place; no filler - Modern — Contemporary design that signals "we're ahead" - First-class layout — Magazine-quality composition - Mobile-first — Touch-friendly, fast, accessible - Engaging — Interactive elements that reward exploration

2. Brand Identity¶

2.1 Color Palette¶

:root {
  /* Primary */
  --cb-navy-primary: #1E3A5F;    /* Headers, nav, primary buttons */
  --cb-navy-dark: #152942;       /* Hover states, footer */
  --cb-crimson: #8B2332;         /* CTAs, accent highlights */
  --cb-crimson-light: #A63446;   /* Hover states for red */

  /* Neutrals */
  --cb-bg-page: #F8FAFC;         /* Page backgrounds */
  --cb-bg-card: #FFFFFF;         /* Card surfaces */
  --cb-border: #E2E8F0;          /* Dividers, borders */
  --cb-text-primary: #334155;    /* Body text */
  --cb-text-secondary: #64748B;  /* Captions, metadata */

  /* Semantic */
  --cb-success: #059669;
  --cb-warning: #D97706;
  --cb-error: #DC2626;
  --cb-info: #0284C7;
}

2.2 Typography¶

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root {
  --font-display: 'Libre Baskerville', Georgia, serif;
  --font-body: 'Source Sans 3', system-ui, sans-serif;
}

Element	Font	Size	Weight
Hero Headlines	Libre Baskerville	3rem+	700
Page Titles	Libre Baskerville	2rem	700
Section Headers	Libre Baskerville	1.5rem	700
Body Text	Source Sans 3	1rem	400
Captions/Labels	Source Sans 3	0.875rem	500
Stats/Numbers	Source Sans 3	2.5rem	700

2.3 Iconography¶

Use Lucide Icons exclusively for consistency: - Stroke weight: 1.5px (nav/UI) or 2px (feature icons) - Size: 20-24px standard, 32px for feature callouts - Color: Inherit from parent or use navy/crimson

3. Platform Architecture (12 Services)¶

The platform consists of 12 interconnected services. Each gets one page in the publication.

Service Inventory¶

#	Service	Subdomain	Status	Description
1	cbpublic	nominate.ai	✅ 100%	Marketing site & lead gen
2	cbtenant	tenant.nominate.ai	✅ 100%	Multi-tenant orchestrator
3	cbapp	{tenant}.nominate.ai	✅ 90%	Campaign management UI
4	cbworkflow	workflow.nominate.ai	✅ 95%	Automation engine
5	cbsurveys	surveys.nominate.ai	✅ 85%	YASP survey platform
6	cbdistricts	districts.nominate.ai	✅ 90%	Congressional district data
7	cbmodels	models.nominate.ai	✅ 80%	Analytics & scoring
8	cbradio	ruralamfm.nominate.ai	✅ 85%	Radio ad placement
9	cbfiles	files.nominate.ai	✅ 90%	CDN & file storage
10	cbinfra	—	✅ 95%	Infrastructure/DevOps
11	cbai	—	🔄 40%	AI decision engine
12	cbetl	—	🔄 30%	Data pipeline & lists

4. Page Structure & Flow¶

4.1 Recommended Page Order¶

Structure the publication to tell a coherent story:

1. COVER       — Hero landing with value prop
2. THE PROBLEM — Why campaigns fail (pain points)
3. THE PLATFORM — High-level architecture visual
4. CBAPP       — The main campaign interface (SCREENSHOTS)
5. CBWORKFLOW  — Automation & outreach engine
6. CBDISTRICTS — Data-driven district intelligence
7. CBMODELS    — Voter scoring & analytics
8. CBSURVEYS   — Field data collection
9. CBRADIO     — Rural media strategy
10. ECOSYSTEM  — cbfiles, cbinfra, cbtenant, cbpublic
11. ROADMAP    — cbai, cbetl, future vision
12. APPENDIX   — Technical reference (for CTOs)

4.2 Page Template Structure¶

Each service page should follow this layout:

┌─────────────────────────────────────────────────────────┐
│  PAGE HEADER                                            │
│  ════════════════════════════════════════════════════   │
│  Service Icon + Name          Status Badge              │
│  One-line value proposition                             │
└─────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────┐
│  HERO VISUAL                                            │
│  ─────────────────────────────────────────────────────  │
│  Screenshot, diagram, or animated illustration          │
│  (Full-bleed, ~40vh on desktop)                        │
└─────────────────────────────────────────────────────────┘

┌─────────────┬─────────────┬─────────────┬──────────────┐
│  STAT CARD  │  STAT CARD  │  STAT CARD  │  STAT CARD   │
│    ###      │    ###      │    ###      │    ###       │
│  metric     │  metric     │  metric     │  metric      │
└─────────────┴─────────────┴─────────────┴──────────────┘

┌─────────────────────────────────────────────────────────┐
│  KEY FEATURES (3-4 max)                                 │
│  ─────────────────────────────────────────────────────  │
│                                                         │
│  ┌─────────┐  Feature Title                            │
│  │  ICON   │  2-3 sentence description of capability   │
│  └─────────┘  Interactive element or micro-animation   │
│                                                         │
│  ┌─────────┐  Feature Title                            │
│  │  ICON   │  2-3 sentence description of capability   │
│  └─────────┘  Interactive element or micro-animation   │
│                                                         │
└─────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────┐
│  INTEGRATION CALLOUT                                    │
│  ─────────────────────────────────────────────────────  │
│  "Works with: [service] [service] [service]"           │
│  Visual connection lines or flow diagram               │
└─────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────┐
│  NAVIGATION                                             │
│  ─────────────────────────────────────────────────────  │
│  ← Previous: [Page Name]    Next: [Page Name] →        │
└─────────────────────────────────────────────────────────┘

5. Content Guidelines¶

5.1 Voice & Tone¶

Do	Don't
Confident, direct statements	Hedging language ("might," "could")
Active voice	Passive constructions
Concrete numbers	Vague claims
"You" focused	"We" focused
One idea per sentence	Run-on explanations

5.2 Headline Formulas¶

[Capability] for [Audience] who [Pain Point]

Examples:
• "Voter Intelligence for Campaigns That Can't Afford to Guess"
• "Workflow Automation That Actually Works on Election Day"
• "District Data Without the Data Science Degree"

5.3 Stat Card Content¶

Every page should have 3-4 compelling statistics:

Service	Example Stats
cbapp	"8M+ voter records" / "50 states covered" / "< 2min to first search"
cbworkflow	"12 workflow templates" / "5 channels supported" / "AI-powered routing"
cbdistricts	"441 congressional districts" / "Real-time Census data" / "48hr cache refresh"
cbmodels	"15 scoring dimensions" / "Turnout prediction" / "Segment builder"

6. Visual Assets¶

6.1 Screenshots Available¶

Location: cbapp/docs/screenshots/ (reference from docs.nominate.ai/cbapp-docs/screenshots/)

Screenshot	Usage
Dashboard overview	cbapp hero
Contact search results	cbapp features
Workflow builder	cbworkflow hero
District map view	cbdistricts hero
Analytics dashboard	cbmodels hero
Survey builder	cbsurveys hero
Radio rate cards	cbradio hero

6.2 Diagrams to Create¶

Build these interactive/animated diagrams:

Platform Architecture — Central hub with 12 services radiating outward
Data Flow — How voter data moves through the system
Workflow State Machine — Visual representation of contact journey
Integration Map — How services connect to each other

6.3 Infographic Style¶

Use the navy/crimson palette for all custom graphics
Prefer flat design with subtle shadows (no 3D effects)
Animate on scroll-into-view (stagger reveals)
Icons from Lucide only—no mixing icon sets

7. Technical Implementation¶

7.1 Recommended Stack¶

Framework:     Next.js 14+ with App Router
MDX:           @next/mdx or contentlayer
Styling:       Tailwind CSS + CSS variables for brand tokens
Components:    Custom components in /components/mdx/
Animations:    Framer Motion for scroll reveals
Charts:        Recharts or custom SVG
Icons:         lucide-react
Deployment:    Vercel or static export

7.2 MDX Component Library¶

Create these reusable components for the publication:

// Core Layout
<PageHeader icon="workflow" title="Workflow Engine" status="production" />
<HeroImage src="/screenshots/workflow.png" alt="Workflow builder interface" />
<StatGrid stats={[{value: "12", label: "Templates"}, ...]} />

// Content Blocks
<FeatureCard icon="zap" title="AI Routing" description="..." />
<IntegrationBadges services={["cbapp", "cbmodels", "cbai"]} />
<CalloutBox type="tip|warning|info">...</CalloutBox>

// Navigation
<PageNav prev={{href: "/cbapp", title: "Campaign App"}} next={{...}} />

// Interactive
<ArchitectureDiagram active="cbworkflow" />
<WorkflowDemo />
<DistrictSearch />

7.3 File Structure¶

/
├── app/
│   ├── layout.tsx           # Root layout with nav
│   ├── page.tsx             # Cover/landing
│   ├── problem/page.mdx
│   ├── platform/page.mdx
│   ├── cbapp/page.mdx
│   ├── cbworkflow/page.mdx
│   ├── cbdistricts/page.mdx
│   ├── cbmodels/page.mdx
│   ├── cbsurveys/page.mdx
│   ├── cbradio/page.mdx
│   ├── ecosystem/page.mdx
│   ├── roadmap/page.mdx
│   └── appendix/page.mdx
├── components/
│   ├── mdx/                 # MDX-specific components
│   ├── ui/                  # Base UI components
│   └── diagrams/            # SVG/animated diagrams
├── content/
│   └── screenshots/         # Optimized images
├── styles/
│   └── globals.css          # Brand tokens + Tailwind
└── public/
    └── og/                  # Social sharing images

8. Mobile-First Considerations¶

8.1 Responsive Breakpoints¶

/* Mobile first */
@media (min-width: 640px)  { /* sm: Tablet portrait */ }
@media (min-width: 768px)  { /* md: Tablet landscape */ }
@media (min-width: 1024px) { /* lg: Desktop */ }
@media (min-width: 1280px) { /* xl: Large desktop */ }

8.2 Mobile Adaptations¶

Element	Desktop	Mobile
Stat Grid	4 columns	2 columns, stacked
Hero Image	Full bleed	Constrained with padding
Feature Cards	Side-by-side	Vertical stack
Architecture Diagram	Interactive hover	Tap-to-expand
Navigation	Horizontal	Bottom sheet or hamburger

8.3 Touch Targets¶

Minimum 44x44px for all interactive elements
Generous spacing between tap targets
Swipe gestures for page navigation (optional enhancement)

9.1 Meta Tags Template¶

export const metadata = {
  title: "Campaign Brain | [Page Title]",
  description: "[60-160 char description]",
  openGraph: {
    title: "Campaign Brain | [Page Title]",
    description: "[Description]",
    images: ["/og/[page-name].png"],
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "Campaign Brain | [Page Title]",
    description: "[Description]",
    images: ["/og/[page-name].png"],
  },
};

9.2 OG Images¶

Generate branded social sharing images (1200x630px) for each page: - Navy background - Libre Baskerville headline - Service icon - Campaign Brain logo

10. Content for Each Page¶

10.1 Cover (Landing)¶

Headline: "Campaign Intelligence As A Service"
Subhead: "The complete platform for modern political campaigns"
Visual: Animated architecture diagram showing all 12 services
CTA: "Explore the Platform →"

10.2 The Problem¶

Headline: "Running a Campaign Shouldn't Require a PhD in Software"
Content: - Pain point 1: Spreadsheet chaos (visual: messy spreadsheet → clean dashboard) - Pain point 2: Forgotten follow-ups (visual: timeline with gaps → automated workflow) - Pain point 3: Data silos (visual: disconnected tools → unified platform)

10.3 The Platform¶

Headline: "12 Services. One Mission. Your Victory."
Visual: Interactive architecture diagram
Content: Brief overview of each service with click-through to detail pages

10.4 cbapp — Campaign Application¶

Headline: "Your Campaign HQ in the Cloud"
Stats: 8M+ voters / 50 states / Multi-tenant
Features: 1. Voter Search — Find anyone in seconds 2. Contact Management — Full CRM capabilities 3. Multi-Channel Outreach — Phone, door, text, email 4. Real-Time Dashboards — Know where you stand Screenshots: Dashboard, search, contact detail

10.5 cbworkflow — Workflow Engine¶

Headline: "Automation That Doesn't Sleep"
Stats: 12 templates / 5 channels / AI routing
Features: 1. Visual Workflow Builder — Drag, drop, done 2. Decision Nodes — AI-powered branching 3. Event Timeline — Never miss what happened 4. Multi-Channel Actions — Email, SMS, postcards, calls Visual: Animated workflow state diagram

10.6 cbdistricts — District Intelligence¶

Headline: "Know Your Battlefield"
Stats: 441 districts / Census integration / 48hr refresh
Features: 1. Interactive Maps — Zoom from nation to precinct 2. Demographic Profiles — Population, age, income, education 3. Political History — Past results, partisan lean 4. Auto-Generated Briefs — Wikipedia-sourced summaries Visual: District map with hover states

10.7 cbmodels — Analytics Engine¶

Headline: "Turn Data Into Decisions"
Stats: 15 scoring dimensions / Turnout prediction / Segment builder
Features: 1. Voter Scoring — Turnout, persuadability, support 2. Segment Builder — Slice and dice your universe 3. Predictive Analytics — Who to contact, when 4. Export Anything — CSV, API, integrations Visual: Dashboard with charts

10.8 cbsurveys — Survey Platform (YASP)¶

Headline: "Capture Ground Truth"
Stats: API-first / DuckDB storage / Custom question types
Features: 1. Flexible Questions — Checkbox, select, scale 2. Field-Ready — Mobile-optimized collection 3. Real-Time Sync — Results flow to cbapp instantly 4. Analytics Built-In — No separate tool needed Visual: Survey builder interface

10.9 cbradio — Radio Advertising¶

Headline: "Reach Rural Voters Where They Listen"
Stats: AM/FM coverage / Rate card management / Political compliance
Features: 1. Station Database — Rural markets covered 2. Rate Management — Compare, negotiate, book 3. Compliance Tools — FCC and FEC requirements 4. ROI Tracking — Know what's working Visual: Map with radio coverage areas

10.10 Ecosystem¶

Headline: "The Infrastructure That Makes It Work"
Services covered: cbfiles, cbinfra, cbtenant, cbpublic
Visual: System diagram showing how these support the main services

10.11 Roadmap¶

Headline: "What's Coming Next"
Services covered: cbai, cbetl
Content: - cbai: Claude-powered decision engine for workflow routing - cbetl: Data pipeline for voter file imports and list management Visual: Timeline with milestones

10.12 Technical Appendix¶

Headline: "Under the Hood"
Content: - API endpoints summary - Authentication methods - Data models overview - Port reference - GitHub repositories Format: More traditional documentation style, denser

11. Implementation Phases¶

Phase 1: Foundation (Week 1)¶

Next.js project setup with MDX
Tailwind configuration with brand tokens
Base layout with navigation
MDX component library (PageHeader, StatGrid, FeatureCard)
Cover page + The Problem page

Phase 2: Core Services (Week 2)¶

Platform overview page with architecture diagram
cbapp page with screenshots
cbworkflow page with workflow diagram
cbdistricts page with map component

Phase 3: Supporting Services (Week 3)¶

cbmodels page
cbsurveys page
cbradio page
Ecosystem page (cbfiles, cbinfra, cbtenant, cbpublic)

Phase 4: Polish (Week 4)¶

12. Reference Materials¶

12.1 Existing Documentation¶

Technical Docs: https://docs.nominate.ai
Style Guide: cbapp-docs/style-guide/campaign-brain-style-guide/
Screenshots: cbapp-docs/screenshots/
Architecture: architecture/overview/

12.2 GitHub Repositories¶

Nominate-AI/cbpublic    — Public website
Nominate-AI/cbtenant    — Tenant manager
Nominate-AI/cbapp       — Campaign app
Nominate-AI/cbworkflow  — Workflow engine
Nominate-AI/cbsurveys   — Survey platform
Nominate-AI/cbdistricts — District service
Nominate-AI/cbmodels    — Analytics
Nominate-AI/cbradio     — Radio advertising
Nominate-AI/cbfiles     — File storage
Nominate-AI/cbinfra     — Infrastructure
Nominate-AI/cbai        — AI service (in progress)
Nominate-AI/cbetl       — ETL pipeline (in progress)

12.3 Design Inspiration¶

Stripe's product pages (clean, confident, interactive)
Linear's changelog (dense but readable)
Vercel's docs (developer-friendly but visually strong)
The Pudding (data journalism, infographic style)

13. Success Criteria¶

This publication succeeds when:

30-second test: A non-technical executive understands the platform's value in under 30 seconds
Mobile parity: Every page works beautifully on iPhone SE through iPad Pro
Zero jargon: Technical terms are either avoided or immediately explained
Visual hierarchy: Eyes flow naturally through each page without getting lost
Interactive delight: At least one "oh, that's cool" moment per page
Fast loads: < 3 second initial load, instant navigation
Shareable: OG images make each page look good when shared on LinkedIn/Twitter

14. Getting Started¶

# Clone the repository
git clone https://github.com/Nominate-AI/cb-publication.git
cd cb-publication

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

First task: Set up the Next.js project with MDX support and implement the brand tokens from Section 2. Then build the Cover page as a proof of concept before proceeding to other pages.

Document Version: 1.0
Last Updated: December 2025
For questions: Reference docs.nominate.ai or the project's GitHub issues