Design a dark-mode website section: luminescent deep-space infrastructure channeling terabyte telemetry through glass tablets and glowing photon trajectories.
LAYOUT
Symmetrical single-column hero stacked over an expansive perspective visual base. The header floats detached at the viewport top, followed by a centered badge, headline, descriptive paragraph, paired CTAs, and a 4-item capability strip. The lower half is dominated by a full-width glowing stage holding the angled product terminal.
PALETTE (use these exact hex values)
- #03090e — Void Black: Primary page background canvas representing deep space and zero-latency routing.
- #08151f — Console Deep Slate: Background fill for the tilted dashboard console, navbar pill, and status badges.
- #4de3a3 — Laser Mint: Primary action button fill, headline gradient terminus, active status indicators, and progress bars.
- #2cd8d5 — Photon Cyan: High-energy fiber optic light trails, glowing ring pedestal, and map connection nodes.
- #f59e0b — Telemetry Amber: Subtle peripheral warp streaks counterbalancing the cool teal palette.
- #163a44 — Phosphor Border: Subtle translucent border applied to pill tags, cards, and secondary interactive buttons.
- #ffffff — Pure Phosphor: Primary headline text, numerical readouts, and active navigational links.
- #8ba3b5 — Atmosphere Muted: Body descriptive copy, sub-labels, inactive navigation links, and telemetry metadata.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Manrope, DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 24px heading, 54px display. Tracking -0.03em at display, 0.05em at uppercase badges. The typographic tone is authoritative, hyper-modern, and mathematically precise. Plus Jakarta Sans conveys high-speed enterprise reliability through wide apertures and crisp geometry. It avoids whimsical flourishes, anchoring the software in infrastructure-grade utility.
GEOMETRY & SPACING
Corner radii — cards 24px, links 999px, inputs 10px, buttons 10px. Spacing on a 4px unit, 16px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is created through dramatic spatial perspective and multi-layered glow rather than heavy drop shadows. The centerpiece console floats on an isometric tilt above a glowing teal circular ring, backed by atmospheric light sweeps. Overlay HUD cards employ subtle glassmorphism with backdrop blur (16px) and interior hairline highlights.
IMAGERY
Vector-rendered 3D hardware glass slabs blended with optical fiber light flares and world vector dot grids. Motion trails streak horizontally across the dark canvas in turquoise and amber tones. Strictly avoid stock photography or cartoonish flat illustrations; all visuals must feel like precision technical instrumentation.
SIGNATURE DETAIL — the thing that makes this design itself
The angled 3D glass telemetry console resting on a glowing circular emitter ring, bracketed by sweeping fiber-optic velocity trails. Recreate it with a perspective-transformed container, dual-color back-glows (teal and amber), and a luminous 1px mint edge highlight. It is commonly ruined by placing flat, non-angled rectangular screenshots directly on solid black.
MUST
- Anchor visual hierarchy with high-contrast mint (#4de3a3) only on key actions and data completion.
- Use geometric sans typography with tight tracking (-0.03em) on large titles.
- Enclose secondary controls in subtle 1px cyan-tinted borders (#163a44).
- Render complex product telemetry inside a perspective-tilted 3D glass console.
AVOID
- Do not use high-saturation reds or purples that clash with the mint-cyan optical spectrum.
- Avoid flat, untilted dashboard screenshots that ruin the kinetic spatial depth.
- Never set display headings in pure harsh white without a trailing mint gradient blend.
- Do not omit the floating glass nav pill; standard edge-to-edge bars break the floating motif.
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 中尝试