technoir-aesthetic-system

name: TechNoir_Aesthetic_System description: Skill for implementing the unified RHIVE Tech-Noir design system including Glassmorphism and Circuitry logic.

Tech-Noir Aesthetic System

Overview

Ensures all UI components adhere to the "Tech-Noir / Futuristic AI" aesthetic. This involves strict adherence to the transparency physics and geometric laws defined in the Antigravity Framework.

Core Pillars

1. Glassmorphism Physics: Implementing the translucent background logic ($T(\alpha, \beta) = (1 - \alpha) \cdot e^{-\beta/k}$) using precise CSS variables and backdrop-filter.
2. Circuitry & Geometric Fidelity:
   • Mandatory use of SVG Overlays for chamfered corners.
   • Non-destructive border logic (avoiding standard CSS borders on complex shapes).
3. Color Palette Control:
   • Primary: #000000 (Black)
   • Accent: #ec028b (RHIVE Pink)
   • Secondary: Gray-700/800 for structural elements.

Component Implementation

• CircuitryCard: The master template for all dashboard widgets.
• PlexusBackground: Particle interaction layer for visual depth.

Verification

• Visual inspection via browser screenshots.
• Contrast ratio checks for "Premium Dark Mode" readability.