Design a dark-mode web interface screen: deep-space midnight canvases ignited by surgical cyan and violet neon accents for high-retention digital education.
LAYOUT
The page follows a balanced two-column asymmetric rhythm within a 1200px container. The hero sets a text/CTA stack on the left opposing an overlapping media and floating-card collage on the right. Below, a three-column horizontal feature strip provides a stabilizing breath before transitioning to an offset bento grid and a symmetrical four-pillar statistics anchor bar.
PALETTE (use these exact hex values)
- #060B14 — Void Canvas: Deepest canvas background providing cinematic contrast across all viewport sections.
- #0B1324 — Surface Raised: Background tone for nested cards, stat bars, and interactive modular containers.
- #111C33 — Surface Elevated: Fill for floating progress widgets and interactive hover states.
- #00D2D3 — Electric Cyan: Primary conversion fill, focused text highlights, and brand identity badge highlights.
- #A855F7 — Neon Violet: Category accents, glowing card highlights, and specialized technical course icons.
- #10B981 — Vibrant Emerald: Validation states, completion metrics, and trust-verification circular badges.
- #FFFFFF — Pure White: Primary display titles, hero headings, and high-emphasis metric numbers.
- #94A3B8 — Muted Slate: Paragraph copy, secondary navigation links, and subtle card subtext.
- #1E293B — Border Trace: Structural 1px outlines separating dark surfaces from base void.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Manrope), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px body-lg, 24px subheading, 36px heading, 52px display. Tracking -0.03em at display, 0em at body. Plus Jakarta Sans delivers an engineered, contemporary voice that balances mathematical geometric clarity with approachable human curves. Its crisp letterforms maintain impeccable legibility on dark glassmorphic backdrops even at 12px sizes. If substituting, Inter or Manrope will preserve the clean, technical European software demeanor.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 999px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is created strictly through surface luminosity stacking rather than blurred drop shadows. The background void (#060B14) sits furthest back, topped by cards in #0B1324 with 1px borders (#1E293B), while floating toasts and buttons use #111C33. Diffuse neon backlights (cyan and purple radial gradients blurred at 80px) project behind key imagery to simulate backlit physical hardware.
IMAGERY
Photography captures real people in warm, ambient, low-light interior environments engaging with laptops, framed in generous 20px rounded containers. This human warmth is deliberately juxtaposed against dark, 3D futuristic isometric wireframes and luminous holographic renders. Flat cartoon vectors, generic corporate cutouts, or harsh daylight stock photography would completely shatter the aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-signature device is the phrase-level cyan text accent in hero titles combined with subtle luminous orbital trace lines curving around card media. It directs reading flow straight to the core offering while visually anchoring floating media tiles to the canvas. Misusing it by coloring whole sentences or cluttering cards with too many vector trails dilutes its high-tech polish.
MUST
- Use solid cyan (#00D2D3) only for prime interactive hooks and selective headline emphasis words.
- Enclose all modular content within dark #0B1324 panels bordered by 1px #1E293B stroke.
- Pair warm, natural human portraits with technical, glowing 3D vector graphics.
- Apply uppercase tracking (0.08em) strictly to sub-14px category eyebrows and labels.
AVOID
- Do not introduce pure white container backgrounds or light card panels.
- Avoid fuzzy, heavy black drop shadows; express depth purely via color contrast and subtle borders.
- Never tint entire headline blocks cyan—reserve color for two words maximum per title.
- Do not use sharp 0px corners; maintain rounded 8px for controls and 16px for cards.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2160:3824. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
