Design a dark-mode web interface screen: mission-critical cloud architecture enveloped in deep midnight canvas with neon cyan laser diagnostics.
LAYOUT
The page adheres to a dual-navigation layout: an 80px fixed vertical rail on the far left, matched with a standard horizontal text-link header on top. The hero splits cleanly 45/55 into a left-hand text stack (badge, title, copy, CTAs, partner trustmark) and a massive floating 3D isometric diorama on the right. Below, a continuous 4-column KPI strip grounds the hero, transitioning into an anchored 'What We Do' showcase card with internal tab pagination.
PALETTE (use these exact hex values)
- #020813 — Void Black: Primary screen background canvas and deepest substrate tone.
- #061224 — Navy Panel: Card backgrounds, vertical rail background, and active container fills.
- #132844 — Border Indigo: Delicate hairline 1px borders on cards, stat dividers, and badges.
- #00a3ff — Cyber Cyan: Primary CTA fill, headline accent words, and active state highlights.
- #00e5ff — Neon Turquoise: Secondary metric figures (98%), subtle glowing underlines, and badge dots.
- #8c52ff — Electric Purple: Accent hues within 3D illustration characters and metric highlights.
- #f0f6fc — Primary Light: Primary headings, active nav items, and primary button typography.
- #8da2ba — Muted Slate: Secondary descriptions, inactive navigation labels, and metric captions.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Montserrat), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 32px heading, 48px display. Tracking -0.02em at display, 0.01em at caption. The typography is clean, ultra-modern, and robotic yet approachable, using a high-clarity geometric grotesque like Inter or Plus Jakarta Sans. Bold weights (600-700) give hero statements substantial visual authority, while muted slate weights (400-500) ensure technical metadata remains clean and readable without competing for attention.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is achieved through luminance rather than shadow casting. Floating elements cast glowing blue/cyan radial ambient gradients onto the dark navy panels beneath them. Surfaces step up from #020813 to #061224 with subtle 1px border strokes (#132844) catching imaginary light from above.
IMAGERY
Visuals consist exclusively of hyper-stylized isometric 3D architectural renders depicting cloud infrastructure, floating servers, conveyor pipelines, and miniature stylized technical workers. Visuals are treated with glowing neon blue screens, translucent glass cubes, and cylindrical data stacks. Photography or flat vector clip art is strictly absent.
SIGNATURE DETAIL — the thing that makes this design itself
The two-tone headline color split (pure white leading into vivid electric cyan) mirrored against a dark, floating 3D isometric data diorama resting on glowing cyan pedestals.
MUST
- Anchor layout with a fixed left utility bar (~80px wide) separated by a 1px deep border (#132844).
- Apply electric cyan (#00a3ff) strictly to key call-to-actions, hero emphasis words, and primary metrics.
- Pair complex 3D isometric digital dioramas with dark, glowing disc pedestals to ground them visually.
- Use 1px hairline borders tinted with deep navy/cyan to define card boundaries without visual clutter.
AVOID
- Do not use high-saturation warm colors like bright red, orange, or yellow across core UI chrome.
- Never use flat 2D line illustrations or generic stock photography; visual identity depends on isometric 3D render art.
- Do not omit the hairline borders on containers—surfaces will blend indistinguishably into the #020813 void.
- Avoid centered text blocks in the hero; keep narrative copy strictly left-aligned facing the visual stage.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2496:3312. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试