◆ Colors · Gradients & Atmosphere · v1.0
Light, glow & depth
Three families
linear · radial · mesh

Atmosphere is how MobDial breathes

★  Lime · Cyan · Violet  ★  Glow at 20%·30%·22% opacity

01LINEAR GRADIENTS · diagonal accents
all 135° unless otherwise noted
135°
Signal
★ HERO · CTA
135°
Spark
FEATURE · PRO TIER
135°
Tide
ENTERPRISE
135°
Spectrum
★ HERO HEADLINE
02RADIAL GRADIENTS · soft atmospheric glow
light source from a point
RAD · 30/30
Pulse · Lime
SECTION GLOW
RAD · 70/30
Wave · Cyan
FEATURE GLOW
RAD · 50/50
Aura · Violet
MODAL BACKDROP
180°
Spine
SECTION DIVIDER
03MESH GRADIENT · the signature backdrop
4 blobs · blur(60px) · opacity .7
MESH · AURORA4-blob radial composite · marketing hero only
04OVERLAYS · scrims for image legibility
drop on top of imagery
BOTTOM SCRIM180° · 70% black
DIAGONAL135° · 50% black
VIGNETTEradial · edge fade
FULL DIM180° · 85% void
05GLOW DOTS · the signature element
0 0 24px rgba(c,.6)
LIME★ primary
CYANinfo
VIOLETpremium
REDdanger
AMBERwarn
06SPECS · every gradient & glow as token
CSS-ready
★ G · SIGNALlinear-gradient(135deg,#12FFA0,#00E5FF)HERO · CTA
G · SPARKlinear-gradient(135deg,#12FFA0,#A78BFA)FEATURE · PRO
G · TIDElinear-gradient(135deg,#00E5FF,#A78BFA)ENTERPRISE
G · SPECTRUMlinear(135°,#12FFA0,#fff 50%,#00E5FF)HEADLINE TEXT
G · PULSEradial(circle at 30% 30%,#12FFA0,#10131A 70%)SECTION GLOW
G · AURORA MESH4-blob radial composite · blur(60px)★ HERO ONLY
SCRIM · BOTTOMlinear-gradient(180deg,transparent 40%,#000/.7)IMAGE OVERLAY
VIGNETTEradial(transparent 30%,#000/.7)IMAGE EDGE
★ GLOW · LIME0 0 24px rgba(18,255,160,.6)PRIMARY DOT
GLOW · CYAN0 0 24px rgba(0,229,255,.6)STATUS · INFO
GLOW · VIOLET0 0 24px rgba(167,139,250,.6)PREMIUM
GLOW · RED0 0 24px rgba(255,59,92,.6)DANGER · MISSED