mesh-gradient-dark-blue-clean

Mesh Gradient Dark Blue Clean

Use When

• The whole page should feel futuristic, premium, clean, and infrastructural.
• A dark-blue mesh gradient should power the composition, not sit behind it as a generic backdrop.
• The interface needs a central hero shell, restrained navigation, floating network hints, framed sections, and slow technical motion.

Direction

Build on a near-black foundation with a deep navy or steel-blue undertone. Place a shader-like mesh gradient, CPPN-style field, abstract WebGL veil, or canvas light field inside the main hero shell. Keep the surrounding system disciplined: crisp typography, thin rails, corner markers, tiny status dots, quiet frames, and sparse node callouts.

This is not an airy blue page. This is not generic glassmorphism. The mesh is the visual engine inside a minimal system shell.

System Recipe

1. Foundation: near-black navy, not flat black.
2. Hero shell: large rounded container with a subtle white-to-transparent gradient border and darker inner fill.
3. Mesh field: blue-led procedural canvas or WebGL layer inside the shell.
4. Typography: white headlines, gray-blue support copy, restrained accents.
5. Navigation: compact dark translucent pill with light edge gradient.
6. Nodes: a few floating glass pills, active dots, tiny labels, and connector lines.
7. Structure: thin vertical rails, corner squares, numeric markers, and framed lower sections.
8. CTAs: one bright solid capsule plus one ghost or glass capsule with a faint border gradient.
9. Motion: slow mesh drift, subtle scan streaks, masked text reveal, or tiny node shimmer.

Color Tokens

:root {
  --mesh-bg: #030712;
  --mesh-bg-blue: #07111f;
  --mesh-shell: rgba(7, 13, 25, 0.82);
  --mesh-shell-inner: rgba(4, 9, 18, 0.72);
  --mesh-line: rgba(191, 219, 254, 0.14);
  --mesh-line-strong: rgba(226, 232, 240, 0.28);
  --mesh-text: #f8fafc;
  --mesh-copy: #9fb2ca;
  --mesh-muted: #64748b;
  --mesh-accent: #dbeafe;
  --mesh-cobalt: #1d4ed8;
  --mesh-indigo: #312e81;
  --mesh-steel: #385a7c;
}