Quantum Analytics Dashboard

Overview

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

Colors

• Primary (#312E81): Main accent and emphasis color.
• Secondary (#1E1B4B): Supporting accent for secondary emphasis.
• Tertiary (#6366F1): Reserved accent for supporting contrast moments.
• Neutral (#060614): Neutral foundation for backgrounds, surfaces, and supporting chrome.
• Usage: Background: #060614; Surface: #312E81; Text Primary: #EDEDED; Text Secondary: #C7D2FE; Border: #6366F1; Accent: #312E81
• Gradients: bg-gradient-to-b from-indigo-900/40 to-transparent, bg-[radial-gradient(var(--tw-gradient-stops))] from-indigo-900/30 to-transparent

Typography

• Display (display-lg): Geist, 72px, weight 200, line-height 72px, letter-spacing -0.025em.
• Body (body-md): Geist, 12px, weight 200, line-height 19.5px.
• Labels (label-md): Geist, 12px, weight 300, line-height 16px.

Layout

• Layout type: Grid
• Content width: Bounded
• Base unit: 6px
• Scale: 1px, 6px, 8px, 14px, 18px, 19.5px, 24px, 32px
• Section padding: 32px, 80px
• Card padding: 32px
• Gaps: 8px, 12px, 24px

Elevation & Depth

• Surface style: Outlined
• Borders: 1px #6366F1; 1px #03030A; 1px #312E81; 1px #3730A3

Techniques

• Gradient border shell: Use a thin gradient border shell around the main card. Wrap the surface in an outer shell with 1px padding and a 24px radius. Drive the shell with linear-gradient(rgba(49, 46, 129, 0.4), rgba(0, 0, 0, 0)) so the edge reads like premium depth instead of a flat stroke. Keep the actual stroke understated so the gradient shell remains the hero edge treatment. Inset the real content surface inside the wrapper with a slightly smaller radius so the gradient only appears as a hairline frame.

Shapes

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

Components

Buttons

• Primary: background #1E1B4B, text #EEF2FF, radius 9999px, padding 14px, border 1px solid rgba(55, 48, 163, 0.5).

Cards and Surfaces

• Card surface: background #060614, border 1px solid rgb(3, 3, 10), radius 24px, 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 6px rhythm.
• Do reuse the Outlined surface treatment consistently across cards and controls.
• Do keep corner radii within the detected 2px, 24px, 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 exceed the detected moderate motion intensity without a deliberate reason.

Motion

WebGL

• Scene:
  • Value: Wide scene band
• 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, DPR clamp

• HTML reference:
  • Language: html
  • Snippet:

    <!-- WebGL Canvas for Animated Background -->
    <canvas id="glcanvas" class="absolute inset-0 w-full h-full pointer-events-none z-0 mix-blend-screen opacity-80"></canvas>
    
    <div class="relative z-10 pointer-events-none">

• JS reference:
  • Language: js
  • Snippet:

    const initHeroWebGL = () => {
        const canvas = document.getElementById('glcanvas');
        if (!canvas) return;
    
        const parent = canvas.parentElement;
        const scene = new THREE.Scene();
    
        // Soft depth fade via fog (Updated for dark indigo)
    …

• Renderer setup:
  • Language: js
  • Snippet:

    const camera = new THREE.PerspectiveCamera(60, parent.clientWidth / parent.clientHeight, 0.1, 100);
    camera.position.z = 12;
    
    const renderer = new THREE.WebGLRenderer({ canvas: canvas, alpha: true, antialias: true });
    renderer.setSize(parent.clientWidth, parent.clientHeight);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    
    // Dot-matrix particle field setup

• Scene setup:
  • Language: js
  • Snippet:

    const canvas = document.getElementById('glcanvas');
    if (!canvas) return;
    
    const parent = canvas.parentElement;
    const scene = new THREE.Scene();
    
    // Soft depth fade via fog (Updated for dark indigo)
    scene.fog = new THREE.FogExp2(0x050510, 0.05);

ThreeJS

• Scene:
  • Value: Wide scene band with layered spatial depth
• Render:
  • Value: alpha, antialias, DPR clamp
• Camera:
  • Value: Perspective, ~60deg FOV
• Lighting:
  • Value: ambient + directional
• Materials:
  • Value: MeshStandardMaterial + PointsMaterial
• Geometry:
  • Value: plane + box
• Motion:
  • Value: Timeline-led reveals

• HTML reference:
  • Language: html
  • Snippet:

    <!-- WebGL Canvas for Animated Background -->
    <canvas id="glcanvas" class="absolute inset-0 w-full h-full pointer-events-none z-0 mix-blend-screen opacity-80"></canvas>
    
    <div class="relative z-10 pointer-events-none">

• JS reference:
  • Language: js
  • Snippet:

    const initHeroWebGL = () => {
        const canvas = document.getElementById('glcanvas');
        if (!canvas) return;
    
        const parent = canvas.parentElement;
        const scene = new THREE.Scene();
    
        // Soft depth fade via fog (Updated for dark indigo)
    …

• Renderer setup:
  • Language: js
  • Snippet:

    const camera = new THREE.PerspectiveCamera(60, parent.clientWidth / parent.clientHeight, 0.1, 100);
    camera.position.z = 12;
    
    const renderer = new THREE.WebGLRenderer({ canvas: canvas, alpha: true, antialias: true });
    renderer.setSize(parent.clientWidth, parent.clientHeight);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    
    // Dot-matrix particle field setup

• Scene setup:
  • Language: js
  • Snippet:

    const canvas = document.getElementById('glcanvas');
    if (!canvas) return;
    
    const parent = canvas.parentElement;
    const scene = new THREE.Scene();
    
    // Soft depth fade via fog (Updated for dark indigo)
    scene.fog = new THREE.FogExp2(0x050510, 0.05);