Design a dark-mode web interface screen: deep cybernetic abyss balanced by atmospheric neon glows, luminous conduits, and crisp geometric cards.
LAYOUT
The viewport uses a dual layout structure: a thin 72px persistent vertical rail on the left, paired with a main content area wrapped in a standard container. Inside the main canvas, the top bar hosts brand text on the left and utility nav with a solid pill CTA on the right. Below, a split hero balances typographic error copy on the left against the 3D diorama on the right, grounded by an equal three-column card grid along the bottom.
PALETTE (use these exact hex values)
- #060b13 — Void Abyss Canvas: Primary background tone absorbing all outer viewports and sidebars
- #0a1322 — Card Trench Surface: Background fill for lower navigational recovery cards and side navigation highlights
- #162238 — Subtle Structural Border: Sub-pixel borders bounding recovery cards, search pills, and divider outlines
- #00f0ff — Cyber Cyan: Primary interactive accent used in glowing buttons, icon rims, and spotlight highlights
- #ff3870 — Error Magenta: Status accent appearing in error indicator dot, dead screen face, and help action link
- #8b7eff — Ethereal Lavender: Gradient transition midpoint in heading and card search icon hue
- #ffffff — Pure Starlight: High-priority headings, brand logo, and active card titles
- #7f93ad — Muted Nebula Blue: Explanatory body paragraphs, inactive navigation items, and footer reassurance copy
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Outfit, Urbanist), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 20px heading, 54px display. Tracking -0.03em at display, 0.01em at body. The typography is technical, contemporary, and engineered, employing a clean geometric sans-serif (resembling Plus Jakarta Sans or Inter). Wide letter-spacing on uppercase tags adds precision and urgency, while the large tight-tracked heading softens technical severity. Freely available Google Fonts substitutes like Inter or Space Grotesk easily maintain the high-tech digital atmosphere.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 9999px, buttons 9999px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is created entirely through optical luminous lighting rather than traditional drop shadows. Elements pop forward by catching 'light' from cyan and magenta neon sources, with low-level cards utilizing translucent border strokes (#162238) against a pitch dark canvas (#060b13). Glowing elements use multi-stop radial box-shadows with low opacity (15-30%) to simulate physical light diffusion.
IMAGERY
Features dark-mode 3D isometric sci-fi digital artwork rendered with ambient light pools. A spotlight casts a dramatic directional cone of teal light onto digital terrain, illuminating an error-state monitor displaying a glitching pink dead emoticon and an illuminated book with code tags. Flat photography or busy multi-color illustrations are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable signature is the triad of targeted bioluminescent glows—cyan, lavender, and hot pink—punctuating an otherwise lightless abyssal navy, particularly manifest in the two-tone gradient headline 'Not Found' and the neon terminal diorama.
MUST
- Use saturated cyan and magenta only as focused spotlights or indicator points against the deep black-navy.
- Maintain high-contrast white text for primary headlines while keeping secondary descriptive text below #8b9bb4.
- Apply 9999px pill radii to all call-to-action buttons while maintaining 16px soft rectangles for cards.
- Keep card outlines faint (1px at roughly 20-30% opacity) so edges dissolve naturally into darkness.
AVOID
- Do not use solid bright white backgrounds or light grey card surfaces anywhere in the interface.
- Never apply harsh drop shadows; all depth must be achieved through luminous radial glows and border highlights.
- Avoid colored backgrounds on large surface areas—color is strictly for light sources, text gradients, and interactive strokes.
- Do not use sharp 0px or 4px radii on interactive buttons; they violate the sleek capsule language.
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 中尝试 
