Fluorescence Imaging Design System
Colors drawn from fluorescence microscopy stains. Each channel corresponds to a specific fluorophore excitation/emission spectrum, rendered on a darkfield background.
Clean, scientific typefaces. Instrument Sans for display headings, IBM Plex Sans for body text, and IBM Plex Mono for data readouts, scale bars, and specimen labels.
A 4px base unit spacing system. Consistent intervals maintain the precision expected of scientific instrumentation interfaces.
Instrument panel controls. Primary actions use fluorescent GFP green for visibility against dark backgrounds. Secondary and destructive actions use DAPI and Rhodamine channels.
Input fields for configuring imaging parameters. Clean borders with fluorescent focus states emulate instrument control panels.
Image cards with simulated fluorescence micrographs. Each card represents a captured field of view with metadata and channel information.
Microtubule network visualized via GFP-tagged alpha-tubulin in fixed HeLa cells. 488 nm excitation, 509 nm emission.
DAPI-stained nuclei showing chromatin condensation patterns during mitotic phases. 405 nm excitation, 461 nm emission.
Three-channel composite: GFP-actin (green), MitoTracker Red (magenta), DAPI nuclei (cyan). Confocal z-projection.
Status messages for imaging workflows. Color-coded by fluorescent channel to indicate severity and context.
Grid-based specimen visualization inspired by microplate readers and high-content screening. Each well represents a different experimental condition or staining protocol.
Toggle fluorescence channels on and off to view individual stains or composite overlays. Modeled after microscope software filter panels.
A simulated microscope viewport with CSS-rendered fluorescent cell structures. Demonstrates how cards and panels compose around an imaging workspace.
Navigation components styled as instrument software panels. Monospaced labels with subtle fluorescent active states.
Tabular data presentation for experiment records and measurement results. Channel indicators provide at-a-glance fluorophore identification.
| Image ID | Channel | Exposure | Laser % | Mean Intensity | Status |
|---|---|---|---|---|---|
| IMG-0042 | GFP 488 | 200 ms | 15% | 2,847 | Complete |
| IMG-0043 | DAPI 405 | 100 ms | 8% | 4,102 | Complete |
| IMG-0044 | Rhodamine 561 | 350 ms | 22% | 1,563 | Saturated |
| IMG-0045 | YFP 514 | 250 ms | 12% | 3,291 | Complete |
| IMG-0046 | GFP 488 | 200 ms | 15% | — | Failed |
Core principles guiding this design system, drawn from the rigor and precision of scientific microscopy.
Like fluorescence microscopy itself, content emerges from darkness. The near-black substrate ensures fluorescent accents achieve maximum contrast and visual impact.
Each color serves a distinct semantic purpose, just as each fluorophore binds to a specific target. Green for primary actions, cyan for information, magenta for warnings and destructive operations.
Typography and spacing follow exact scales. Monospaced readouts present data without ambiguity. Every measurement has units, every specimen has a label.
Minimize visual noise. Borders are subtle, backgrounds are restrained, and glow effects are used sparingly to draw attention only where it matters most.