Luminous Spheres v3

Frontier orb design — "Orbs = ONLY place for spectrum colors"

3 semantic variantsSaturated multi-color gradientsblur() + saturate() + contrast()

Frontier Orb Variants

Liminal Warm

Spectrum

Gold → Orange → Pink → Magenta → Violet → Blue

Default AI presence

Liminal Glow

Hero

Warm White → Coral → Peach → Violet → Sky

Hero moments, ownable brand presence

Twilight

Introspection

Ice → Sky → Violet → Purple → Deep Teal

Cool reflection, contemplative states

Liminal Glow — Large Preview

Gradient Stops

5 colors

Blur

40px

Saturate

1.3

Brightness

1.1

Design Principles

✓ Frontier Rules

•Orbs are the ONLY place for spectrum colors
•Use multi-color radial gradients (5-6 stops)
•Apply blur() + saturate() + contrast() filters
•Add filmic grain overlay (22% opacity)
•Ellipse at 35% 35% (off-center highlight)

✗ Avoid

•Don't use single-color orbs (use gradients)
•Don't use spectrum colors elsewhere (ink/paper only)
•Don't use colored glass (white opacity only)
•Don't skip the grain overlay
•Don't use brand palette colors (Violet #8B5CF6, etc.) for orbs

CSS Implementation

/* Liminal Glow Orb */
.orb-glow {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 35% 35%, #FFEECC 0%, #FF7766 12%, #FFAA88 28%, #C4B0FF 52%, #88D4E0 78%, transparent 100%);
  filter: blur(40px) saturate(1.3) brightness(1.1);
}

/* Add grain overlay */
.orb-grain {
  background-image: url("data:image/svg+xml,...");
  opacity: 0.22;
  mix-blend-mode: overlay;
}