Design a dark-mode web interface screen: precision dark analytics framed by orbital glow lines and vivid cyan pulse triggers.
LAYOUT
The page adheres to a centered 1200px grid with a clear linear vertical rhythm spaced by 48-64px gaps. The hero is split into two balanced columns: value proposition and email capture on the left, interactive floating device ecosystem on the right. Below the hero, features follow a consistent, modular bento format where the narrative sits on the left and live visual telemetry sits on the right.
PALETTE (use these exact hex values)
- #030812 — Obsidian Void: Root page background canvas providing maximum contrast for floating glowing elements
- #071322 — Midnight Bento Surface: Large section container surface background across hero feature showcases
- #0d1f35 — Sub-Widget Dark: Nested dashboard tiles, metric overviews, and chat bubble backgrounds
- #162b47 — Divider Stroke: Precision 1px strokes around outer cards, data panels, and input borders
- #00a3ff — Electric Cyan: Primary brand CTA buttons, selected accent text, and support pillar iconography
- #00d68f — Mint Phosphor: Startup persona badge, positive growth percentages, and feedback sparklines
- #e040fb — Neon Fuchsia: Marketing persona badge, conversion metrics, and revenue timeline chart lines
- #ffffff — Text Crisp White: Display headings, numeric values, and primary interface labels
- #8ba1b7 — Text Muted Slate: Supporting descriptions, field placeholders, chart legends, and metadata tags
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 24px subheading, 32px heading, 44px display. Tracking -0.02em on headlines, +0.12em on uppercase eyebrows. The typography is clinical, modern, and razor-sharp, communicating enterprise reliability combined with developer-grade agility. Tight negative tracking on display titles gives a confident, condensed tech aesthetic, while wide tracking on uppercase captions provides aerospace-grade categorization. Inter Display or Plus Jakarta Sans perfectly preserves the geometric balance without becoming quirky.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is created purely through luminous layering and luminance steps rather than diffuse drop shadows. The background sits at near-black #030812, stepping up to #071322 for major bento panels, and #0d1f35 for actionable widgets. Floating elements like the mobile copilot simulate elevation via ambient radial color bleeds and orbital glowing vector rings.
IMAGERY
Imagery avoids stock photography entirely, relying instead on high-fidelity synthetic UI previews, glass-like copilot dialogue bubbles, and vector app iconography. Floating mockups are rendered in perspective with subtle 3D rotational tilt and cyan-tinted atmospheric backlights. Realistic customer photos or busy real-world scenes are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive thematic signature is the concentric glowing category badge matched to an internal dashboard telemetry widget in the same accent hue. Each row introduces its persona with a dual-ring circular emblem (e.g. mint for startups, fuchsia for marketing) and echoes that precise neon hue in the adjacent data sparkline. Misusing this by introducing multi-colored gradients inside a single row completely erodes the organized analytical structure.
MUST
- Use uppercase 11px text with +0.12em tracking strictly for metadata eyebrows and category tags.
- Enclose all feature stories inside a single rounded #071322 card with a 1px #162b47 border.
- Assign exactly one thematic neon accent (mint, cyan, or fuchsia) per feature row.
- Maintain high contrast by keeping primary KPI metrics in pure #ffffff against #0d1f35 panels.
AVOID
- Never use white or light surfaces; the design relies completely on dark luminescent layering.
- Do not mix multiple accent colors within a single row's badge and graph lines.
- Avoid thick button borders; keep interactive strokes strictly to 1px #162b47.
- Never use saturated warm colors like yellow, red, or orange except for critical alerts.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1376:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
