The Cellular Ripple Effect — Style Guide
The visual system behind the atlas: a dark biological blueprint built for scientific precision. Every value below is read from the live design tokens and palette functions, so this page reflects the application exactly as it renders.
Design Intent
A living blueprint of human therapeutic potential — not a dashboard.
- Scientific and precise — measured type, exact geometry
- Biological — organic hues, cell-like pulse and membrane lines
- Immersive — full-bleed dark field, chrome kept to the edges
- Trustworthy and systems-oriented — hierarchy always legible
- Dashboard or business-intelligence aesthetics
- Pie charts, bar charts, or decorative data ornament
- Gamification or cartoon animation
- Hardcoded colors — all values come from tokens
Color
All color is defined in OKLCH as semantic tokens. Components reference tokens, never literal values.
Generated by wedgeColor(hue) at fixed lightness 0.70 and chroma 0.11, spread evenly around the hue wheel from a 20° offset so no wedge reads as pure red.
Typography
Jost Variable throughout — a geometric sans with razor-sharp light weights. Numerals are tabular; caps styles carry wide tracking.
Mesenchymal stem cells exert therapeutic influence across progressively larger scales of human biology.
Spacing & Layout
Chrome floats at the edges of a full-bleed field. Panels use hairline borders, translucent card fills, and backdrop blur so the map remains the subject.
border-border · bg-card/70 · backdrop-blur · rounded-md
bg-muted
Interaction States
The interactive atlas responds to hover and wheel zoom only. Rotation, dragging, and click-selection are deliberately absent.
Scientific Visualization Conventions
The rules that keep the atlas readable as a hierarchy rather than a decoration.
- Angular span is proportional to condition count — a wedge's width encodes how many indications it holds. No values are normalized or padded.
- Color encodes therapeutic area only. Category and condition rings inherit their parent wedge hue at lower alpha, so lineage is readable at a glance.
- Condition labels in the lower hemisphere (0°–180° normalized) are flipped 180° so every label reads upright.
- The white dot halo outside the condition labels represents the wider indication space, clustered in proportion to each category's weight.
- Ring headers name the level, not the segment — individual segment names surface only on hover.
- Presentation Mode is fully static: no hover, no zoom, every condition label visible, A3 landscape print with exact color reproduction.
Data Provenance
Three JSON sources drive every node, so visual structure is never authored by hand.
The sources describe 325 named conditions across 18 body systems. Presentation Mode states the broader addressable figure of 1,300+ indications, with the dot halo standing in for the unnamed remainder.