Khan Academy meets Dive Rite. Math-honest, citation-first, mobile-first. Educational only — never a substitute for certified instruction.
The dark theme reads "underwater" without sacrificing legibility. The light theme is the canvas for printables (Etsy bundles, classroom handouts) and renders cleanly at 300 dpi.
Each semantic color is paired with an icon or shape — never color alone. Red is desaturated and reserved for hard-stop danger; warning is amber, not yellow.
Inter has the highest legibility per pixel on phone screens. JetBrains Mono keeps tabular numbers aligned in calculators, depth tables, and gas-mix readouts — non-negotiable for math-honest output.
Gradient factors scale Bühlmann's permissible supersaturation. GF-Lo controls the depth of the first stop; GF-Hi controls how close to the M-value you surface. Conservative defaults: 30/70 for cold/cardio-loaded dives, 40/85 for benign profiles.
PpO₂ = (FO₂) × (depth/10 + 1)
Source · agency · edition
8-point spacing scale. Radii grow with surface size — pills for chips, lg for cards, xl for hero blocks. Elevation is restrained: one ambient shadow + an optional brand glow for primary CTAs and active calculators.
4 · 8 · 12 · 16 · 24 · 32 · 48 · 64
sm 6 · md 10 · lg 16 · xl 24 · pill
Every tool composes from these blocks. TL;DR card on top, calculator or visual in the middle, citation chips and disclaimers at the foot. Beginner-friendly options visible by default; advanced options collapsed.
TL;DR
At 30 m on air, your no-decompression limit is roughly 20 minutes. Switch to EAN32 and that grows to ~30 minutes — with a hard MOD of 33.6 m at PpO₂ 1.4.
Assumptions: sea-level barometric pressure (1.013 bar). MOD = 10 × (PpO₂/FO₂ − 1). For altitude, switch the calculator's "altitude" expander.
Primary tie-off
Outside the cave, daylight zone.
Secondary tie-off
Inside the entrance, redundant.
Continuous guideline
Unbroken to the team's exit.
Markers
Direction arrows + personal cookies.
Every calculation has a diagram. Pressure-volume, depth-time, gas-fraction — show the relationship before showing the formula.
Volume halves every 10 m of descent below the surface — a non-linear collapse the diagram makes obvious in a way numbers can't.
Descent and ascent rates render as slope; bottom phases as horizontal segments. Conservatism shows up visually — a steep ascent with no stop reads as wrong before any number is computed.
No generic icon set. Every icon refers to something a diver actually sees: cylinder, regulator, fin, mask, line reel, dive computer. Stroke 1.5, rounded joins, 24×24 grid.
When real photography is used, it should feel earned — not stock. Three accepted treatments:
Wide ambient blue, sun rays, divers as silhouettes. Feels open-water rec. Use for landing pages and recreational topics.
Heavy shadow, single primary light cone — wreck, cave, deep tech. Use for technical and overhead-environment topics.
Vector illustration on a clean field — equipment, anatomy, knot diagrams. Use for printables and reference cards.
Avoid: tropical-postcard cliché (a single fish + clear blue) unless the topic is actually about marine life. It reads as stock and dilutes the technical voice. Avoid red filtering — it triggers wrong assumptions for divers used to natural light loss with depth.
Underwater is a slow medium. Animations are 600–1200 ms, ease-out, never bouncy. All non-essential motion respects prefers-reduced-motion. No autoplay, no carousels, no scroll-jacking.
Decorative-only. Disabled when the user prefers reduced motion. Never overlapping content.
Diving misinformation kills. The visual rules below are downstream of that.