Design System · v1.0

Ember
Sky

A design language drawn from the collision of fire and storm — where burning coral meets steel-blue dusk.

01

Color Palette

Deep #1A1424 --ember-deep
Midnight #2B1F35 --ember-midnight
Smoke #4A3A5C --ember-smoke
Dusk #7A5A7A --ember-dusk
Mauve #B08AAA --ember-mauve
Blush #E8B4B0 --ember-blush
Coral #E8724A --ember-coral
Flame #D4522A --ember-flame
Inferno #B83010 --ember-inferno
Sky #6A7FA0 --ember-sky
Steel #8A9AB8 --ember-steel
Mist #C8D4E8 --ember-mist
02

Gradients

Ember Bloom
linear-gradient(135deg, #d4522a, #e8724a 40%, #b08aaa)
Storm Veil
linear-gradient(160deg, #2b1f35, #4a3a5c 50%, #6a7fa0)
Horizon
linear-gradient(180deg, #1a1424, #3a2040 40%, #e8724a)
Cloudcore
radial-gradient(ellipse at 30% 50%, #e8724a, #7a5a7a 50%, #1a1424)
03

Typography

Display Cormorant Garamond
300 · 64px · −0.02em
The sky burns
Display Italic Cormorant Garamond
300 italic · 64px
into cinder
Heading Cormorant Garamond
400 · 36px · 1.1lh
Storm-lit cumulus at dusk
Subheading Syne
700 · 13px · 0.2em
Atmospheric Phenomena
Body Syne
400 · 15px · 1.7lh
The last light of day catches in suspended water vapor, scattering wavelengths into reds and corals that seem to set the clouds themselves alight against the deepening blue of the advancing night sky.
Caption Syne
400 · 11px · 0.05em
Photographed at golden hour · May 2026
Label / Tag Syne
700 · 9px · 0.4em
Atmospheric Event
04

Spacing & Radius

Spacing Scale
--space-1 0.25rem
--space-2 0.5rem
--space-3 0.75rem
--space-4 1rem
--space-6 1.5rem
--space-8 2rem
--space-12 3rem
--space-16 4rem
--space-24 6rem
Border Radius
xs
2px
sm
4px
md
8px
lg
16px
xl
28px
full
pill
05

Buttons

Variants
Sizes
Shapes & States
06

Form Elements

Coordinate format accepted
✕ Please enter a valid email address
✓ Looks good!
Checkboxes
Radio Buttons
Toggles
Range Slider
07

Cards

Vertical Cards
🌅 Live
Dusk Report
Scattered cumulonimbus, firestorm coloring
Sunset illumination at 3,000 ft. Expect vivid reds through 20:14 local.
20:14 local
🌩 Alert
Storm Watch
Pressure drop detected offshore
Cell forming at 28°N. Wind shear moderate. Conditions favor rapid intensification.
48hr forecast
🌫
Air Quality
Particulate haze, visibility reduced
AQI 87 — moderate. Fine particles elevated above the valley floor until 14:00.
AQI 87
Stat Cards
34°
Peak Temp
↑ 3° vs yesterday
87%
Humidity
↓ 5% this hour
4.8
Visibility km
Steady
12
UV Index
↓ Extreme
Horizontal Cards
🔥
Fire Weather
Red Flag Conditions
Low humidity, gusty winds, and dry fuel — critical fire weather through Thursday.
🌊
Marine Layer
Coastal Fog Advisory
Dense fog below 500 ft until 10:00. Use caution on coastal roads.
08

Badges & Tags

Status Badges
Active Storm Critical Monitoring Seasonal Archived
Interactive Tags
Ember High Risk Cumulonimbus Coastal Overcast Low Visibility Seasonal
09

Alerts & Toasts

Inline Alerts
🔥
Fire Weather Watch
Elevated fire conditions through Thursday. Low humidity and gusty north winds expected. Avoid open burning.
⚠
Storm System Approaching
A deepening low-pressure system is forecast to arrive within 36 hours. Prepare for wind gusts up to 55 mph.
✕
Sensor Offline
Station #4 at Ridgeline East has lost connection. Last reading was 4 hours ago. Data may be incomplete.
✓
All Clear Issued
The coastal fog advisory has been lifted. Visibility restored to 10+ km along all monitored corridors.
Toast Notifications
🔥 Fire weather alert issued for your region ✕
✓ Station data synced successfully ✕
✕ Connection to radar feed lost ✕
11

Data Table

Station ID Location Temp Humidity Wind Status Actions
#STN-001 Ridgeline East 34°C 18% NW 42 km/h Alert
#STN-002 Harbor Mouth 22°C 84% SW 14 km/h Normal
#STN-003 Valley Floor 38°C 11% E 28 km/h Critical
#STN-004 Coast Bluff 19°C 92% Calm Fog
12

Misc Utilities

Dividers
Progress Bars
Fire Risk82%
Humidity18%
Storm Probability65%
UV Index91%
Avatars
ES
JW
K
RN
Avatar Group
ES
JW
K
RN
+3
Shadow Scale
sm
md
lg
xl
13

Design Principles

Tension
Warmth versus cold. Fire in storm. Let coral and steel-blue coexist in controlled opposition — never neutralize the conflict.
Depth
Layer transparencies, blurs, and gradients. Dark surfaces should feel atmospheric, not flat — like looking through cloud, not at a wall.
Restraint
Use Coral sparingly. Its power comes from context — a single ember glowing in deep shadow reads louder than a field of orange.
Weight
Pair the featherlight display serif (300) with the bold, mechanical UI font (700+). Contrast in weight creates visual hierarchy without size.