NEO//GENE - Tech Precision Color System Visualization

♿ Accessibility First Design

All text meets WCAG AA contrast ratios (4.5:1 for normal text, 3:1 for large text)
Off-white (#F2F4F7) replaces pure white to reduce eye strain
Muted accent colors prevent visual fatigue during extended use
16px base font size ensures comfortable reading on all devices

🎨 Complete Color Palette

Primary Background

#00030B

Deep, sophisticated base. The slight blue tint provides depth over pure black.

Surface/Card Color

#0D1220

Subtle elevation against the background, maintaining visual hierarchy.

Accent/CTA

#64B5F6

Professional soft blue, highly visible without harsh glare.

Text Primary

#F2F4F7

Off-white replacing pure white to eliminate glare and reduce eye strain.

Text Secondary

#A6B4CC

Lighter grey for de-emphasized content, maintains contrast.

Success

#66BB6A

Muted, authoritative green. Calm and clear on dark backgrounds.

Error

#E57373

Professional red/salmon. Less straining for critical errors.

Warning

#FFB74D

Softer orange. Signals warning without visual punch.

📝 Typography System - Font Pairing Strategy

🎯 Three-Font System Rationale

Orbitron (Display/Headlines): Bold, futuristic aesthetic provides unique "fierce" brand identity. Used sparingly for maximum impact on titles and hero sections.
Roboto (Body/UI Text): Highly legible workhorse for comfortable long-form reading. Medium/Regular weights perfect for paragraphs, buttons, and standard UI elements.
Roboto Mono (Code/Data): Light weight ensures technical precision with perfect character alignment. Essential for code snippets, timestamps, and fixed-width data fields.
Roboto Condensed (Mobile/Dense UI): Space-efficient variant for sidebars, compact lists, and mobile screens while maintaining Roboto's visual style.

Heading 1 (H1) - Orbitron 48px Black (900)

Intelligent Project Scaffolding

Heading 2 (H2) - Orbitron 36px Bold (700)

Context Engineering Platform

Heading 3 (H3) - Orbitron 28px Bold (700)

5-Layer Context Architecture

Body Text - Roboto 16px Regular (Primary)

NEO//GENE transforms how developers start projects. Instead of spending hours on boilerplate setup, you compose structured, multi-layered context that guides AI to generate production-ready scaffolding in minutes. The Roboto font provides excellent readability for long-form content.

Body Text - Roboto 16px Regular (Secondary)

Secondary text is perfect for supporting information, captions, and less critical content. It maintains readability while reducing visual weight. Roboto's clean, modern aesthetic works perfectly for UI elements and comfortable reading.

Code - Roboto Mono 14px Regular (Light Weight)

const neogene = new ContextEngine({
  layers: ['foundation', 'knowledge', 'state'],
  templates: 60,
  aiProvider: 'claude',
  typography: {
    display: 'Orbitron',
    body: 'Roboto',
    code: 'Roboto Mono'
  }
});

Mobile/Dense UI - Roboto Condensed 14px Medium

Roboto Condensed maintains visual style while improving information density and scannability on small screens. Perfect for sidebars, data tables, compact lists, and mobile interfaces where horizontal space is limited.

🔘 Interactive Buttons

📢 Alert States

✓ Project scaffolding generated successfully! Files ready for download.

✕ Validation failed: Conflicting constraints detected in configuration.

⚠ Token budget approaching limit (85% used). Consider optimizing context.

ℹ Pro tip: Use template versioning to track changes over time.

📦 Card Components

Context Engineering

Structure information across 5 layers (Foundation, Knowledge, State, Interaction, Meta) to create systematic frameworks that prevent AI hallucination and ensure completeness.

Template Library

60+ pre-validated templates for roles, goals, domains, patterns, and tech stacks. Each template captures proven architectural patterns and best practices.

📝 Form Elements

Project Name

Tech Stack

Project Description

⚖️ Before & After Comparison

❌ Original (Too Harsh)

Electric cyan (#00d9ff) - Too bright, causes glare

Pure white (#ffffff) - Eye strain on dark backgrounds

Mint green (#00ff9f) - Overly saturated, "glowy"

✅ Refined (Professional)

Soft blue (#64B5F6) - Visible without glare

Off-white (#F2F4F7) - Reduced eye strain

Muted green (#66BB6A) - Calm and authoritative

💻 Code Block Example

CSS Implementation

:root {
  /* Core Colors */
  --bg-primary: #00030B;
  --bg-surface: #0D1220;
  --text-primary: #F2F4F7;
  --text-secondary: #A6B4CC;
  
  /* Interactive */
  --accent-primary: #64B5F6;
  --success: #66BB6A;
  --error: #E57373;
  --warning: #FFB74D;
  
  /* Typography - Three Font System */
  --font-display: 'Orbitron', monospace;
  --font-body: 'Roboto', -apple-system, sans-serif;
  --font-code: 'Roboto Mono', monospace;
  --font-condensed: 'Roboto Condensed', sans-serif;
  --font-size-base: 16px;
}
                

Interactive Example

Hover over any button above to see smooth transitions and shadows in action.