CHRM-MID◆Midnight Editorial
AtmosphereSartorial Silence
Accent—
Radius—
Shadow—
Surface—
📖Lexicon🔬Lab
001▲
THE CHROMOLOGIUM LABORATORY5 EXPERIMENTS · INTERACTIVE

The Design Systems Laboratory

Interactive workbenches for exploring the invisible physics of interface design — motion dynamics, perceptual accessibility, component state machines, typographic scales, and acoustic feedback.

LAB-01Physics
⚡

Spring Physics & Spatial Workbench

The Mathematics of Motion & Tactile Momentum

Manipulate stiffness, damping, and mass to engineer the precise feel of interface motion. Drag, flick, and toss a live specimen to experience how each Visual Movement calibrates its physics.

  • ◆Adjustable stiffness, damping & mass
  • ◆Draggable & flickable test specimen
  • ◆Movement-aware physics presets
  • ◆Export as CSS / Framer Motion / React Spring
Enter Experiment →
LAB-02Perception
👁

Perception & Vision Simulator

Optical Filters & Cognitive Accessibility

Apply real-time perceptual filters to any Visual Movement. Test color vision deficiencies, ambient lighting conditions, and live APCA contrast scores across every surface.

  • ◆Color vision deficiency simulation
  • ◆Ambient lighting environment presets
  • ◆Live APCA contrast scoring
  • ◆Side-by-side original vs. filtered view
Enter Experiment →
LAB-03Components
⬡

Component State Matrix

Synchronized Multi-State Testing Array

Render any component across all 6 fundamental interaction states simultaneously. Adjust global tokens and watch Default, Hover, Active, Focus, Loading, and Disabled adapt in lockstep.

  • ◆6-state synchronized grid
  • ◆Global token manipulation sliders
  • ◆Component type selector
  • ◆Live computed CSS inspector
Enter Experiment →
LAB-04Typography
Aa

Fluid Typography & Modular Scale

Typographic Rhythm & Variable Font Engineering

Engineer type hierarchies with live modular scale ratios, variable font axes, viewport-responsive clamp() formulas, and baseline grid alignment visualization.

  • ◆Modular scale ratio selector
  • ◆Variable font axis sliders
  • ◆Viewport resize simulator with clamp()
  • ◆Baseline grid overlay toggle
Enter Experiment →
LAB-05Acoustics
🔊

Acoustic Design Soundboard

UI Sound Synthesis & Haptic Tone Calibration

Design interface sounds from first principles. Shape waveforms, tune harmonic intervals, sculpt ADSR envelopes, and audition how each Visual Movement voices its feedback.

  • ◆3×3 interactive trigger pad
  • ◆Waveform & harmonic interval controls
  • ◆ADSR envelope shaper
  • ◆Visual oscilloscope display
Enter Experiment →

Each experiment responds to the current Visual Movement. Switch movements in the Telemetry HUD to see how physics, perception, and sound calibrate across aesthetic systems.