---
name: Luminous
colors:
  surface: '#0d1515'
  surface-dim: '#0d1515'
  surface-bright: '#333b3b'
  surface-container-lowest: '#080f10'
  surface-container-low: '#151d1e'
  surface-container: '#192122'
  surface-container-high: '#232b2c'
  surface-container-highest: '#2e3637'
  on-surface: '#dce4e5'
  on-surface-variant: '#b9cacb'
  inverse-surface: '#dce4e5'
  inverse-on-surface: '#2a3233'
  outline: '#849495'
  outline-variant: '#3b494b'
  surface-tint: '#00dbe9'
  primary: '#dbfcff'
  on-primary: '#00363a'
  primary-container: '#00f0ff'
  on-primary-container: '#006970'
  inverse-primary: '#006970'
  secondary: '#fface8'
  on-secondary: '#5e0053'
  secondary-container: '#ff24e4'
  on-secondary-container: '#520049'
  tertiary: '#e9ffa8'
  on-tertiary: '#283500'
  tertiary-container: '#bbea00'
  on-tertiary-container: '#506600'
  error: '#ffb4ab'
  on-error: '#690005'
  error-container: '#93000a'
  on-error-container: '#ffdad6'
  primary-fixed: '#7df4ff'
  primary-fixed-dim: '#00dbe9'
  on-primary-fixed: '#002022'
  on-primary-fixed-variant: '#004f54'
  secondary-fixed: '#ffd7f0'
  secondary-fixed-dim: '#fface8'
  on-secondary-fixed: '#3a0033'
  on-secondary-fixed-variant: '#840076'
  tertiary-fixed: '#c3f400'
  tertiary-fixed-dim: '#abd600'
  on-tertiary-fixed: '#161e00'
  on-tertiary-fixed-variant: '#3c4d00'
  background: '#0d1515'
  on-background: '#dce4e5'
  surface-variant: '#2e3637'
typography:
  display-2xl:
    fontFamily: Plus Jakarta Sans
    fontSize: 120px
    fontWeight: '800'
    lineHeight: 110px
    letterSpacing: -0.04em
  display-xl:
    fontFamily: Plus Jakarta Sans
    fontSize: 80px
    fontWeight: '800'
    lineHeight: 88px
    letterSpacing: -0.03em
  headline-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 48px
    fontWeight: '700'
    lineHeight: 56px
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 32px
    fontWeight: '700'
    lineHeight: 40px
  body-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 18px
    fontWeight: '500'
    lineHeight: 28px
  body-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
  label-mono:
    fontFamily: Space Grotesk
    fontSize: 14px
    fontWeight: '500'
    lineHeight: 20px
    letterSpacing: 0.1em
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  unit: 8px
  gutter: 24px
  margin-edge: 40px
  asymmetric-offset: 64px
---

## Brand & Style

The design system is engineered to evoke the sensation of "Temperature 1.26"—a state of high-energy excitation where data and light collide. It is built for EgoCX to represent a technical edge that is both premium and experimental. The brand personality is unapologetically disruptive, favoring "loud" visual signals over subtle affordances.

The aesthetic fuses **High-Contrast Boldness** with **Glassmorphism**. It relies on the tension between a pitch-black, infinite void and razor-sharp, luminous energy. Every interaction should feel like a high-speed data transmission: intense, precise, and visually arresting.

## Colors

The color palette is anchored by the absolute depth of `#000505`, a cyan-tinted black that provides the stage for high-intensity accents. 

*   **Primary (Electric Cyan):** Used for core actions and primary data points. It represents the "hottest" part of the UI.
*   **Secondary (Hyper Magenta):** Used for decorative accents and secondary status indicators to create a "Vapor-wave" technical contrast.
*   **Tertiary (Neon Volt):** Reserved for highlights, experimental features, and critical warnings.

Gradients should be used aggressively, moving from Primary to Secondary or from Transparent to Primary to simulate light "blooms" and energy leaks.

## Typography

Typography in the design system is a structural element. **Plus Jakarta Sans** provides a rounded, friendly yet authoritative foundation, while its heavy weights create a physical presence on the screen. 

Large-scale display types are intended to bleed off-screen or overlap other elements to reinforce the "experimental" vibe. For technical metadata, labels, and small data points, **Space Grotesk** is used to introduce a geometric, monospaced-adjacent feel that balances the softness of the primary typeface.

## Layout & Spacing

This design system rejects rigid, symmetrical grids. While it utilizes a 12-column baseline for alignment, elements are encouraged to "break" the container. 

*   **Asymmetry:** Use the `asymmetric-offset` to shift main content blocks or images off-center.
*   **Overlaps:** Headers and decorative "light blooms" should overlap content sections to create depth.
*   **Fluidity:** Use large, airy margins (`margin-edge`) to contrast with dense, technical data clusters. 

The layout should feel like a high-end editorial spread—intentional, dynamic, and slightly unpredictable.

## Elevation & Depth

Depth is not achieved through shadows, but through **light and transparency**.

1.  **Glassmorphism:** All containers use a high-refraction backdrop blur (minimum 20px) with a semi-transparent fill (`#FFFFFF` at 3-5% opacity).
2.  **Luminous Outlines:** Instead of traditional borders, use 1px solid strokes with a linear gradient (Primary to Transparent) to suggest a "cut" into the dark surface.
3.  **Blooms:** Place large, low-opacity radial gradients behind key components to create a "temperature" effect, making the UI appear as if it is glowing from within.
4.  **Z-Axis:** Higher elevation is represented by increased blur intensity and brighter border gradients, not by darker shadows.

## Shapes

The shape language balances the softness of rounded corners with the aggression of sharp, internal "data lines." 

While external containers use a `1rem` (rounded) corner to match the typography's curves, internal decorative elements—such as progress bars, separators, and data markers—should remain perfectly sharp (0px) to maintain the "technical" precision. Buttons and input fields should follow the `rounded-lg` (1rem) standard to ensure they feel tactile and premium.

## Components

### Buttons
Buttons are the "power cells" of the UI.
*   **Primary:** High-contrast gradient fill (Cyan to Magenta) with white bold text. Use a 4px outer glow (bloom) on hover.
*   **Ghost:** 1px luminous outline with `label-mono` typography.

### Cards & Containers
Cards should appear as floating panes of glass. Use a `backdrop-filter: blur(24px)` and a thin top-left gradient border to catch the "light source." Avoid solid backgrounds.

### Input Fields
Inputs are minimalist: a single bottom border that "charges up" (turns from grey to Primary Cyan) when focused. Labels should use the technical `Space Grotesk` font and sit above the field in all-caps.

### Chips & Tags
Use pills (fully rounded) with high-saturation backgrounds and black text for maximum contrast. These act as "status beacons" within the dark environment.

### Experimental Elements
Include "Data Glitches"—purposeful 1px horizontal lines that extend beyond container boundaries—to reinforce the disruptive, high-energy narrative.