Files

Alexa Amundson 396b24e3a0 Sync 96 documentation files across 13 categories (35K lines)

Architecture, brand system, business plans, governance/licensing,
guides, integrations, marketing, operations, technology specs,
strategy, whitepapers, roadmaps, and reference materials.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

2026-02-21 01:13:49 -06:00

13 KiB

Raw Blame History

🌌 BlackRoad Brand System - Complete Implementation Guide

Official Brand Design System for All BlackRoad Projects

Version: 1.0.0 Last Updated: December 28, 2024 Status: 🔒 PRODUCTION - LOCKED STANDARDS

🚀 Quick Start

For Every New Claude Session

# 1. Initialize session (shows brand system automatically)
~/claude-session-init.sh

# 2. Create new project from starter template
cp ~/blackroad-template-starter.html ~/my-project.html

# 3. Edit content (keep brand styles intact)
# ... your changes ...

# 4. Deploy with brand enforcement
~/bin/blackroad-deploy ~/my-project.html --project-name=my-project

30-Second Brand Check

# View full brand documentation
cat ~/BLACKROAD_BRAND_SYSTEM.md

# Quick start guide
cat ~/BRAND_SYSTEM_QUICK_START.md

# Audit existing projects
~/bin/audit-brand-compliance.sh

📋 System Overview

The BlackRoad Brand System ensures consistent design across all 99 Cloudflare Pages projects.

Core Components

Brand Colors - Official palette with exact hex values
Golden Ratio Spacing - Fibonacci sequence (8, 13, 21, 34, 55, 89, 144)
Brand Gradient - 135deg with Golden Ratio stops (38.2%, 61.8%)
BlackRoad Logo - Animated SVG with spinning road-dashes
Typography - SF Pro Display, line-height: 1.618
Background Effects - Animated grids, glowing orbs, floating particles
Scroll Progress Bar - 2px gradient bar at viewport top

Design Philosophy

Golden Ratio (φ = 1.618): All spacing, proportions, gradient stops
Glassmorphism: Blurred, translucent navigation and cards
Motion Design: Smooth animations with spring easing
Dark Theme: Black background, white text, vibrant accents

📁 File Structure

~/
├── BLACKROAD_BRAND_SYSTEM.md           # Official brand documentation
├── BRAND_SYSTEM_QUICK_START.md         # Quick reference guide
├── BRAND_SYSTEM_README.md               # This file
├── blackroad-template-starter.html      # Pre-configured starter template
├── blackroad-brand-mcp-server.js        # MCP server for brand system
├── blackroad-brand-mcp-server.json      # MCP server configuration
├── bin/
│   ├── audit-brand-compliance.sh        # Compliance checker (90%+ required)
│   ├── mass-update-brand-system.sh      # Update all 99 projects
│   ├── deploy-all-branded.sh            # Deploy all projects at once
│   └── blackroad-deploy                 # Brand-enforcing Wrangler wrapper
├── claude-session-init.sh               # Session initialization (shows brand)
└── .claude/
    └── CLAUDE.md                        # Session startup reminder

Official Templates:
~/Downloads/files(4)/
├── blackroad-template-01-homepage.html
├── blackroad-template-03-pricing.html
├── blackroad-template-05-docs.html
├── blackroad-template-07-contact.html
└── blackroad-template-09-auth.html

~/Desktop/
└── blackroad-mega-motion-gallery.html

🎯 Usage Guide

Creating a New Project

# Option 1: Start from scratch with starter template
cp ~/blackroad-template-starter.html ~/my-project/index.html
cd ~/my-project
# Edit content, keep brand styles

# Option 2: Copy from official template
cp ~/Downloads/files\(4\)/blackroad-template-01-homepage.html ~/my-project/index.html
# Customize for your needs

# Option 3: Use MCP server (in Claude Desktop)
# Ask Claude to "get starter template from brand system"

Editing Existing Projects

# 1. Audit current compliance
~/bin/audit-brand-compliance.sh

# 2. If < 90%, fix issues or start fresh
cp ~/blackroad-template-starter.html ./index.html

# 3. Verify compliance
~/bin/audit-brand-compliance.sh

# 4. Deploy when compliant
~/bin/blackroad-deploy ./ --project-name=my-project

Adding Brand System to Existing HTML

<!-- 1. Add CSS variables to <style> or <head> -->
<style>
:root {
    --black: #000000;
    --white: #FFFFFF;
    --amber: #F5A623;
    --hot-pink: #FF1D6C;
    --electric-blue: #2979FF;
    --violet: #9C27B0;
    --gradient-brand: linear-gradient(135deg,
        var(--amber) 0%,
        var(--hot-pink) 38.2%,
        var(--violet) 61.8%,
        var(--electric-blue) 100%);
    --space-xs: 8px;
    --space-sm: 13px;
    --space-md: 21px;
    --space-lg: 34px;
    --space-xl: 55px;
}
</style>

<!-- 2. Add scroll progress bar -->
<div class="scroll-progress" id="scrollProgress"></div>

<!-- 3. Add BlackRoad logo to navigation -->
<!-- See ~/BLACKROAD_BRAND_SYSTEM.md for SVG code -->

<!-- 4. Add background effects -->
<!-- See starter template for grid/orb examples -->

🚢 Deployment Workflow

Standard Deployment (Recommended)

# Uses brand-enforcing wrapper
~/bin/blackroad-deploy ./dist --project-name=my-project

# What happens:
# 1. Scans all HTML files
# 2. Checks brand compliance (90%+ required)
# 3. If compliant, deploys to Cloudflare
# 4. If non-compliant, shows errors and blocks deployment

Force Deployment (Not Recommended)

# Skip compliance check (only for non-HTML projects)
~/bin/blackroad-deploy ./dist --project-name=my-project --force

Mass Deployment (All 99 Projects)

# 1. Prepare all projects with brand system
~/bin/mass-update-brand-system.sh

# 2. Review generated files in /tmp/brand-update-*

# 3. Deploy all (requires confirmation)
~/bin/deploy-all-branded.sh

🛠️ Tools & Scripts

1. `audit-brand-compliance.sh`

Purpose: Check HTML files against brand standards

Usage:

~/bin/audit-brand-compliance.sh

Checks:

✅ CSS variables (colors, spacing, gradients)
✅ BlackRoad logo SVG + animation
✅ Scroll progress bar
✅ Typography (SF Pro Display, line-height 1.618)
✅ Background effects (grid/orbs)
✅ Golden Ratio spacing
✅ Gradient stops (38.2%, 61.8%)

Output:

Per-file compliance score (0-100%)
List of missing elements
Overall compliance across all projects
Timestamped audit log

2. `blackroad-deploy`

Purpose: Brand-enforcing Wrangler wrapper

Usage:

blackroad-deploy <directory> --project-name=<name> [--force]

Features:

Pre-deployment compliance check
Blocks deployment if < 90% compliant
Shows specific issues to fix
Integrates seamlessly with Wrangler
Optional --force flag for edge cases

Examples:

# Deploy with compliance check
blackroad-deploy ./dist --project-name=my-site

# Deploy single file
blackroad-deploy ./index.html --project-name=landing-page

# Force deploy (skip check)
blackroad-deploy ./dist --project-name=my-site --force

3. `mass-update-brand-system.sh`

Purpose: Update all 99 Cloudflare projects

Usage:

~/bin/mass-update-brand-system.sh

What it does:

Fetches all Cloudflare Pages projects
Creates branded version of each
Saves to /tmp/brand-update-PROJECT_NAME
Logs update status
Shows deployment readiness

Follow-up:

# Deploy all updated projects
~/bin/deploy-all-branded.sh

4. `deploy-all-branded.sh`

Purpose: Deploy all brand-updated projects

Usage:

~/bin/deploy-all-branded.sh

Safety:

Requires "YES" confirmation
Deploys to production
2-second delay between deployments
Comprehensive logging
Final compliance audit

🔌 MCP Server Integration

Setup (Claude Desktop)

Add to your MCP settings (~/Library/Application Support/Claude/claude_desktop_config.json):

{
  "mcpServers": {
    "blackroad-brand-system": {
      "command": "node",
      "args": ["/Users/alexa/blackroad-brand-mcp-server.js"]
    }
  }
}

Available Tools

get_brand_colors - Get official color palette
get_brand_spacing - Get Golden Ratio spacing
get_brand_gradient - Get brand gradient CSS
get_logo_svg - Get BlackRoad logo SVG
get_starter_template - Get full starter template
get_brand_documentation - Get complete brand docs
validate_brand_compliance - Check HTML/CSS compliance

Usage in Claude

User: "Get the brand colors"
Claude uses MCP tool: get_brand_colors
Returns: Complete color palette with hex values

User: "Validate my HTML for brand compliance"
Claude uses MCP tool: validate_brand_compliance
Returns: Compliance score + issues

🏢 99 Cloudflare Projects

Project Categories

Core Infrastructure:

blackroad-io (main site)
blackroad-os-home
blackroad-console
blackroad-dashboard

Product Verticals:

lucidia-studio, lucidia-core, lucidia-math (Lucidia platform)
blackroadquantum-* (quantum computing)
blackroadai-com (AI products)
roadcoin-io, roadchain-io (blockchain)

Department Portals:

finance, legal, education, engineering
hr, sales, marketing, operations
customer-success, product, design

Individual Agents:

aria-blackroad-me
winston-blackroad-me
alice-blackroad

Tools & Utilities:

blackroad-monitoring
blackroad-analytics
blackroad-status
blackroad-api-explorer

Mass Update Strategy

# 1. Prepare all projects
~/bin/mass-update-brand-system.sh

# 2. Test a few manually first
blackroad-deploy /tmp/brand-update-blackroad-io --project-name=blackroad-io
blackroad-deploy /tmp/brand-update-lucidia-studio --project-name=lucidia-studio

# 3. If successful, deploy all
~/bin/deploy-all-branded.sh

🔧 Troubleshooting

"Compliance check failed"

Problem: Project scored < 90% on brand compliance

Solution:

# Option 1: Start fresh with starter template
cp ~/blackroad-template-starter.html ./index.html

# Option 2: Fix specific issues
# Run audit to see what's missing
~/bin/audit-brand-compliance.sh

# Option 3: Force deploy (not recommended)
blackroad-deploy ./dist --project-name=my-project --force

"Missing brand system files"

Problem: Can't find BLACKROAD_BRAND_SYSTEM.md

Solution:

# Check if files exist
ls -la ~/BLACKROAD_BRAND_SYSTEM.md
ls -la ~/blackroad-template-starter.html
ls -la ~/bin/audit-brand-compliance.sh

# If missing, re-extract from templates
# All brand standards are in the official templates
cat ~/Downloads/files\(4\)/blackroad-template-01-homepage.html

"Wrangler authentication failed"

Problem: Can't deploy to Cloudflare

Solution:

# Re-authenticate
wrangler login

# Verify authentication
wrangler whoami

# Check if project exists
wrangler pages project list

"MCP server not responding"

Problem: Claude can't access brand system tools

Solution:

# Test MCP server directly
node ~/blackroad-brand-mcp-server.js

# Verify configuration
cat ~/Library/Application\ Support/Claude/claude_desktop_config.json

# Restart Claude Desktop

✅ Compliance Standards

Minimum Requirements (90%+ to deploy)

REQUIRED:

Brand colors defined (--hot-pink, --amber, --electric-blue, --violet)
Brand gradient with Golden Ratio stops (38.2%, 61.8%)
BlackRoad logo SVG with spinning animation
Scroll progress bar (2px, gradient, fixed top)
Golden Ratio spacing (8, 13, 21, 34, 55, 89, 144)
SF Pro Display font stack
Line-height: 1.618
At least one background effect (grid/orbs/particles)

RECOMMENDED:

Glassmorphism navigation
Hover states with --ease-spring
Gradient text effects
Animated hero section
Responsive breakpoints

Scoring

100%: Perfect compliance, deploy immediately
90-99%: Compliant, minor improvements suggested
70-89%: Needs work, fix issues before deploying
< 70%: Non-compliant, start fresh with starter template

📞 Support & Resources

Documentation:

Full brand system: ~/BLACKROAD_BRAND_SYSTEM.md
Quick start: ~/BRAND_SYSTEM_QUICK_START.md
This guide: ~/BRAND_SYSTEM_README.md

Tools:

Audit script: ~/bin/audit-brand-compliance.sh
Deploy script: ~/bin/blackroad-deploy
Mass update: ~/bin/mass-update-brand-system.sh

Templates:

Starter: ~/blackroad-template-starter.html
Official: ~/Downloads/files(4)/blackroad-template-*.html

Integration:

Session init: ~/claude-session-init.sh
MCP server: ~/blackroad-brand-mcp-server.js

🎯 Next Steps

Run session init to see brand system on startup
Create new project from starter template
Audit existing projects for compliance
Deploy with enforcement using blackroad-deploy
Update all 99 projects with mass update script

Remember: The brand system is 🔒 LOCKED. No custom designs. No deviations. 90%+ compliance required for all deployments.

Last Updated: December 28, 2024 Version: 1.0.0 Status: PRODUCTION

13 KiB Raw Blame History

🌌 BlackRoad Brand System - Complete Implementation Guide

📚 Table of Contents

🚀 Quick Start

For Every New Claude Session

30-Second Brand Check

📋 System Overview

Core Components

Design Philosophy

📁 File Structure

🎯 Usage Guide

Creating a New Project

Editing Existing Projects

Adding Brand System to Existing HTML

🚢 Deployment Workflow

Standard Deployment (Recommended)

Force Deployment (Not Recommended)

Mass Deployment (All 99 Projects)

🛠️ Tools & Scripts

1. audit-brand-compliance.sh

2. blackroad-deploy

3. mass-update-brand-system.sh

4. deploy-all-branded.sh

🔌 MCP Server Integration

Setup (Claude Desktop)

Available Tools

Usage in Claude

🏢 99 Cloudflare Projects

Project Categories

Mass Update Strategy

🔧 Troubleshooting

"Compliance check failed"

"Missing brand system files"

"Wrangler authentication failed"

"MCP server not responding"

✅ Compliance Standards

Minimum Requirements (90%+ to deploy)

Scoring

📞 Support & Resources

🎯 Next Steps

13 KiB

Raw Blame History

1. `audit-brand-compliance.sh`

2. `blackroad-deploy`

3. `mass-update-brand-system.sh`

4. `deploy-all-branded.sh`