Color System

High-contrast "Grim Dark" aesthetic. Key tokens:

• --color-bg-void: Deep black (#0a0a0a) for page backgrounds.
• --color-primary-action: Neon Green (#39ff14) for interactions.
• --color-primary-alert: Signal Red (#ef4444) for errors/critical states.

Spacing

Modular scale based on 4px units (--space-unit). Consistent padding and margins ensure visual rhythm.

Type System

Font families and hierarchy.

• Cinzel: Serif display font. Uppercase, dramatic. Used for Headings H1-H3.
• Rajdhani: Sans-serif technical font. Used for body, UI, and data.
• Helpers: .text-muted, .text-accent, .text-alert.

Immersion Layers

Visual interference layers used to create a "tactical display" feel.

• Scanlines: 2px repeating gradient on a 4px cycle.
• Physical Flicker: Subtle opacity modulation (0.97 - 1.0) for CRT-like interaction.

Animation System

High-fidelity motion design reinforcing the tactical display aesthetic.

Visual Effects

• .glitch: RGB chromatic aberration with brightness shifts. 100ms, linear. Used on interactions.
• .page-glitch: Enhanced glitch for major navigation. 180ms with skew transforms.

Timing Tokens

• --duration-snap: 150ms - Quick state changes
• --duration-modal: 300ms - Modal entrances/exits
• --duration-glitch: 100ms - Glitch effects

Easing Functions

• --easing-mechanical: linear - Snap transitions
• --easing-aggressive: cubic-bezier(0, 1, 0, 1) - Dramatic effects

Interactive Actions

Standard button component .action-button. Designed for high visibility against dark backgrounds.

• Default: Transparent with primary border. Glows green on hover.
• Active: Fills solid green (Lightning Flash animation).
• Variants: .secondary (Muted), .danger (Red/Alert).

Contextual Controls

Compact variant .action-button.sm.

• Usage: Card headers, toolbars, dense grids.
• Sizing: Reduced padding and font-size.

Data Entry

"Box-style" text inputs with "chamfered appearance". Labels are absolutely positioned to sit on the top border.

• Focus: Green border + Primary Glow.
• Error: Red border + Glitch animation on validation failure.
• Helper Text: Optional support text below input.

Hexagonal Control

Diamond-shaped checkbox component .hex-checkbox.

• Appearance: 24px rotated square. Fills solid green when active.
• Behavior: Can function as a standard checkbox or as a radio button group using data-hex-group.
• Accessibility: Supports keyboard navigation (Enter/Space).

Binary Switch

Physical switch simulation .machine-toggle for system settings.

• States: Displays distinct ON/OFF labels inside the track.
• Animation: Knob slides with aggressive easing (mechanical feel).
• Feedback: Knob changes color (Red/Green) and glows when active.

Numerical Hierarchy

Precise data presentation for tactical displays.

• Tabular Nums: Ensures digits align vertically in data grids.
• Scale: 1.25rem / 1.5rem / 2.5rem hierarchy.

System State Signals

Visual cues for entity status or alert levels.

• Status Light: .status-light. 8px pulsing dot. Green (Online), Red (Critical).
• Badge: .status-badge. Text pill for metadata.

Contextual Info

Pure CSS tooltips via data-tooltip attribute for "Contextual Info".

• Behavior: Appears centered above element on hover.
• Styling: Unified card border style with shadow.

Focused Interaction Layer

Overlay .data-slate for "Focused Interaction Layer" tasks.

• Backdrop: .modal-backdrop applies dimming and blur to the background.
• Container: .data-slate centers content and handles scrolling.
• Header: Standardized title and close action.

Sidebar Navigation

Vertical navigation list .sidebar-menu.

• Item: .sidebar-item flex container.
• Hover: Background lightens, indicator marker slides in from left.
• Active: Text turns Primary Green, background tints green, indicator locked visible.

High-Density Grid

Data tables .manifest-table for lists.

• Interaction: Rows use outline on hover to prevent layout shifts.
• Data: Numeric columns use tabular-nums.

Event Feed

Timeline items .log-entry built on Unified Cards.

• Structure: Flex layout with Timestamp (fixed width) and Content (grow).
• Base: Uses standard card classes. .log-entry handles internal layout only.

Scrollbar Aesthetic

The application uses a unified, minimal scrollbar system designed for high-resolution tactical displays.

• Track: Matches var(--color-bg-void) for seamless integration.
• Thumb: Discrete var(--color-border-dim) marker.
• Active State: Glows in Gauss Green on hover/interaction.

System Activity

Animated sequence for async operations.

• Glyph: Rotating Cog (Linear 2s).
• Progress: 5-segment bar fills sequentially.
• Text: Pulsing opacity animation.

Vox Toast System

Non-blocking notifications .vox-toast appearing at bottom-right.

• Types: Success (Green), Error (Red), Info (Blue/Grey).
• Animation: Slides in from right, stays for 5s, fades out.
• Structure: Icon + Title + Message flex layout.