Style Guide
A design system inspired by the Northern Lights — ethereal curtains of luminous color dancing across the dark arctic sky, casting an otherworldly glow over frozen landscapes.
01 / Color Palette
Colors drawn from the phenomena of charged particles colliding with atmospheric gases — greens from oxygen, purples and pinks from nitrogen, all against the deep polar night.
02 / Typography
Syne delivers bold, geometric display text with character. Space Grotesk provides clean, technical body copy suited to the cold precision of arctic conditions.
03 / Spacing
A 4px base unit creates measured rhythm across the interface, like the precise distances between bands of aurora light in the sky.
04 / Buttons
Interactive elements that glow with aurora energy. Each button variant draws from a different band of the Northern Lights spectrum.
05 / Forms
Input fields with aurora glow on focus, like instruments gathering data from geomagnetic storms across the polar regions.
06 / Cards
Content containers that float against the dark sky like frosted glass windows, each topped with a faint aurora-edge glow.
Track real-time solar wind data from the ACE satellite. Predict aurora visibility based on interplanetary magnetic field orientation and particle density.
Tonight's forecast shows KP 6+ activity with clear skies expected over northern Scandinavia. Excellent viewing conditions predicted.
Ground-based magnetometer readings from stations across the auroral oval. Detect substorm onset and track magnetic disturbances in real time.
07 / Alerts
Notification messages from observation stations across the auroral zone, each severity level mapped to a band of the aurora spectrum.
Philosophy
The guiding lights of the Aurora Borealis design language.
The deep polar night sky provides infinite depth. Dark backgrounds ensure that aurora colors sing with maximum vibrancy and contrast, just as they do in nature.
Every interactive element emits soft luminescence. Glows and shadows in aurora hues create an otherworldly atmosphere that invites exploration without overwhelming.
Animations are slow, sweeping, and organic. Like the Northern Lights themselves, movement should feel natural and mesmerizing, never abrupt or mechanical.
Beneath the flowing aurora, the arctic landscape is crisp and exact. Typography, spacing, and structure maintain sharp clarity against the ethereal backdrop.