Arctic

A design system inspired by frozen landscapes, crystalline geometry, and the luminous glow of aurora borealis. Cold, pristine, and vast.

Color Palette

A palette of icy blues and glacial whites, accented by the vivid greens and violets of the northern lights.

Ice Core

Ice White
#f8fbff
Ice Pale
#e3f2fd
Ice Light
#bbdefb
Ice Mid
#90caf9
Ice Blue
#64b5f6
Ice Dark
#1e3a5f
Ice Abyss
#0d1b2a

Aurora Accents

Aurora Green
#43e97b
Aurora Teal
#38f9d7
Aurora Violet
#a855f7
Aurora Pink
#f0abfc
Aurora Full
gradient

Type Scale

Outfit provides sharp, clean letterforms with geometric precision befitting an icy landscape.

H1 / 48px / Extra Bold
Glacial Expanse
H2 / 36px / Bold
Frozen Horizons
H3 / 28px / Bold
Crystalline Structures
H4 / 22px / Semibold
Northern light reflections
H5 / 18px / Semibold
Permafrost beneath the surface
H6 / 15px / Semibold / Uppercase
Ice shelf formation data
Body / 16px / Regular
The Arctic landscape stretches endlessly in every direction, a vast expanse of ice and snow that reflects the pale winter sun. Geometric frost patterns crawl across every surface, each crystal a perfect hexagonal lattice that catches the light and scatters it into prismatic shards of blue and white.

Spacing Scale

A 4px base unit scales through ten increments, providing consistent rhythm across all compositions.

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

Button Components

Four button variants reflecting layers of ice: deep, frozen, transparent, and aurora-lit.

Variants

Sizes

Accent Sizes

Form Elements

Inputs with frosted glass backgrounds and crisp focus states inspired by ice refracting light.

Research station identifier

Card Components

Four card variants representing different layers of the arctic: frost, aurora, crystal, and glacial data.

Frost Cards

Ice Formation

Frost patterns emerge as water vapor crystallizes on sub-zero surfaces, creating intricate hexagonal lattices of pure ice.

Glacial Movement

Massive ice sheets flow imperceptibly across the landscape, carving valleys and shaping terrain over millennia.

🌫

Polar Light

The low-angle arctic sun refracts through ice crystals, producing halos, sundogs, and pillars of scattered light.

Aurora Card

Aurora Borealis

Charged solar particles collide with atmospheric gases, producing luminous curtains of green, violet, and pink light that dance across the polar sky.

Crystal Cards

🔬

Core Samples

Ice cores drilled from glaciers reveal atmospheric composition spanning hundreds of thousands of years.

🌊

Tidal Forces

Ocean currents beneath the ice shelf regulate heat distribution and drive the formation of sea ice.

🌑

Polar Night

Months of continuous darkness transform the arctic into a realm of starlight and magnetic phenomena.

Stat Cards

-47
Temp (C)
14.2M
Ice Area (km2)
3.4km
Max Depth
98%
Albedo

Data Table

Structured data display with frosted row highlights and aurora status indicators.

Station Region Temp (C) Ice Depth (m) Status
Svalbard Alpha Norwegian Arctic -28 1,240 Active
Resolute Bay Canadian Archipelago -35 890 Active
Summit Camp Greenland Ice Sheet -42 3,200 Standby
Barrow Station Alaska North Slope -31 620 Active
Vostok Station East Antarctic -58 3,769 Frozen
Ny-Alesund Svalbard -18 480 Active

Badges & Tags

Status indicators and categorical labels with frost and aurora styling.

Thematic

Permafrost Glacial Aurora Active Deep Ice

Semantic

Operational Low Visibility Blizzard Alert Stable

Alert Messages

Notification panels for status updates, warnings, and environmental advisories.

Ice Core Analysis Complete
Sample 47-B has been processed. Atmospheric CO2 data from 320,000 years ago is now available for review in the research portal.
Station Link Established
Satellite uplink to Svalbard Alpha restored. All telemetry streams are operational.
Weather Advisory
A polar vortex event is expected within 48 hours. Sustained winds of 80 km/h with temperatures dropping to -55C. Outdoor operations suspended.
Structural Alert
Seismic sensors have detected calving activity on the eastern ice shelf. Evacuate Zone C immediately.

Design Principles

The guiding values behind the Arctic design system, drawn from the characteristics of frozen landscapes.

01

Crystalline Clarity

Every element should have the precision and clarity of an ice crystal. Eliminate ambiguity. Information should be as transparent as glacial ice, immediately readable and structurally pure.

02

Glacial Calm

Embrace whitespace as the arctic embraces snow. Let content breathe across vast open fields. Restrained color use creates a sense of stillness and focused attention.

03

Aurora Moments

Use vivid color sparingly, the way aurora borealis punctuates a dark sky. Accents should feel earned and luminous, drawing the eye to what matters most.

04

Layered Depth

Like layers of ice and snow, build visual hierarchy through transparency, blur, and subtle elevation. Each layer reveals what lies beneath while maintaining its own structure.

05

Resilient Structure

Arctic architecture must withstand extremes. Build components that are robust across screen sizes, accessible in all conditions, and structurally sound under any content load.

06

Sharp Geometry

Ice fractures along clean planes. Favor precise edges, faceted shapes, and geometric consistency. Every angle and proportion should feel deliberate, like a cut diamond in frozen water.