Nexus Core - Autonomous Systems

Overview

• Composition cues:
  • Layout: Grid
  • Content Width: Bounded
  • Framing: Glassy
  • Grid: Strong

Colors

• Primary (#00E5FF): Main accent and emphasis color.
• Secondary (#0A0A0A): Supporting accent for secondary emphasis.
• Tertiary (#0A3BFF): Reserved accent for supporting contrast moments.
• Neutral (#0A0A0A): Neutral foundation for backgrounds, surfaces, and supporting chrome.
• Usage: Background: #00E5FF; Surface: #0A0A0A; Text Primary: #FFFFFF; Text Secondary: #00E5FF; Border: #FFFFFF; Accent: #00E5FF
• Gradients: bg-gradient-to-b from-white/20 to-transparent

Typography

• Display (display-lg): Bricolage Grotesque, 52px, weight 300, line-height 52px, letter-spacing -0.05em, uppercase.
• Body (body-md): System Font, 14px, weight 400, line-height 22.75px.
• Labels (label-md): SFMono-Regular, 12px, weight 600, line-height 16px, letter-spacing 1.2px, uppercase.

Layout

• Layout type: Grid
• Content width: Bounded
• Base unit: 4px
• Scale: 4px, 8px, 12px, 14px, 16px, 20px, 24px, 32px
• Section padding: 32px, 56px
• Card padding: 32px, 56px
• Gaps: 8px, 16px, 24px, 32px

Elevation & Depth

• Surface style: Glass
• Borders: 1px #FFFFFF
• Shadows: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px; rgb(0, 229, 255) 0px 0px 8px 0px
• Blur: 4px

Shapes

• Corner radii: 2px, 4px, 20px, 9999px
• Icon treatment: Linear
• Icon sets: Solar

Components

Buttons

• Primary: background #00E5FF, text #000000, radius 4px, padding 14px, border 0px solid rgb(229, 231, 235).
• Secondary: text #FFFFFF, radius 4px, padding 8px, border 1px solid rgba(255, 255, 255, 0.2).
• Links: text #FFFFFF, radius 0px, padding 0px, border 0px solid rgb(229, 231, 235).

Cards and Surfaces

• Card surface: radius 0px, padding 32px, shadow none.

Iconography

• Treatment: Linear.
• Sets: Solar.

Do's and Don'ts

Do

• Do use the primary palette as the main accent for emphasis and action states.
• Do keep spacing aligned to the detected 4px rhythm.
• Do reuse the Glass surface treatment consistently across cards and controls.
• Do keep corner radii within the detected 2px, 4px, 20px, 9999px family.

Don't

• Don't introduce extra accent colors outside the core palette roles unless the page needs a new semantic state.
• Don't mix unrelated shadow or blur recipes that break the current depth system.
• Don't exceed the detected moderate motion intensity without a deliberate reason.

Motion

WebGL

• Scene:
  • Value: Inset 3D accent
• Effect:
  • Value: Dot-matrix particle field
• Primitives:
  • Value: Dot particles + soft depth fade
• Motion:
  • Value: Slow breathing pulse
• Interaction:
  • Value: Pointer-reactive drift
• Render:
  • Value: WebGL, Renderer, alpha, antialias

• HTML reference:
  • Language: html
  • Snippet:

    <canvas width="1200" height="1344" style="display: block; width: 600px; height: 672px;"></canvas>

• JS reference:
  • Language: js
  • Snippet:

    document.addEventListener('DOMContentLoaded', () => {
        const container = document.getElementById('webgl-container');
        if (!container) return;
    
        // Scene setup
        const scene = new THREE.Scene();
    
        // Isometric Camera setup
    …

• Renderer setup:
  • Language: js
  • Snippet:

    const camera = new THREE.OrthographicCamera(-d * aspect, d * aspect, d, -d, 1, 1000);
    camera.position.set(20, 20, 20);
    camera.lookAt(scene.position);
    
    const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
    renderer.setSize(container.clientWidth, container.clientHeight);
    renderer.setPixelRatio(window.devicePixelRatio);
    container.appendChild(renderer.domElement);

• Scene setup:
  • Language: js
  • Snippet:

    const container = document.getElementById('webgl-container');
    if (!container) return;
    
    // Scene setup
    const scene = new THREE.Scene();
    
    // Isometric Camera setup
    const aspect = container.clientWidth / container.clientHeight;
    …

ThreeJS

• Scene:
  • Value: Inset 3D accent
• Render:
  • Value: alpha, antialias
• Camera:
  • Value: Orthographic projection
• Lighting:
  • Value: ambient + directional + point
• Materials:
  • Value: MeshStandardMaterial
• Geometry:
  • Value: box
• Motion:
  • Value: Slow orbital drift

• HTML reference:
  • Language: html
  • Snippet:

    <canvas width="1200" height="1344" style="display: block; width: 600px; height: 672px;"></canvas>

• JS reference:
  • Language: js
  • Snippet:

    document.addEventListener('DOMContentLoaded', () => {
        const container = document.getElementById('webgl-container');
        if (!container) return;
    
        // Scene setup
        const scene = new THREE.Scene();
    
        // Isometric Camera setup
    …

• Renderer setup:
  • Language: js
  • Snippet:

    const camera = new THREE.OrthographicCamera(-d * aspect, d * aspect, d, -d, 1, 1000);
    camera.position.set(20, 20, 20);
    camera.lookAt(scene.position);
    
    const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
    renderer.setSize(container.clientWidth, container.clientHeight);
    renderer.setPixelRatio(window.devicePixelRatio);
    container.appendChild(renderer.domElement);

• Scene setup:
  • Language: js
  • Snippet:

    const container = document.getElementById('webgl-container');
    if (!container) return;
    
    // Scene setup
    const scene = new THREE.Scene();
    
    // Isometric Camera setup
    const aspect = container.clientWidth / container.clientHeight;
    …