Where light meets depth. A design language inspired by the luminous world beneath the glass.
Deep water tones anchor the interface in quiet permanence, while bioluminescent accents and coral highlights guide the eye like creatures drifting through the dark.
Comfortaa brings rounded warmth to display text, like light refracted through curved glass. Inter provides clean readability for the body, steady as a current beneath the surface.
A 4px base unit flows through the system like water through a filtration loop -- consistent, predictable, and always in motion toward harmony.
Glassmorphism buttons with bioluminescent glow. Each variant serves a distinct role in the underwater interface -- from primary reef-teal actions to subtle ghost hints.
Input elements as glass observation panels -- each field a window into the data beneath the surface, rimmed with soft bioluminescent focus states.
Lighting Mode
Glass viewing panels into distinct content environments. Each card is a self-contained exhibit, hovering in the dark like a tank illuminated from within.
Home to 25% of all marine species, reef ecosystems are the rainforests of the sea. Delicate structures built over millennia, teeming with color and interdependence.
Bioluminescent displays drift through a darkened chamber, pulsing with an ethereal glow. Moon jellies and sea nettles trace silent arcs through the blue.
Towering columns of giant kelp sway in the simulated current, sheltering sea otters and garibaldi in a vertical ecosystem of filtered sunlight.
The clownfish navigates its anemone host with practiced ease -- a symbiotic bond where venom meets immunity, and both partners thrive in the reef's complex web of survival.
Beyond the continental shelf, pressure builds and light vanishes. Here, creatures communicate through chemical light -- nature's own fiber optic network in the abyss.
System notifications from the tank monitoring network. Each alert level carries a distinct visual signal -- from calm informational readings to emergency protocols.
Monitoring data presented with the clarity of a well-lit observation ledger. Striped rows emerge on hover like fish passing through a beam of light.
| Species | Tank | Temp | pH | Status |
|---|---|---|---|---|
| Blue Tang | Reef A-12 | 25.2 C | 8.1 | Healthy |
| Moon Jellyfish | Gallery J-04 | 18.0 C | 8.0 | Healthy |
| Giant Pacific Octopus | Deep D-01 | 10.5 C | 7.9 | Monitoring |
| Clownfish | Reef A-07 | 26.1 C | 8.2 | Healthy |
| Sea Nettle | Gallery J-02 | 16.5 C | 8.1 | Quarantine |
Wayfinding elements that guide visitors through exhibits and highlight key information like bioluminescent markers in the deep.
The guiding currents of the Aquarium design system. Six principles that shape every decision, from color choices to component spacing.
Interfaces serve as viewing panels into content. Every container is a window revealing the world within -- never a wall blocking the view.
Like ocean zones from sunlit surface to midnight depths, visual hierarchy emerges from deliberate layering of light and dark.
Against deep backgrounds, accent colors glow like bioluminescent creatures -- vibrant, purposeful, and never overwhelming.
Every transition flows with the smoothness of underwater movement. No jarring cuts, only graceful state changes.
Each section is a curated exhibit. Generous spacing lets content breathe like water between coral formations.
Glow draws the eye like light in dark water. Use it sparingly to guide attention to what matters most.