Design a dark-mode website section: deep midnight canvas anchored by electric blue bloom, crisp tabular telemetry, and structured dark-mode navigation.
LAYOUT
Two-tier vertical layout: a hero section up top spanning 1280px with a 50/50 split between headline/CTA left-hand copy and the illuminated telemetry dashboard on the right. Below, a comprehensive multi-column footer is separated by a full-width hairline border (#1E293B). The footer layout features brand details on the left, four navigation columns centrally, and a newsletter input box pinned to the far right.
PALETTE (use these exact hex values)
- #030712 — Obsidian Deep: Global primary canvas background for hero and footer sections
- #080E1A — Console Surface: Background fill for the floating telemetry dashboard container
- #0B1528 — Card Inset: Internal metric tiles, input fields, and icon button backgrounds
- #0084FF — Electric Azure: Primary CTA fill, headline emphasize gradient anchor, and volumetric back-glow
- #38BDF8 — Cyan Accent: Accent text on headline ('Ship it on Playabl.') and highlight icons
- #22C55E — Telemetry Neon Green: Live status indicators, positive delta percentage metrics, and sparklines
- #FFFFFF — Crisp White: High-impact headers, stat numbers, and primary action text
- #94A3B8 — Muted Slate: Body paragraphs, footer navigation links, and descriptive captions
- #1E293B — Border Stroke: 1px hairline borders delineating cards, inputs, and section dividers
TYPOGRAPHY
Typeface Inter (or Geist Sans, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 24px heading, 48px display. Tracking -0.03em at display, 0 at body. Clean, highly technical, and assertive sans-serif (Inter or equivalent neo-grotesque). Display type is set at tight tracking (-0.03em) with bold weight to project platform confidence. Body and metric fonts adopt neutral, tabular clarity suitable for developer tools and high-frequency analytics.
GEOMETRY & SPACING
Corner radii — cards 16px, links 6px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created using colored optical luminescence rather than physical drop shadows. The live dashboard card floats over an intense radial-gradient bloom of electric blue emerging from the background center. Secondary elevation within the dashboard relies on nested flat planes (#0B1528) separated by crisp 1px strokes.
IMAGERY
Avoid photographic realism; visual assets are technical, tabular, and abstract. Key visual artifacts include minimal green vector sparklines, a cyan-dotted world map matrix, and 24x24px game avatar thumbnails. Any added graphics should feel like live real-time server telemetrics.
MUST
- Use deep obsidian (#030712) as the true canvas to maximize contrast with neon cyan and green accents.
- Restrict bright electric blue (#0084FF) strictly to conversion buttons, key headline highlights, and atmospheric back-glow.
- Set telemetry borders to precise, delicate 1px line-weights in dark slate (#1E293B).
- Keep footer column headers at 14px bold with muted 13-14px links in a 12px vertical stack gap.
AVOID
- Do not introduce warm colors like orange, yellow, or magenta; they will compromise the cyber-infrastructure aesthetic.
- Avoid heavy drop-shadows with pitch-black opacity; use diffused colored blooms (rgba(0,132,255,0.3)) instead.
- Do not use high-contrast white text for body paragraphs; keep body strictly muted in #94A3B8.
- Never omit the subtle 1px divider line or structural borders between dark background levels.
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 
