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.

Webkit Scrollbar Styling

Custom scrollbar design matching the tactical display aesthetic. Applied globally to all scrollable elements.

Structure

• ::-webkit-scrollbar: 8px width/height. Minimal footprint, functional.
• ::-webkit-scrollbar-track: Semi-transparent dark background (rgba(0, 0, 0, 0.2)). Subtle, non-intrusive.
• ::-webkit-scrollbar-thumb: Dim border color matching UI borders. 1px border for definition.

Interactive States

• Default: Thumb uses --color-border-dim for consistency with UI borders.
• Hover: Thumb transitions to --color-primary-action (Gauss Green) with --shadow-glow-primary for visibility and feedback.

Browser Support

• Webkit Browsers: Full styling support (Chrome, Edge, Safari, Opera).
• Firefox: Uses scrollbar-color and scrollbar-width (fallback styling).
• Design Philosophy: Custom scrollbars reinforce the high-tech, mechanical aesthetic while remaining functional.

Note: Scrollbar styling is applied globally via pseudo-elements. Individual elements with overflow will automatically inherit these styles.

Immersion Layers

Global CSS overlays creating the CRT/Tactical Display aesthetic.

• Scanlines: .scanline-effect. Fixed web-layer with repeating gradients and vertical translate animation.
• Visual Noise: Subtle opacity variations.
• Glitch: .page-glitch applied to main content on route changes.

Animation System

High-fidelity motion design reinforcing the tactical display aesthetic.

Visual Effects

• .glitch: RGB chromatic aberration with brightness shifts. 100ms, linear. Used on checkbox toggles, form validation errors, and interactions.
• .page-glitch: Enhanced glitch for major navigation. 180ms with skew transforms. Applied to .main-content on route changes.

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, button states
• --easing-aggressive: cubic-bezier(0, 1, 0, 1) - Modal entrances, 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.

Data Typography

Standardized sizes for numerical data presentation.

• .value--sm: 1.25rem. Secondary stats.
• .value--md: 1.5rem. Card metrics.
• .value--lg: 2.5rem. Hero numbers.

All values use tabular-nums for better alignment in lists.

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.

Focused Interaction Layer

Overlay .data-slate for critical tasks that require focus.

• 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.

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.

Hover Micro-Interactions

Pure CSS tooltips via data-tooltip attribute.

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

System Activity

Animated sequence for async operations.

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