Nova - Next Gen Intelligence

Overview

• Composition cues:
  • Layout: Flex
  • Content Width: Bounded
  • Framing: Glassy
  • Grid: Minimal

Colors

• Primary (#9CA3AF): Main accent and emphasis color.
• Secondary (#FFFFFF): Supporting accent for secondary emphasis.
• Tertiary (#A69DB9): Reserved accent for supporting contrast moments.
• Neutral (#FFFFFF): Neutral foundation for backgrounds, surfaces, and supporting chrome.
• Usage: Background: #FFFFFF; Surface: #FFFFFF; Text Primary: #FFFFFF; Text Secondary: #D1D5DB; Border: #FFFFFF; Accent: #9CA3AF
• Gradients: bg-gradient-to-br from-[#bef264] to-[#60a5fa] via-[#34d399]

Typography

• Display (display-lg): Geist, 88px, weight 300, line-height 88px, letter-spacing -0.05em.
• Body (body-md): Geist, 18px, weight 500, line-height 28px.
• Labels (label-md): Geist, 14px, weight 500, line-height 20px.

Layout

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

Elevation & Depth

• Surface style: Glass
• Borders: 1px #FFFFFF
• Blur: 16px

Techniques

• Gradient border shell: Use a thin gradient border shell around the main card. Wrap the surface in an outer shell with 2px padding and a 0px radius. Drive the shell with none 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: 9999px
• Icon treatment: Linear
• Icon sets: Solar

Components

Buttons

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

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 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: Full-bleed background field
• Effect:
  • Value: Fine line lattice
• Primitives:
  • Value: Line trails + sparse anchors
• Motion:
  • Value: Slow breathing pulse
• Interaction:
  • Value: Pointer-reactive drift
• Render:
  • Value: WebGL, Renderer, alpha, antialias, DPR clamp, custom shaders

• HTML reference:
  • Language: html
  • Snippet:

    <!-- WebGL Canvas Container -->
    <canvas id="webgl-bg"></canvas>
    
    <!-- Main Content Wrapper (Above WebGL) -->

• JS reference:
  • Language: js
  • Snippet:

    // --- WebGL Background Animation ---
    const initWebGL = () => {
        const canvas = document.getElementById('webgl-bg');
        const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
        const scene = new THREE.Scene();
        const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
    
        // Custom fragment shader for diagonal glowing rays
    …

• Renderer setup:
  • Language: js
  • Snippet:

    // --- WebGL Background Animation ---
    const initWebGL = () => {
        const canvas = document.getElementById('webgl-bg');
        const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
        const scene = new THREE.Scene();
        const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
    
        // Custom fragment shader for diagonal glowing rays

• Draw call:
  • Language: js
  • Snippet:

    const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
    
    // Custom fragment shader for diagonal glowing rays
    const fragmentShader = `
        uniform float u_time;
        uniform vec2 u_resolution;
    
        void main() {
    …

ThreeJS

• Scene:
  • Value: Full-bleed background field with layered spatial depth
• Render:
  • Value: alpha, antialias, DPR clamp
• Camera:
  • Value: Orthographic projection
• Lighting:
  • Value: ambient + key + rim
• Materials:
  • Value: ShaderMaterial
• Geometry:
  • Value: plane
• Motion:
  • Value: Slow orbital drift

• HTML reference:
  • Language: html
  • Snippet:

    <!-- WebGL Canvas Container -->
    <canvas id="webgl-bg"></canvas>
    
    <!-- Main Content Wrapper (Above WebGL) -->

• JS reference:
  • Language: js
  • Snippet:

    // --- WebGL Background Animation ---
    const initWebGL = () => {
        const canvas = document.getElementById('webgl-bg');
        const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
        const scene = new THREE.Scene();
        const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
    
        // Custom fragment shader for diagonal glowing rays
    …

• Renderer setup:
  • Language: js
  • Snippet:

    // --- WebGL Background Animation ---
    const initWebGL = () => {
        const canvas = document.getElementById('webgl-bg');
        const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
        const scene = new THREE.Scene();
        const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
    
        // Custom fragment shader for diagonal glowing rays

• Draw call:
  • Language: js
  • Snippet:

    const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
    
    // Custom fragment shader for diagonal glowing rays
    const fragmentShader = `
        uniform float u_time;
        uniform vec2 u_resolution;
    
        void main() {
    …