---
name: Quant Intelligence Interface
colors:
  surface: '#0b1326'
  surface-dim: '#0b1326'
  surface-bright: '#31394d'
  surface-container-lowest: '#060e20'
  surface-container-low: '#131b2e'
  surface-container: '#171f33'
  surface-container-high: '#222a3d'
  surface-container-highest: '#2d3449'
  on-surface: '#dae2fd'
  on-surface-variant: '#bac9cc'
  inverse-surface: '#dae2fd'
  inverse-on-surface: '#283044'
  outline: '#849396'
  outline-variant: '#3b494c'
  surface-tint: '#00daf3'
  primary: '#c3f5ff'
  on-primary: '#00363d'
  primary-container: '#00e5ff'
  on-primary-container: '#00626e'
  inverse-primary: '#006875'
  secondary: '#4edea3'
  on-secondary: '#003824'
  secondary-container: '#00a572'
  on-secondary-container: '#00311f'
  tertiary: '#e7ecff'
  on-tertiary: '#002e6a'
  tertiary-container: '#bdd0ff'
  on-tertiary-container: '#0055b8'
  error: '#ffb4ab'
  on-error: '#690005'
  error-container: '#93000a'
  on-error-container: '#ffdad6'
  primary-fixed: '#9cf0ff'
  primary-fixed-dim: '#00daf3'
  on-primary-fixed: '#001f24'
  on-primary-fixed-variant: '#004f58'
  secondary-fixed: '#6ffbbe'
  secondary-fixed-dim: '#4edea3'
  on-secondary-fixed: '#002113'
  on-secondary-fixed-variant: '#005236'
  tertiary-fixed: '#d8e2ff'
  tertiary-fixed-dim: '#adc6ff'
  on-tertiary-fixed: '#001a42'
  on-tertiary-fixed-variant: '#004395'
  background: '#0b1326'
  on-background: '#dae2fd'
  surface-variant: '#2d3449'
typography:
  headline-lg:
    fontFamily: Inter
    fontSize: 32px
    fontWeight: '700'
    lineHeight: '1.2'
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: '600'
    lineHeight: '1.3'
    letterSpacing: -0.01em
  body-lg:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '400'
    lineHeight: '1.6'
  body-sm:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '400'
    lineHeight: '1.5'
  data-lg:
    fontFamily: JetBrains Mono
    fontSize: 18px
    fontWeight: '500'
    lineHeight: '1.4'
    letterSpacing: 0.02em
  data-md:
    fontFamily: JetBrains Mono
    fontSize: 14px
    fontWeight: '500'
    lineHeight: '1.4'
  label-xs:
    fontFamily: JetBrains Mono
    fontSize: 11px
    fontWeight: '600'
    lineHeight: '1'
    letterSpacing: 0.05em
rounded:
  sm: 0.125rem
  DEFAULT: 0.25rem
  md: 0.375rem
  lg: 0.5rem
  xl: 0.75rem
  full: 9999px
spacing:
  base: 4px
  xs: 8px
  sm: 16px
  md: 24px
  lg: 40px
  xl: 64px
  gutter: 20px
  margin: 32px
---

## Brand & Style

This design system is engineered for high-stakes quantitative analysis and commodity trading. The brand personality is authoritative, precise, and technologically advanced, designed to evoke a sense of "intelligence under the hood." 

The visual style leverages **Glassmorphism** and **High-Tech Minimalism**. By combining deep, recessed backgrounds with translucent, frosted-glass foreground elements, the UI creates a sense of spatial depth that mimics a futuristic command center. Neon accents and subtle glow effects are used strategically to indicate real-time AI activity and market volatility, ensuring that critical data points feel alive and responsive.

## Colors

The color palette is optimized for long-duration monitoring in low-light environments. 

- **Primary & Secondary:** Electric Cyan (#00E5FF) and Emerald Green (#10B981) are used for positive growth, AI execution states, and primary calls to action.
- **Accents:** Electric Blue (#3B82F6) serves as the secondary accent for interactive elements and data visualization series.
- **Surface Strategy:** The "Midnight Blue" (#020617) serves as the base canvas, while "Deep Charcoal" (#0F172A) defines the container layers. 
- **Semantics:** Crimson Red (#EF4444) is reserved strictly for negative trends, risk alerts, and stop-loss indicators.
- **Glass Effects:** Use 40-60% opacity on container backgrounds with a 12px-20px backdrop blur to achieve the frosted glass aesthetic.

## Typography

This design system utilizes a dual-font strategy to balance readability with technical aesthetics.

- **Inter:** Used for all prose, navigational elements, and headings. It provides a clean, modern foundation that remains legible even at high information densities.
- **JetBrains Mono:** Employed for all numerical data, tickers, timestamps, and terminal-style outputs. The monospaced nature ensures that fluctuating price digits do not cause layout "jitter" and reinforces the "Quant" positioning.

For mobile displays, `headline-lg` should scale down to 24px to maintain viewport integrity. Use `label-xs` for micro-metadata and table headers to maximize screen real estate.

## Layout & Spacing

The layout follows a **High-Density Fluid Grid** model. 

- **Grid:** A 12-column grid is standard for desktop, collapsing to 4 columns on mobile. 
- **Density:** Components are tightly packed using 8px (xs) and 16px (sm) increments to allow for maximum data visibility.
- **Sectioning:** While component-internal spacing is tight, global sections are separated by 40px (lg) or 64px (xl) to prevent cognitive overload.
- **Sidebar:** A fixed 240px navigation sidebar on the left provides consistent access to asset classes and algorithmic controls.

## Elevation & Depth

Hierarchy is established through **Backdrop Saturation and Blurring** rather than traditional heavy shadows.

- **Level 1 (Base):** Midnight Blue background.
- **Level 2 (Cards):** Frosted glass panels with a 1px border (#FFFFFF at 10% opacity) and 12px backdrop blur.
- **Level 3 (Popovers/Modals):** Increased blur (24px) and a subtle outer glow using the Primary color at 5% opacity to simulate light emission.
- **Active States:** Elements in an "active" or "hover" state should receive a 2px neon inner-glow or a subtle outer drop shadow in the Primary or Secondary accent color.

## Shapes

The shape language is "Technical Soft." 

A `0.25rem` (4px) base radius is applied to standard UI elements like buttons, input fields, and small cards. This keeps the interface feeling "engineered" and sharp. Larger dashboard widgets and containers utilize a `0.5rem` (rounded-lg) radius to provide a subtle visual softening that distinguishes major content blocks from interactive controls.

## Components

- **Buttons:** Primary buttons use a solid Electric Blue to Cyan gradient. Secondary buttons are "Ghost" style with a 1px Cyan border and 5% fill.
- **Data Tickers:** Always rendered in JetBrains Mono. Use green/red "glow" text colors to indicate price movement.
- **Charts:** Use thin 1px lines for axes. Grid lines should be faint (#FFFFFF at 5% opacity).
- **Input Fields:** Dark, recessed backgrounds with a 1px border that glows Cyan upon focus. 
- **Chips/Status Tags:** Small, monospaced text inside pill-shaped containers. AI-active status chips should have a "pulsing" dot icon.
- **Cards/Widgets:** Use the standard Glassmorphism style defined in the Elevation section. Each card must include a monospaced "Label" in the top-left corner for rapid identification.