Design a light-mode website section: frost-glass telemetry floating over silk cyan waves grounding into an obsidian control plane.
LAYOUT
Symmetric single-column hero stacked vertically: pill badge, high-impact centered H1 title, concise subhead, and dual CTA cluster. Flanked on left and right by organically positioned telemetry widgets. The page terminates in a crisp baseline transition into an expansive 5-column sitemap footer anchored by an email capture card on the far right.
PALETTE (use these exact hex values)
- #0A1120 — Midnight Ground: Footer base background canvas providing deep architectural contrast below the hero
- #2B59FF — Electric Royal Blue: Primary brand accent, main CTA background, and badge highlight
- #388EFE — Ethereal Cyan Blue: Luminescent wave highlights, graph lines, and active link states
- #0B1528 — Obsidian Ink: Primary heading typography in the hero section
- #5B6B82 — Slate Body: Secondary description copy in hero section
- #94A3B8 — Footer Muted Link: Footer column navigation links and secondary descriptors
- #10B981 — Success Mint: Telemetry success indicators, checkmarks, and 200 OK badge accents
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans,SF Pro Display,Geist Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 32px heading, 56px display. Tracking -0.03em at display, -0.01em at body. Authoritative yet developer-centric: Inter Display conveys precise, modern infrastructure engineering, while monospaced snippets provide developer trust and rigor. If substituting, choose Geist Sans or Plus Jakarta Sans to preserve the crisp neo-grotesque apertures and tight optical metrics.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created using a layered optical stack: diffuse luminous blue wave vectors sit on the base canvas, translucent glass cards with backdrop-filter blur (16px) float mid-layer, and crisp black typography and vibrant blue buttons sit on top. Subtle multi-stop box shadows with blue tints (rgba(43,89,255,0.06)) produce an anti-gravity weightlessness rather than physical elevation.
IMAGERY
Abstract digital ether: flowing, 3D-rendered silk ribbons rendered in electric blue and cyan translucent mesh. Imagery strictly avoids human photography or literal device mockups, relying instead on clean JSON code frames, SVG sparklines, and latency pill badges floating like live instrumentation.
SIGNATURE DETAIL — the thing that makes this design itself
The floating glass telemetry constellation: translucent code and metric panels with glassy white rims suspended over electric cyan flowing waves. To execute correctly, ensure cards utilize background backdrop blur and semi-transparent white borders that subtly capture the underlying ambient blue waves.
MUST
- Ground luminous, high-key light sections abruptly into deep midnight #0A1120 footers for visual weight.
- Use 1px border highlights with low white opacity (rgba(255,255,255,0.4-0.8)) on all floating glass telemetry cards.
- Pair monospace telemetry text with delicate micro status badges like '200 OK' using mint green dots.
- Maintain generous line heights (1.5-1.6) and high negative space around the central display heading.
AVOID
- Do not use dark or opaque drop shadows; keep shadows tinted with diffused atmospheric cyan or sky blue.
- Do not blend the footer into the hero with a gradient; the horizontal cut must be razor-sharp.
- Avoid heavy uppercase styling for navigation links; use natural Title Case or Sentence Case.
- Never use saturated warm colors (red, orange, yellow) except as micro warning indicators.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub