UI/UXSelf-study, 2025

High-Contrast Dark Engineering Design System

RoleUI/UX Designer & Frontend Engineer

StatusCompleted

Last Updated2026-02-15

Design SystemsOKLCH ColorsTailwind CSS v4Typography HierarchyFigma

Open Live Simulator

NOTE ON PENDING ASSETS:Standalone NPM package extraction of core UI primitives is scheduled for Q4 release.

Live Build

Working System & Interface Capture

Dark Code Sandbox interface showing a tab switcher between Code Sandbox and 3D Fluid Wave Simulation, component preset buttons, a green Run Code button, and split HTML editor and live output panes

Bench Build Documentation · Work In ProgressHigh-Contrast Dark Engineering Design System

Topology

System Schematic & Architecture

Engineering Design System Tokens · OKLCH Color Space

Contrast: 14.8:1 (AAA)

--backgroundoklch(0.12 0.015 260)

--primary / signaloklch(0.72 0.17 155)

--copper#059669

--surface-2oklch(0.18 0.02 260)

Fonts: Sora (Display) · IBM Plex Sans · IBM Plex MonoTailwind CSS v4 CSS-First Variables

Telemetry & Bench

Additional Working Interface & Simulator Captures

Interactive Digital Logic Sandbox High-Contrast UIVerified

Overview

Created a complete UI specification and component system tailored for engineering consoles, code visualizers, and data-dense dashboards. Combines architectural typography with electric cyan and signal emerald highlights.

The Problem

Generic UI kits are often overly spacious, low-contrast, or visually exhausting for developers spending 8+ hours on technical workstations.

The Solution

Designed an engineering aesthetic grounded in dark slate backgrounds (`#020617`), high-contrast text hierarchies, monospace telemetry readouts, and accessible OKLCH color accents calibrated for WCAG AA accessibility contrast standards.

Key Features

Dual typography pairing: Sora (display headers) and IBM Plex Mono (telemetry and code)

OKLCH color system providing perceptually uniform brightness across all hues

Ambient glow cards and subtle border highlights for visual depth without noise

Accessible keyboard navigation with high-visibility focus states

Reduced-motion accessibility support across all animated transitions

Engineering Obstacles

Challenges Overcome

Maintaining electric neon cyan vibrancy without causing eye strain during night sessions.

Ensuring flawless cross-browser rendering of CSS backdrop-filter and glassmorphism docks.

Verification & Impact

Results & Verification

High-contrast accessible color choices across all primary interactive elements.

Consistent design language applied across the platform's pages.

Roadmap & Future Extensions

Future Planned Iterations

01.Package component tokens as an open Figma community file

02.Add light mode thermal calibration tokens for outdoor field use

Back to All Projects Discuss a Similar Build →