Design a dark-mode website section: deep obsidian mission control balanced by pristine white data modules and electric indigo energy filaments.
LAYOUT
The composition follows an asymmetrical two-column hero: left side houses the category pill, 52px headline, body summary, dual CTA buttons, and a 4-column feature row; right side hosts the expansive command center preview. Below the dark hero zone, the layout transitions to a unified full-width white metrics panel. A structured industry logo/icon ticker anchors the very base of the section.
PALETTE (use these exact hex values)
- #05070e — Obsidian Deep: Deepest atmospheric page background for hero section and outer frame
- #ffffff — Dashboard Pure White: Primary surface for interactive application viewport and bottom metric strip
- #111827 — Console Sidebar: Dark vertical navigation bar embedded inside the preview container
- #3d64ff — Electric Cobalt: Primary CTA fill, headline gradient terminal, active pills, and key stat accents
- #8a5cf6 — Neon Violet: Ambient glow backdrop traces, AI star icons, and text accent gradients
- #1e293b — Slate Border: Hairline container outlines, ghost CTA borders, and separator rules on dark canvas
- #ffffff — Text Pure: Primary display headlines, bold labels, and dark-card titles
- #94a3b8 — Text Muted Dark: Subtitles, 4-column feature descriptions, and tag labels on dark canvas
- #0f172a — Text Data Ink: Primary metrics, table values, and card headlines on white surfaces
- #64748b — Text Data Slate: Secondary labels, metric subtitles, and industry category labels
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 10px caption, 12px body-sm, 13px body, 15px body-lg, 20px subheading, 32px heading, 52px display. Tracking -0.03em at display, -0.01em at body, 0.05em at caps. The typography communicates high-velocity enterprise precision, reminiscent of aerospace avionics and financial terminals. The neo-grotesque sans-serif relies on negative tracking at display scale (-0.03em) to convey muscular density, while tabular numbers and crisp 12px-13px labels maintain uncompromising clarity inside dense data tables. Inter or Plus Jakarta Sans are the standard open-source equivalents.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Depth is created through dramatic canvas contrast rather than standard stacked drop shadows. The deep #05070e canvas serves as infinite space, punctuated by soft, luminous laser-like neon blue and violet gradient blurs that wrap around the dominant white (#ffffff) dashboard plinth. The dashboard itself casts an ultra-subtle, expansive 0px 24px 64px rgba(0,0,0,0.35) ambient shadow.
IMAGERY
The imagery is entirely programmatic and product-centric, featuring high-fidelity vector UI representations of operations, telemetry, and copilot interfaces. Photographic assets and figurative illustrations are strictly absent. Any supporting graphic must be clean, geometric, tabular, or schematic to preserve enterprise industrial credibility.
SIGNATURE DETAIL — the thing that makes this design itself
The standout signature is the high-contrast 'light machine on dark void' paradigm—placing an ultra-crisp, bright white operating dashboard and stats plinth over an obsidian backdrop framed by electric violet light threads. To deploy it correctly, let the light card contain complex dense operational information while keeping marketing typography on the dark side. It is misused if the card itself becomes dark or loses its crisp vector edges.
MUST
- Use a stark white (#ffffff) plinth for core operational product UI against the dark backdrop.
- Accent the climax of display typography with vivid cobalt blue (#3d64ff) for instant visual focalization.
- Keep icon outlines clean, geometric, and restrained to 1px-1.5px stroke weight.
- Separate secondary metric columns using razor-thin 1px dividers in #e2e8f0.
AVOID
- Do not use heavy dropped drop-shadows with harsh black blur; keep elevation soft and lighting atmospheric.
- Do not allow the dark theme to make data tables unreadable; keep dense data panels strictly on white.
- Do not mix rounded pill buttons with sharp rectangular cards; maintain 8px for controls and 16px for enclosures.
- Do not use saturated yellow or warm red accents; keep all warm highlights confined strictly to small status pills.
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