Design System

Coral Reef

A design language drawn from the vivid depths of tropical oceans, where bioluminescent creatures glow in the abyss and coral gardens bloom in every shade of pink, purple, and flame.

01

Color Palette

Drawn from the layered depths of tropical reefs: deep ocean darkness, living coral warmth, anemone purples, and the electric glow of bioluminescence.

Deep Ocean Blues

Abyss #0B1026
Deep Ocean #0F1A3E
Ocean Blue #142952
Ocean Mid #1A3A6E
Twilight Blue #1E4D8A

Coral Pinks & Oranges

Coral Deep #C4496E
Coral #FF6B8A
Coral Light #FF8FA8
Fire Coral #FF4F3B
Coral Orange #FF7B54

Anemone Purples

Anemone Deep #6B2D8B
Anemone #9B4DCA
Anemone Light #C084FC
Anemone Pale #E0C3FC
Kelp #1B7A4E

Bioluminescent Accents

Biolum Cyan #00F0FF
Biolum Blue #4DA8FF
Biolum Green #00FFB2
Seafoam #3DDBB5
Sand #F5E6D3
02

Typography

Soft, rounded typefaces that mirror the organic curves of coral formations and the gentle motion of underwater currents.

Display Quicksand / 40-72px / 700
Reef
Heading 2 Quicksand / 36px / 700
Coral Garden
Heading 3 Quicksand / 24px / 700
Sea Anemone
Heading 4 Quicksand / 18px / 600
Clownfish Habitat
Heading 5 Quicksand / 15px / 700 / UC
Reef Zone
Heading 6 Quicksand / 13px / 700 / UC
Specimen Log
Body Nunito / 16px / 400
The coral reef is one of the most diverse ecosystems on Earth, supporting over a quarter of all marine species despite covering less than one percent of the ocean floor.
Body Italic Nunito / 16px / 400 / Italic
Beneath the surface, a silent city pulses with color and life, its architecture built by organisms no larger than a grain of rice.
Caption Quicksand / 12px / 700 / UC
Depth readings, species classification, and water temperature logs
03

Spacing System

A 4px base unit provides the measured rhythm of ocean currents, creating breathing room between elements like the spaces between coral branches.

--space-xs
4px
--space-sm
8px
--space-md
16px
--space-lg
32px
--space-xl
64px

Extended Scale

--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-5
24px
--space-6
32px
--space-7
48px
--space-8
64px
--space-9
96px
04

Buttons

Interactive elements shaped like polished sea glass, with the warmth of coral, the depth of the ocean, and the glow of deep-sea creatures.

Button Variants

Disabled State

Sizes

Contextual Actions

05

Forms

Data collection instruments for cataloging marine life, recording dive conditions, and documenting the living architecture of the reef.

Checkboxes

Radio Buttons

06

Cards & Panels

Content containers inspired by the layered habitats of the reef, from sunlit shallows to bioluminescent depths.

Standard Cards

Brain Coral

Massive, boulder-shaped colonies with winding grooves resembling the folds of a human brain. Can live for hundreds of years.

Sea Fan

Graceful gorgonian corals that form flat, branching structures oriented perpendicular to the current to maximize filter feeding.

Staghorn

Fast-growing branching coral forming dense thickets that provide critical shelter for juvenile reef fish and invertebrates.

Deep Sea Card

Anglerfish Encounter

At 2,000 meters below the surface, bioluminescent lures pierce the absolute darkness. The deep reef wall gives way to the abyssal plain where ancient creatures drift.

Spawning Event

Once per year, synchronized by the full moon and water temperature, millions of coral polyps release their gametes in a spectacular underwater snowstorm of pink and orange.

Bioluminescent Card

Fluorescent Survey

Under ultraviolet light, the reef transforms into an alien landscape. Corals fluoresce in vivid greens, blues, and reds, revealing hidden patterns invisible to the naked eye.

Night Dive Log

The reef awakens differently after sunset. Octopuses hunt along the substrate, parrotfish sleep in mucus cocoons, and bioluminescent plankton ignite with each passing current.

07

Alerts & Notifications

Critical communications from the reef monitoring station, color-coded like the warning patterns of marine creatures.

Current Advisory

Water temperature has risen 0.5 degrees Celsius over the past week. Monitoring stations have been placed along the fore reef to track thermal stress levels in sensitive coral species.

Recovery Confirmed

Reef restoration zone B-7 shows 40% new coral growth over the past six months. Transplanted staghorn colonies have established successfully with strong polyp extension observed during night surveys.

Bleaching Watch

Sea surface temperatures have exceeded the bleaching threshold for three consecutive days. All research teams should increase monitoring frequency and document any signs of coral stress or pigment loss.

Crown-of-Thorns Outbreak

Population density of Acanthaster planci has exceeded critical levels in sectors C-12 through C-15. Immediate intervention required to prevent catastrophic coral loss. All available dive teams report to station.

08

Badges & Tags

Classification markers as distinctive as the color patterns of tropical fish, providing instant visual identification of categories and status.

Themed Badges

Coral Anemone Bioluminescent Seafoam Default

Status Badges

Healthy Stressed Bleached Monitored

Contextual Usage

Hard Coral Soft Coral Deep Reef Lagoon Protected Endangered Vulnerable
09

Design Principles

The guiding currents that shape every design decision, drawn from the interconnected wisdom of reef ecosystems.

Organic Warmth

Every surface should feel alive with color and texture. Like living coral, our interfaces grow from rounded, approachable forms rather than sharp mechanical edges.

Luminous Clarity

In the darkness of the deep, bioluminescence guides the way. Key actions and critical information should glow with purpose, drawing the eye naturally through the interface.

Layered Depth

A reef is built in layers, from sandy bottom to sun-dappled surface. Our interfaces use transparency, blur, and shadow to create a sense of dimensionality and spatial hierarchy.

Symbiotic Balance

Just as clownfish and anemones thrive together, our color combinations and component pairings must complement and strengthen one another, never competing for attention.

Gentle Motion

The reef sways with the current, never jerks. Transitions and animations should feel as natural as kelp in a gentle tide, guiding users with fluid, unhurried movement.

Resilient Structure

Coral survives storms through flexible strength. Our design system must be equally robust, adapting gracefully to any screen size, content length, or user context without breaking.