Design a dark-mode web interface screen: cyberpunk precision dashboard wrapped in deep obsidian panels with glowing cyan and indigo neon accents.
LAYOUT
The page structure utilizes a persistent slim left rail navigation bar coupled with a wide two-column content layout. The main pane balances a high-impact hero message and isometric illustration on top, followed by partner brand logos and a comprehensive live lead data table. The right column is dedicated to a modular vertical stack of feature discovery cards, integration badges, and compliance guarantees.
PALETTE (use these exact hex values)
- #050811 — Deep Obsidian Base: Primary application background canvas behind all panels and navigation.
- #0b1120 — Card Panel Surface: Container background for data tables, feature tiles, and side widgets.
- #1a2333 — Subtle Surface Border: 1px hairline border separating cards, inputs, and navigation panes.
- #00d2ff — Electric Cyan: Primary action highlight, active icon indicators, and gradient endpoints.
- #7952ff — Vibrant Lavender Purple: Gradient start point for primary CTA buttons and category badges.
- #f8fafc — Primary Text White: High-emphasis text for main titles, headers, and active state items.
- #64748b — Muted Slate Text: Body copy, secondary labels, table headers, and inactive icons.
- #10b981 — Success Emerald: Score badges and positive status indicators in tables.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, system-ui), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 20px heading, 24px heading-lg, 38px display. Tracking -0.02em at display, 0 at body. The typography is technical, analytical, and uncompromisingly modern. Using a clean geometric sans-serif like Inter or Plus Jakarta Sans provides razor-sharp readability in dense data tables and punchy authority across hero marketing headers.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 16px gaps, 32px between sections, 1440px container, comfortable density.
DEPTH
Depth is rendered entirely through subtle tonal surface stepping (from #050811 canvas to #0d1526 cards) paired with 1px hairline perimeter borders. High-importance interactive elements cast delicate, diffused neon glow shadows (e.g., box-shadow: 0 4px 20px rgba(0, 210, 255, 0.15)) rather than conventional dark drop shadows.
IMAGERY
Imagery features glossy isometric 3D server architectures populated with stylized miniature user figures and glowing holographic UI screens. Visuals prioritize high-tech cyan, violet, and magenta light rays against dark metallic surfaces. Flat stock photography or photorealistic landscapes are completely off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone isometric glass server illustration paired with live tabular data cards and neon-tinted app icon squircles creates an unmistakable blend of developer dashboard and enterprise sales pitch. It is commonly misused when cluttered with too many conflicting neon colors rather than strict cyan-purple accents.
MUST
- Use deep obsidian (#050811) and navy (#0b1120) as the foundation for all backgrounds.
- Pair rich dark backgrounds with crisp 1px borders (#1a2333) to maintain container contrast.
- Accent key conversions with saturated cyan-to-purple linear gradients.
- Render data badges and tags with muted alpha-colored fills and bright text labels.
AVOID
- Do not use solid flat white backgrounds or light mode panels anywhere.
- Do not apply heavy drop shadows with dark blurs; use soft colored neon glows instead.
- Do not allow borders to exceed 1px thickness on cards and inputs.
- Do not mix rounded pill buttons with sharp right-angled card boxes.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3312:2480. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
