Design a dark-mode website section: deep obsidian viewport illuminated by glowing neon blueprints, glass HUD telemetry, and engineering precision.
LAYOUT
Asymmetric two-column split within a large rounded container. The left 45% houses the typographic stack (announcement pill, 3-line display headline, explanatory paragraph, dual CTAs, and security credential badges). The right 55% contains the 3D viewport surrounded by four satellite HUD cards and anchored below by a full-width command input omnibar.
PALETTE (use these exact hex values)
- #060913 — Obsidian Deep: Deepest canvas background fill for the entire hero cockpit viewport.
- #0b1220 — Dark Navy Glass: Fill background for floating telemetry cards, command prompt bar, and secondary buttons.
- #3b82f6 — Electric Cobalt: Primary CTA fill, active text accents, and brand starburst icons.
- #38bdf8 — Hologram Cyan: Circuit node trails, data grid projections, and technical label highlights.
- #1e3a5f — Border Cyan Subtle: Low-opacity cyan tinted borders on glass containers and input badges.
- #ffffff — Pure White: Primary headline text, key card titles, and subsequent content canvas.
- #94a3b8 — Muted Slate: Body paragraph text, navigation links, and unselected status labels.
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans,Geist Sans,SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 28px heading, 40px heading-lg, 64px display. Tracking -0.03em at display, -0.01em at body. Inter Display or Geist Sans conveys severe computational precision, mechanical rigor, and developer clarity. Tight negative tracking (-0.03em) on display sizes delivers an authoritative punch, while neutral subheadings remain invisible until read. If substituting, choose modern sans-serifs engineered specifically for IDEs and telemetry interfaces.
GEOMETRY & SPACING
Corner radii — cards 16px, links 6px, inputs 12px, buttons 10px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Depth is created entirely through optical luminescences rather than traditional drop shadows. Translucent glass surfaces (rgba(11, 18, 32, 0.85)) float over dark space with faint cyan backlights, while glowing coordinate grids and volumetric spotlights under the CAD model establish true spatial layering.
IMAGERY
Centerpiece is a photo-realistic, intricately rendered metallic engineering assembly (planetary gear transmission) illuminated with cyan and cool blue rim lighting. Any alternative imagery must be high-fidelity mechanical CAD models or aerospace assemblies; abstract geometry or cartoon illustrations are strictly prohibited.
SIGNATURE DETAIL — the thing that makes this design itself
The integrated holographic engineering stage: a photorealistic 3D mechanical component surrounded by translucent glass HUD cards connected via hairline cyan telemetry circuits. To implement correctly, keep connector lines ultra-thin (1px) and align card nodes precisely to physical geometry ports, avoiding arbitrary positioning.
MUST
- Use a high-contrast palette of deep obsidian (#060913) against pure electric blue (#3b82f6) and cyan.
- Structure headlines in high-impact short sentences with punctuation, set around 64px bold.
- Enclose all telemetry and HUD elements in glass-morphism panels with 1px translucent borders.
- Connect interface cards to 3D elements using precise cyan dotted leader lines with node circles.
AVOID
- Do not use warm tones (orange, yellow, red) anywhere except critical system error states.
- Avoid flat opaque card backgrounds; every panel must feel like illuminated cockpit glass.
- Do not make connector lines solid or thick; they must be delicate 1px dotted or hairline strokes.
- Never use serif or casual handwriting typefaces; stick exclusively to engineered neo-grotesks.
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 
