Design a dark-mode website section: industrial robotics meet refined telemetry through deep obsidian glass and vivid phosphor-green accents.
LAYOUT
The composition uses a powerful centered vertical pyramid anchored between two convergent robotic arms. Starting at the top, a slender 64px navigation bar introduces the brand, descending into a centered announcement pill, an oversized two-line display title, concise descriptive body text, paired action triggers, and a proof line. The bottom third is dominated by a centered, overlapping telemetry HUD card flanked by warehouse conveyors.
PALETTE (use these exact hex values)
- #03070e — Obsidian Base: Deep structural background absorbing edge bleed from industrial warehouse backdrop
- #07101b — Telemetry Glass: Semi-translucent dark slate container background for HUD telemetry and status cards
- #27d98d — Phosphor Mint: Primary interactive CTA fill, key headline highlight, active status nodes, and metric waves
- #38bdf8 — Cyan Resonance: Secondary sparkline graph stroke and subtle lens reflections across hardware
- #f97316 — Pulse Amber: Pill badge pulse indicator dot and launch highlight text
- #ffffff — Primary Frost: Primary display headings, primary CTA text, and high-priority numerical stats
- #8a99a8 — Muted Slate: Body copy, navigation links, inactive metric subtitles, and secondary iconography
- #1e293b — Subtle Wireframe: Delicate borders on translucent pill badges, metric dividers, and ghost buttons
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,SF Pro Display,Geist), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 26px heading, 56px display. Tracking -0.025em at display, +0.06em at uppercase caption. Engineered, clinical, and reassuringly precise. The grotesque sans-serif provides crisp legible contours at 11px uppercase for operational status codes while delivering assertive commercial punch at 56px. The balance of tight display tracking (-0.025em) and spacious telemetry tracking (+0.08em) communicates state-of-the-art computational control.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created strictly through optical layering rather than heavy drop shadows. The background features deep atmospheric perspective with darkened factory edges, upon which glass HUD cards sit with 1px delicate translucent outlines and subtle dark-room backdrop blurs (backdrop-filter: blur(16px)). Glowing phosphor elements cast soft, localized radial ambient blooms into the dark navy void.
IMAGERY
Photorealistic 3D robotic articulated arms rendered with factory-grade matte white and brushed dark composite textures, positioned symmetrically along conveyor belts. Industrial environments are kept moody and low-exposure with cinematic cool-blue overhead lighting. Clip art, flat vectors, or consumer-style robotic mascots would destroy the technical credibility.
SIGNATURE DETAIL — the thing that makes this design itself
The dual robotic arm framing converging inward toward a floating central telemetry card with luminous dual-curve sparklines. This visual bridge immediately connects physical industrial automation with real-time software intelligence. It is misused when floating generic software UI over arbitrary stock photography without hardware spatial alignment.
MUST
- Use phosphor mint (#27d98d) exclusively for primary CTA buttons, positive telemetry, and the key headline clause.
- Maintain strict symmetry with flanking hardware imagery to draw eye focus directly into the central HUD card.
- Render micro-labels and system tags in uppercase tracking (+0.08em) at 11px for authentic industrial HUD tone.
- Pair rich volumetric black backgrounds with subtle backdrop blurs (12px to 16px) on glass surfaces.
AVOID
- Never use pure white backgrounds; the entire atmospheric identity collapses without deep dark-room contrast.
- Do not style both CTA buttons with solid fills; secondary actions must stay outlined or ghosted.
- Avoid fully rounded pill buttons for primary CTAs; use 10px rounded rectangles to maintain industrial crispness.
- Never use generic corporate photography; robotics imagery must feel physically integrated into the page geometry.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub 
