Spatial Luminous Design

Spatial & Luminous Design

Depth, light, and material systems that elevate interfaces from flat to three-dimensional. These techniques separate premium products from generic ones.

Purpose

• Provide a consistent 5-layer spatial model for z-axis depth
• Define luminosity techniques with specific CSS values
• Give production-ready glassmorphism across three tiers
• Reference material surfaces as design tokens
• Guide atmospheric color and mesh gradient usage

1. Spatial Depth System (5-Layer Model)

Every element belongs to exactly one layer. Elements never skip layers.

Layer rules:

• Each layer has a consistent shadow depth token (e.g., --shadow-ground, --shadow-floating)
• Parallax ratios create natural depth perception — heavier layers move slower
• Background layer anchors the atmosphere; changing it shifts the entire page mood

Shadow depth tokens:

:root {
  --shadow-ground:     0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --shadow-floating:   0 4px 16px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);
  --shadow-overlay:    0 20px 60px rgba(0,0,0,0.20), 0 4px 16px rgba(0,0,0,0.12);
  --shadow-foreground: 0 8px 32px rgba(0,0,0,0.24);
}

2. Luminosity Techniques

Ambient glow (behind focal elements):

.focal-element {
  box-shadow: 0 0 60px 20px rgba(120, 80, 255, 0.20);
  /* spread: 20–60px | blur: 40–100px | opacity: 15–30% */
  /* color: element's dominant hue */
}

Backlit text (dark backgrounds):

.hero-heading {
  text-shadow: 0 0 40px rgba(120, 80, 255, 0.30);
  /* Creates ethereal, premium feel — use sparingly */
}

Neon effect (3-layer technique):

.neon {
  box-shadow:
    0 0 7px  #7850ff,           /* tight glow */
    0 0 20px #7850ff,           /* medium spread */
    0 0 60px rgba(120,80,255,0.3); /* ambient wash */
}

Rim lighting (overhead light source suggestion):

.dark-card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  /* Simulates light hitting the top edge */
}

Brightness hierarchy rule: The brightest element = highest attention priority. Use filter: brightness() or direct color lightness to control visual hierarchy intentionally.

3. Glassmorphism (3 Tiers)

Implementation pattern:

.glass-medium {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);  /* Safari */
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: var(--radius-lg);
}

Mandatory rules:

• MUST maintain 4.5:1 text contrast ratio over the blurred background — test on varied backgrounds
• Always add border for edge definition (without it, elements float directionlessly)
• Light source direction must match the elevation system
• Dark glassmorphism: swap white rgba for dark rgba values — do not just invert, redesign

4. Material Reference Library

Noise texture (Paper material):

.paper::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,...");  /* SVG noise */
  opacity: 0.015;  /* MAX 1.5% — above this reads as dirty, not refined */
  pointer-events: none;
}

5. Atmospheric Color

Ambient tint: Full-page overlay at 2–5% opacity of brand primary. Creates environmental cohesion and brand presence without competing with content.

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--color-brand-primary);
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}

Content-responsive tinting: Extract dominant color from hero image via canvas getImageData(), apply as page ambient tint. Technique used by Apple Music, Spotify.

Color temperature depth (spatial use):

• Warm colors (red, orange, yellow) → advance toward viewer
• Cool colors (blue, purple, teal) → recede from viewer
• Use intentionally to reinforce z-axis depth, not just for decoration

Chromatic shadows (not pure black/gray):

/* Instead of: box-shadow: 0 4px 16px rgba(0,0,0,0.2) */
/* Use shadow tinted toward complementary of light source: */
.card {
  box-shadow: 0 4px 16px rgba(80, 40, 120, 0.25);  /* purple-tinted for warm light */
}

Time-aware theming (optional, delightful):

• After 6pm: subtle warm shift (hue rotate +5deg, saturation +3%)
• Morning: cool shift (hue rotate -3deg, brightness +2%)
• Implement via CSS custom property update on schedule or user preference

6. Mesh Gradient Patterns

CSS implementation:

.mesh-bg {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(120,80,255,0.4) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(255,80,120,0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(80,200,255,0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(255,200,80,0.2) 0%, transparent 50%);
}

Construction rules:

• Place gradient points at grid intersections (3×3 or 4×4 grid)
• 4–6 color stops per point
• Saturation delta between adjacent stops: 3–5% (subtle variation, not jarring)

Animated mesh:

@keyframes mesh-drift {
  0%, 100% { transform: translate(0, 0); }
  33%       { transform: translate(-20px, 10px); }
  66%       { transform: translate(10px, -20px); }
}
.mesh-point {
  animation: mesh-drift 30s ease-in-out infinite;
  will-change: transform;  /* GPU acceleration */
}

• Animation cycle: 20–40s (longer = more atmospheric, less distracting)
• Always set will-change: transform on animated gradient containers

Stripe's approach: WebGL noise functions via fragment shaders for GPU-rendered organic gradients with minimal CPU cost. Use for high-performance, complex mesh needs.

Anti-Patterns

Validation Checklist

• Every element assigned to correct spatial layer (no z-index guessing)
• Shadow tokens consistent with elevation level
• Glassmorphism tier matches context (subtle/medium/immersive)
• 4.5:1 text contrast verified over glass surfaces on varied backgrounds
• Borders present on all glass surfaces for edge definition
• Ambient glow color derives from element's dominant hue
• Chromatic shadows used instead of pure rgba(0,0,0)
• Noise texture at or below 1.5% opacity
• Mesh gradient animation cycle 20–40s with will-change: transform
• prefers-reduced-motion stops mesh gradient animation