Cyberpunk Design System
Relevant source files
The following files were used as context for generating this wiki page:
The Cyberpunk Design System in NEXUS is a comprehensive visual framework designed to create a "cyberpunk-meets-luxury" aesthetic. It leverages glassmorphism, high-contrast neon gradients, and dynamic particle animations to provide a futuristic digital command center experience. The system is built using a combination of custom CSS variables, Tailwind CSS configurations, and React-based visual components.
Sources: test_result.md:158-159, frontend/src/App.css:1-5
Core Visual Foundation
The system is defined by a specific palette of "electric" colors and dark backgrounds, organized through CSS custom properties and a specialized Tailwind configuration.
Color Palette and Variables
The design system utilizes a dark primary background with vibrant accent colors to create high contrast.
| Variable | Hex/Value | Usage |
|---|---|---|
--bg-primary | #0A0A0B | Main application background |
--electric-blue | #00D4FF | Primary action color, focus states, and borders |
--vibrant-purple | #9D4EDD | Secondary accent and gradient component |
--hot-pink | #FF10F0 | Alert/high-visibility accents |
--neon-green | #00FF88 | Success states and monetary values |
--glass-bg | rgba(255, 255, 255, 0.05) | Background for glassmorphic cards |
Sources: frontend/src/App.css:7-27, frontend/src/App.css:545-548
Typography
The system uses three primary font families to distinguish between different content types:
- Orbitron: Used for cyberpunk titles and headers (
.cyber-title,.sidebar-title). - Inter: The base font for standard UI text and buttons.
- JetBrains Mono: Used for technical data, numbers, and code-like elements (
.stat-number,.email-address).
Sources: frontend/src/App.css:2-3, frontend/src/App.css:87-104, frontend/src/App.css:398-403
Layout and Surface Architecture
The NEXUS interface is built on a "Glass Morphism" philosophy, where surfaces appear as semi-transparent glass with blurred backgrounds.
Glassmorphism Components
The .glass-card is the fundamental container unit. It uses backdrop-filter: blur(20px) and semi-transparent borders to create depth. It also features a top-aligned gradient border (0.5 opacity) and a hover transition that shifts the card upward while increasing the glow effect.
Sources: frontend/src/App.css:107-124
Background Effects
The system uses a multi-layered background strategy to enhance the cyberpunk atmosphere:
- Radial Gradients: Fixed layers of purple, blue, and pink glows at specific viewport coordinates.
- Noise Texture: A repeating linear gradient overlay that creates a subtle scanline or digital grain effect.
- Particle Canvas: A React component that renders an animated particle field behind the UI.
Sources: frontend/src/App.css:66-85, frontend/src/App.js:107-160
Visual hierarchy of the background layers that create the cyberpunk depth effect.
Sources: frontend/src/App.css:60-85, frontend/src/App.js:159-160
Component Styling
Buttons and Inputs
Interactive elements use high-contrast gradients and "shimmer" animations.
- Cyber Button: Features a primary gradient from electric blue to vibrant purple. It includes a pseudo-element (
::before) that creates a light-sweep effect on hover. - Cyber Input: Uses the glass background (
--glass-bg) and shifts to a--electric-blueborder with a 3px glow (box-shadow) upon focus.
Sources: frontend/src/App.css:127-164, frontend/src/App.css:179-192
Navigation and Sidebar
The sidebar implements a vertical navigation structure where active items are highlighted with a border-color of --electric-blue and a primary gradient background with 0.1 opacity.
Sources: frontend/src/App.css:312-364
Animation System
The design system incorporates several distinct animation patterns to simulate a "breathing" or "active" system state.
| Animation | Keyframes / Properties | Purpose |
|---|---|---|
pulse | opacity: 1 to 0.8 | Used on .cyber-title for a subtle glow effect |
breathe | scale(1) to scale(1.02) | Applied to .stat-card for a living dashboard feel |
spin | rotate(0deg) to 360deg | Standard loading spinner for system initializing |
shimmer | left: -100% to 100% | Light sweep across buttons and stat cards |
Sources: frontend/src/App.css:618-632, frontend/src/App.css:139-145, frontend/src/App.css:278-283
Logic flow for visual feedback during user interactions with Cyberpunk components.
Sources: frontend/src/App.css:119-124, frontend/src/App.css:148-152, frontend/src/App.css:187-190
Integration with Utility Frameworks
The system bridges custom CSS with Tailwind CSS for rapid layout development.
- Tailwind Extend: The
tailwind.config.jsextends the theme to include standard radii and specific keyframes likeaccordion-down. - Global Overrides: The
index.cssfile applies the system'sborder-borderandbg-backgroundvariables globally using Tailwind's@layer basedirective. - Radix UI Support: Components like
SheetandNavigationMenuuseclass-variance-authority(cva) to map system variants to functional components, ensuring consistency across complex UI patterns.
Sources: frontend/tailwind.config.js:8-12, frontend/src/index.css:84-91, frontend/src/components/ui/sheet.jsx:26-44
Summary
The Cyberpunk Design System defines the identity of the NEXUS project. By combining rigorous CSS variable management with high-end visual effects like glassmorphism and animated canvases, it provides a cohesive and immersive environment for digital asset management.