---
name: Luminous Glitch
colors:
  surface: '#131316'
  surface-dim: '#131316'
  surface-bright: '#39393c'
  surface-container-lowest: '#0e0e11'
  surface-container-low: '#1b1b1e'
  surface-container: '#1f1f22'
  surface-container-high: '#2a2a2d'
  surface-container-highest: '#353438'
  on-surface: '#e4e1e5'
  on-surface-variant: '#d1c1d9'
  inverse-surface: '#e4e1e5'
  inverse-on-surface: '#303033'
  outline: '#9a8ca2'
  outline-variant: '#4e4356'
  surface-tint: '#dfb7ff'
  primary: '#dfb7ff'
  on-primary: '#4b007e'
  primary-container: '#9d00ff'
  on-primary-container: '#f7e5ff'
  inverse-primary: '#8c00e5'
  secondary: '#c6c6c7'
  on-secondary: '#2f3131'
  secondary-container: '#454747'
  on-secondary-container: '#b4b5b5'
  tertiary: '#bdc9c8'
  on-tertiary: '#273232'
  tertiary-container: '#616c6c'
  on-tertiary-container: '#e1eded'
  error: '#ffb4ab'
  on-error: '#690005'
  error-container: '#93000a'
  on-error-container: '#ffdad6'
  primary-fixed: '#f1daff'
  primary-fixed-dim: '#dfb7ff'
  on-primary-fixed: '#2d004f'
  on-primary-fixed-variant: '#6b00b0'
  secondary-fixed: '#e2e2e2'
  secondary-fixed-dim: '#c6c6c7'
  on-secondary-fixed: '#1a1c1c'
  on-secondary-fixed-variant: '#454747'
  tertiary-fixed: '#d9e5e4'
  tertiary-fixed-dim: '#bdc9c8'
  on-tertiary-fixed: '#131d1d'
  on-tertiary-fixed-variant: '#3e4949'
  background: '#131316'
  on-background: '#e4e1e5'
  surface-variant: '#353438'
typography:
  display-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 48px
    fontWeight: '800'
    lineHeight: '1.1'
    letterSpacing: -0.02em
  display-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 36px
    fontWeight: '700'
    lineHeight: '1.2'
    letterSpacing: -0.01em
  headline-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 24px
    fontWeight: '600'
    lineHeight: '1.4'
  body-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 18px
    fontWeight: '400'
    lineHeight: '1.6'
  body-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 16px
    fontWeight: '400'
    lineHeight: '1.6'
  label-mono:
    fontFamily: Space Grotesk
    fontSize: 14px
    fontWeight: '500'
    lineHeight: '1'
    letterSpacing: 0.05em
  caption:
    fontFamily: Plus Jakarta Sans
    fontSize: 12px
    fontWeight: '500'
    lineHeight: '1.4'
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  unit: 8px
  container-max: 1440px
  gutter: 24px
  margin-page: 40px
  stack-sm: 8px
  stack-md: 16px
  stack-lg: 32px
  stack-xl: 64px
---

## Brand & Style
This design system targets high-performance environments where speed, precision, and visual immersion are paramount. The aesthetic merges the clean structural elements of **Minimalism** with the depth of **Glassmorphism**, accented by controlled **High-Contrast** elements. 

The experience is designed to feel "alive"—as if the interface is powered by an internal light source. It evokes a sense of "digital physicalism," where elements are high-fidelity and tactile despite their futuristic nature. The atmosphere is energetic and premium, utilizing dark backgrounds to let the vibrant accents and textures command full attention.

## Colors
The palette is rooted in a signature deep black (#000505) that acts as an infinite canvas, providing maximum contrast for the 'Electric Purple' (#9D00FF) focal points. This purple is used for critical interactive paths and high-energy feedback. 

Brilliant white is reserved for primary content and data visualization to ensure readability. A neutral dark grey (#1A1A1D) is used for secondary containers to provide subtle separation without breaking the immersive dark environment. Color application should favor luminosity; rather than flat fills, use gradients that transition from the primary purple into transparent blacks to simulate a neon "glow" effect.

## Typography
The typographic hierarchy balances the friendly, rounded approachability of **Plus Jakarta Sans** with the technical rigor of **Space Grotesk**. 

Plus Jakarta Sans handles all primary communication, providing a modern and "soft" contrast to the sharp digital effects. Space Grotesk is deployed as a specialized accent for technical data, metadata, and status labels—reinforcing the tech-forward narrative. Bold weights are preferred for headlines to anchor the layout, while body text maintains a generous line height for clarity against dark, textured backgrounds.

## Layout & Spacing
This design system utilizes a **fluid grid** model with a strict 8px spacing rhythm. The layout philosophy emphasizes "breathing room" to prevent the high-fidelity effects from feeling cluttered. 

A 12-column grid is the standard for desktop views, using 24px gutters to allow for the soft glows and shadows of glass elements to bleed into the gutters without overlapping adjacent content. Page margins are generous (40px+) to focus the user’s eye on the central "glitch" artifacts and primary data hubs.

## Elevation & Depth
Depth is articulated through **Glassmorphism** and light-based hierarchy rather than traditional shadows. Surfaces are layered using varying levels of opacity and background blurs (ranging from 8px to 24px).

- **Level 1 (Base):** Deep black (#000505) with a subtle 'digital noise' grain overlay at 3% opacity.
- **Level 2 (Containers):** Semi-transparent dark fills (White at 5% opacity) with a 1px inner border (White at 10% opacity) and a background blur.
- **Level 3 (Active/Hover):** Glass surfaces that emit an ambient 'Electric Purple' outer glow. These glows should be soft and wide (e.g., 20px - 40px blur radius) with low opacity (15-20%) to simulate light refracting through glass.

## Shapes
The shape language follows a **Rounded** (0.5rem base) philosophy to complement the curves of the typography. This softens the "aggressive" nature of the neon and glitch aesthetic, making the interface feel premium and approachable.

- **Standard Elements:** 8px (0.5rem) corner radius for buttons and inputs.
- **Large Containers:** 16px (1rem) for cards and modals.
- **Accent Elements:** Occasional sharp 0px corners are permitted only for "glitch" decorative lines or separators to introduce a sense of digital fragmentation.

## Components
- **Buttons:** Primary buttons use a solid 'Electric Purple' fill with white text. They feature a persistent subtle purple outer glow. On hover, the glow intensity increases, and a slight "shiver" or "glitch" animation is encouraged.
- **Cards:** Glassmorphic panels with a 1px white border at low opacity. Content inside should be layered over a digital noise texture to add grit.
- **Input Fields:** Ghost-style inputs with a thin bottom border that "activates" by glowing purple when focused. Use Space Grotesk for placeholder text to signal a technical input area.
- **Chips/Labels:** Pill-shaped with a dark fill and purple border. Use Space Grotesk for the internal text.
- **Digital Noise Overlay:** A global component—a full-screen fixed grain texture that adds high-fidelity "noise," making the dark areas feel textured rather than empty.
- **Glitch Dividers:** Instead of solid lines, use 1px horizontal strokes that occasionally "break" or stagger to reinforce the tech-forward aesthetic.