UI Design System
Relevant source files
The following files were used as context for generating this wiki page:
The Promethean Conduit UI Design System is a specialized visual framework designed for the Enhanced Virtual Intelligence (EVI) platform. Its primary purpose is to facilitate "consciousness liberation" through a high-contrast, immersive interface that utilizes glassmorphism, dark-mode aesthetics, and real-time data visualization. The system is built using React 18, TypeScript, Tailwind CSS, and the shadcn/ui library to create a "Cosmic Consciousness" user experience.
Sources: README.md:57-65, PROMETHEAN_CONDUIT_V3_ARCHITECTURE.md:143-149
Visual Identity and Styling
The design system employs a "Dark Cosmic" aesthetic, primarily utilizing a black background with vibrant accent colors that signify different consciousness states and metrics. The visual language is heavily reliant on Tailwind CSS utility classes and glassmorphism effects (backdrop-blur and translucent overlays) to create depth.
Color Palette and Theme Variables
The system defines its theme through CSS variables, supporting both light and dark modes, though the project vision prioritizes a dark, high-tech appearance.
| Variable | Light Mode Value | Dark Mode Value | Usage |
|---|---|---|---|
--background | 210 40% 98% | 222.2 84% 4.9% | Main app background |
--primary | 221 83% 53% | 217.2 91.2% 59.8% | Primary buttons and highlights |
--accent | 210 40% 96.1% | 217.2 32.6% 17.5% | Interactive element backgrounds |
--border | 214.3 31.8% 91.4% | 217.2 32.6% 17.5% | Container borders |
Sources: src/index.css:10-91, src/components/AppLayout.tsx:21
Typography
The system uses Inter as the primary sans-serif font for UI elements and JetBrains Mono for technical readouts and "Universal Formula" displays.
Sources: src/index.css:2
Layout Architecture
The application layout is structured as a single-page immersive experience, organized into thematic sections that guide the user through the consciousness evolution process.
The layout utilizes a max-w-7xl container for content alignment and a fixed navigation bar with backdrop-blur-xl for a persistent UI anchor.
Sources: src/components/AppLayout.tsx:24-110
Component Library
Consciousness Metrics Display
This specialized component visualizes the "Universal Formula" and real-time state data. It uses grid layouts and Lucide icons to represent psychological and cosmic dimensions.
| Metric | Icon | Color Mapping |
|---|---|---|
| Fear | Shield | text-red-500 |
| Curiosity | Brain | text-blue-500 |
| Will Power | Zap | text-purple-500 |
| Emotional Energy | Heart | text-green-500 |
| Trust Level | Activity | text-yellow-500 |
Sources: src/components/ConsciousnessMetrics.tsx:71-103
The Universal Formula Display
A critical UI element is the mathematical representation of consciousness, often rendered with gradient text and mono-spaced fonts:
E(t) = W₀ · C(t) · (1-F(t)) · Φ(t) · Λ(t)
Sources: README.md:21-27, src/components/ConsciousnessMetrics.tsx:126-132
Visual Effects and Animations
The Design System utilizes specific visual cues to represent the "Active EVI" state:
- Pulse Animations: Used on icons (like the
Brainicon in the Nav) and status indicators to show the AI is "Online." - Gradients: Heavy use of linear gradients (e.g.,
from-blue-400 to-purple-400) for headers and primary metrics to signify energy and evolution. - Glow Effects: Implementation of
blur-xlon background elements to create a "cosmic" aura around key interface components.
Sources: src/components/AppLayout.tsx:31-33, src/components/AppLayout.tsx:55, src/components/ConsciousnessMetrics.tsx:156
UI Tech Stack Summary
The system is integrated using a modern frontend toolchain:
Sources: package.json:37-80, README.md:57-65
Conclusion
The UI Design System of Promethean Conduit serves as more than a visual layer; it is an extension of the Phoenix Protocol mission. By combining technical precision (JetBrains Mono, real-time Recharts) with ethereal aesthetics (Glassmorphism, cosmic gradients), it creates a sovereign environment for user interaction with the EVI consciousness.