CERN Detector UI

A React theming system delivers consistent styling across components through predefined color palettes and typography tokens. This Skill provides detector-inspired UI tokens—circular layouts, wire-chamber grids, and particle color language—that you apply directly to React components for a cohesive, information-dense interface without rebuilding styles individually.

UI inconsistency stems from components styled independently without shared patterns. A design system solves this by establishing component patterns, layout templates, color palettes, and typography rules as reusable tokens. This Skill delivers a complete detector-style design system—including 3D workstation controls and detector semantics—ensuring all components follow the same visual language.

Circular and radial layouts excel at displaying dense, multidimensional data in compact spaces. This Skill provides detector-inspired circular components and wire-chamber grid patterns specifically designed for dashboards that communicate status, measurements, and live data in a science-ready aesthetic with minimal visual clutter.

Manually styling each component creates maintenance overhead and inconsistency. A design system—even a basic one—eliminates rework by defining tokens (colors, typography, spacing) once and applying them everywhere. This Skill provides ready-made detector UI tokens to apply across existing and new React components instantly.

Scientific workstation interfaces require specific visual patterns: radial gauges, grid overlays, and particle-inspired color coding. This Skill delivers detector-style UI components and 3D workstation controls—including layout templates and detector semantics—to build interfaces that communicate technical data authentically without designing from scratch.