Design a dark-mode website section: deep obsidian simulation consoles illuminated by vivid violet telemetry particles in an endless digital void.
LAYOUT
The header sits pinned across the top edge with balanced distribution of logo, navigational cluster, and terminal buttons. The body splits into an asymmetric 5:7 two-column hero: the left hosts the tag, headline, narrative paragraph, CTA row, and a 4-item horizontal feature bar; the right displays a tightly clustered 4-panel bento grid of live telemetry viewports. Sweeping curved particle trails flow from the right edge toward the center, tying the layout into a singular cohesive canvas.
PALETTE (use these exact hex values)
- #030407 — Void Black: Primary background color absorbing all surrounding elements
- #0E1015 — Obsidian Slate: Background fill for floating cards, pill badges, and secondary containers
- #1F232D — Hairline Border: 1px stroke defining cards, pill badges, secondary buttons, and divider frames
- #633FE0 — Electric Violet: Brand hero button fill, indicator dots, key highlights, and active telemetry markers
- #9D82F7 — Violet Tint: Eyebrow tag text, secondary neon highlights, and sub-pixel glow tints
- #F3F4F6 — Signal White: Main headline typography, prominent card titles, and high-emphasis labels
- #8A8F9E — Muted Slate: Body copy, unselected navigation links, and tertiary metadata descriptions
TYPOGRAPHY
Typeface Inter Display (or Inter,Plus Jakarta Sans,Geist), weights 400/500/600. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 56px display. Tracking -0.03em on display headers, 0.05em on badges. The typography is clean, ultra-modern, and intensely technical, reminiscent of deep-tech command interfaces and bleeding-edge robotics documentation. Inter or Inter Display provides geometric neutrality with mechanical precision, relying on crisp weight contrast rather than ornamental typefaces. Geist or Plus Jakarta Sans are immediate, seamless drop-in replacements.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Depth is created entirely through optical occlusion, translucency, and hairline boundaries rather than drop shadows. Surface layers stack from a #030407 infinite abyss up to #0A0C11 container panels separated by 1px #1F232D strokes. Foreground floating tags hover cleanly atop simulation modules via semi-translucent backdrop filters and pure black bases.
IMAGERY
Imagery consists of hyper-realistic, desaturated grayscale or low-saturation industrial simulations (shipping container yards, security operation command centers, neoclassical financial buildings at night, autonomous highway night driving). Overlaid elements feature precise computer-vision bounding boxes and violet radar tracking overlays. Consumer lifestyle photography or bright daylight imagery would completely break the aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the combination of the sweeping, curved 3D particle filament stream on the dark canvas juxtaposed against the modular surveillance-style simulation cards. Each card features an integrated internal HUD tag with an electric violet status dot. It is misused when cards are styled with heavy drop shadows or when standard photographic stock is used in place of computer-vision-styled night renders.
MUST
- Keep card outlines strictly to 1px hairline thickness in muted slate (#1F232D).
- Restrict vibrant purple (#633FE0) strictly to primary buttons and status indicator pips.
- Pair ultra-large display titles with generous negative space and tight tracking (-0.03em).
- Use monochromatic, desaturated imagery for simulation viewports with subtle neon violet accents.
AVOID
- Do not introduce warm hues like yellow, red, or orange anywhere in the interface.
- Avoid thick, heavy borders (>1px) around cards or badges.
- Do not use colorful or saturated photography that clashes with the deep-space aesthetic.
- Never drop stark drop shadows; depth is strictly created via hairline borders and dark gradients.
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. 在 DraPub 中尝试 
