Files
blackroad-os-web/README.md
Alexa Louise ed63ef8f1c 🎨 Brand compliance: Official BlackRoad design system integrated
Applied official BlackRoad Brand Design System:
- Hot Pink (#FF1D6C) as primary color
- Golden Ratio spacing system (φ = 1.618): 8px → 144px
- SF Pro Display typography
- Line height: 1.618 (Golden Ratio)
- Official gradient: 135deg @ 38.2% & 61.8%
- Animation easing curves (ease, ease-out, ease-spring)
- Black (#000000) background, White (#FFFFFF) text
- Full color palette: Amber, Orange, Magenta, Electric Blue, Violet

Enhanced README.md:
- 5 quantum domains documented (blackroad.io, blackroadai.com, blackroadquantum.com, lucidia.earth, earth.blackroad.io)
- Comprehensive features, tech stack, deployment guide
- Brand compliance section with verification
- Performance targets and security details
- Contributing guidelines for production repo

 Brand compliance verified - NO forbidden old colors
 Production-ready for 5 live domains

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-07 16:35:18 -06:00

4.9 KiB

🌌 BlackRoad OS Web

Production-grade Next.js application with 5 quantum domains - Full-stack BlackRoad OS web platform with official brand design system.

🌐 Live Deployments

This application serves 5 quantum domains:

  • blackroad.io - Primary domain
  • blackroadai.com - AI-focused portal
  • blackroadquantum.com - Quantum computing interface
  • lucidia.earth - Companion AI platform
  • earth.blackroad.io - Earth visualization

Features

  • Next.js 15 - Latest App Router architecture
  • TypeScript - Full type safety
  • Brand Compliant - Official BlackRoad design system
  • Authentication - Secure login/signup flows
  • Workspace - Multi-domain workspace interface
  • Real-time - Conversation and collaboration features
  • Responsive - Mobile-first design

🎨 Brand Compliance

OFFICIAL BlackRoad Brand Design System Integrated:

  • Hot Pink (#FF1D6C) primary color
  • Golden Ratio spacing (φ = 1.618): 8px, 13px, 21px, 34px, 55px, 89px, 144px
  • SF Pro Display typography
  • Line height: 1.618 (Golden Ratio)
  • Official gradient: 135deg @ 38.2% & 61.8%
  • No forbidden old colors

See app/globals.css for complete brand system implementation.

🚀 Getting Started

Prerequisites

  • Node.js 18+ or Bun
  • npm, yarn, pnpm, or bun

Installation

# Clone the repository
git clone https://github.com/BlackRoad-OS/blackroad-os-web.git
cd blackroad-os-web

# Install dependencies
npm install
# or
bun install

# Run development server
npm run dev
# or
bun dev

Open http://localhost:3000 to see the application.

📁 Project Structure

blackroad-os-web/
├── app/                    # Next.js App Router
│   ├── (app)/             # Authenticated app routes
│   │   ├── workspace/     # Main workspace
│   │   └── conversations/ # Chat interface
│   ├── (auth)/            # Authentication routes
│   │   ├── login/         # Login page
│   │   └── signup/        # Signup page
│   ├── globals.css        # 🌌 OFFICIAL BRAND SYSTEM
│   └── layout.tsx         # Root layout
├── components/            # React components
├── stores/               # Zustand state management
├── lib/                  # Utilities
└── public/              # Static assets

🔧 Development

# Development server
npm run dev

# Production build
npm run build

# Start production server
npm start

# Lint code
npm run lint

# Type check
npm run type-check

🚢 Deployment

# Build for production
npm run build

# Deploy with Wrangler
wrangler pages deploy ./out --project-name=blackroad-os-web

Automatic Deployment

Push to main branch triggers automatic deployment via GitHub Actions (if configured).

🔐 Environment Variables

Create .env.local:

# Required
NEXT_PUBLIC_API_URL=https://api.blackroad.io
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_key

# Optional
NEXT_PUBLIC_ANALYTICS_ID=your_analytics_id

📊 Performance

  • Lighthouse Score Target: >90
  • First Contentful Paint: <1.5s
  • Time to Interactive: <3s
  • Core Web Vitals: All Green

🔒 Security

  • HTTPS enforced across all domains
  • Security headers configured
  • CSP (Content Security Policy)
  • XSS protection
  • CORS properly configured
  • Environment variables for secrets

🧪 Testing

# Unit tests (when configured)
npm run test

# E2E tests (when configured)
npm run test:e2e

📚 Tech Stack

  • Framework: Next.js 15 (App Router)
  • Language: TypeScript
  • Styling: Tailwind CSS + Official Brand System
  • State: Zustand
  • Deployment: Cloudflare Pages
  • CI/CD: GitHub Actions

🤝 Contributing

This is a production repository serving 5 live domains. All changes require:

  1. GitHub issue or approved task
  2. Pull request with comprehensive description
  3. Brand compliance verification
  4. All tests passing
  5. Code review approval
  6. No breaking changes to live domains

📄 License

Copyright © 2026 BlackRoad OS, Inc. All rights reserved.

See LICENSE for details.

📖 Documentation

💬 Support


Built with ❤️ by BlackRoad OS Team | blackroad.io | Powering 5 quantum domains