Design System v1.0
A design language forged in the earth's crucible. Deep obsidian surfaces meet rivers of molten color, where cracked basalt textures frame ember glows and cooling magma gradients.
01
Drawn from the volcanic spectrum: the incandescent core of molten magma, the warm glow of cooling embers, the absolute darkness of obsidian, and the muted tones of volcanic ash.
Magma Accents
Obsidian Surfaces
02
Three typefaces mirror the volcanic character. Oswald's bold, condensed letterforms evoke basalt columns. Rajdhani bridges strength with readability. JetBrains Mono anchors data in precision.
03
A 4px base unit structures the layout like basalt columns -- consistent, geometric, and grounded. Increments provide rhythm from tight data displays to expansive hero sections.
Extended scale: 12px (--space-3), 24px (--space-5), 48px (--space-7), 96px (--space-9)
04
Interaction elements forged from the volcanic palette. Fill effects sweep like lava flows; glow states radiate ember heat. Disabled states cool to inert stone.
05
Input fields set against obsidian backgrounds with warm ember focus states. The glow intensifies on interaction, like heat radiating from fissures in cooled rock.
Primary identification for geological records
Encrypted seismic station credentials
Location does not match known volcanic zone
Maximum 2000 characters
06
Content containers with animated lava-flow top borders and subtle cracked-earth textures revealed on hover. Three variants span the thermal spectrum from active to cooled.
Standard card component with the default lava-gradient top border. Cracked earth texture patterns appear on hover, revealing the volcanic nature beneath the obsidian surface.
The magma variant signals heightened status with a glowing top border and warm background gradient -- ideal for alerts, active monitoring, or critical data displays.
The obsidian variant is subdued and grounded. Its muted ash-tone top border and darker background suit archival content, secondary information, and dormant system states.
07
System messages mapped to volcanic alert levels. The error state pulses with a living ember glow to demand attention, while informational alerts use the caldera teal for calm acknowledgement.
08
The philosophy behind the volcanic aesthetic.
Begin with deep obsidian and basalt. The darkest backgrounds create depth and make every accent color feel like molten light escaping from fissures in the earth.
Use warm colors with surgical precision. A single lava accent against black is more powerful than a full spectrum. Heat is most visible in darkness.
Nothing in nature is flat. Subtle gradients, grain overlays, and crack patterns give surfaces the tactile quality of actual volcanic rock.
Gentle animations suggest geological processes: slow lava flows, pulsing embers, drifting ash. Movement should feel inevitable and unhurried, like the earth itself.
Typography and layout should feel massive and grounded. Heavy display faces, generous spacing, and strong vertical rhythms channel the permanence of stone.
Use the heat spectrum to signal importance. The hottest colors (gold, white-hot) for critical actions, warm reds for primary, and cool ash tones for secondary information.
FX
CSS animations evoke geological processes -- the slow flow of magma, the pulse of embers, the shimmer of superheated air rising from fissures.