Design a dark-mode website section: deep space computational clarity illuminated by precision cyan and magenta volumetric light beams.
LAYOUT
The hero uses an asymmetric two-column split within a 1240px container: the left 50% accommodates the headline, paragraph, and dual-button cluster; the right 50% houses the vertical isometric stack. The bottom is demarcated by an upward-curving planetary horizon hosting the next section's badge and subtitle.
PALETTE (use these exact hex values)
- #02040A — Deep Void Canvas: Root background canvas providing maximum contrast for floating neon elements
- #090E1D — Midnight Horizon: Curved bottom shelf and secondary module backing
- #2059F6 — Electric Cobalt: High-intent primary action buttons and core interactive states
- #38BDF8 — Laser Cyan: Central axis light beam and particle cloud illumination
- #C043B0 — Spectral Magenta: Secondary edge rim-lighting on stacked system architecture
- #FFFFFF — Optic White: Display headlines, brand logo, and active control labels
- #8F9CAE — Slate Steel: Body copy, architectural tier annotations, and inactive links
TYPOGRAPHY
Typeface Inter (or Geist Sans, SF Pro Display, Plus Jakarta Sans), weights 400/500/600. Sizes 11px caption, 14px body-sm, 16px body, 18px subheading, 32px heading, 56px display. Tracking -0.03em at display, 0.08em at uppercase captions. The typography is cold, precise, and uncompromisingly institutional. Using Inter with tight display kerning evokes high-throughput execution engines, while wide-spaced technical sub-labels resemble avionics or trading terminal readouts.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 120px between sections, 1240px container, comfortable density.
DEPTH
Depth is created purely through luminous optical phenomena rather than traditional drop shadows. Volumetric light cones, dual-sided rim lighting (cyan left, magenta right), and translucent edge strokes simulate dimensional glass discs floating in zero-gravity space.
IMAGERY
The imagery is highly stylized 3D technical illustration rendered with precision ray tracing and particle simulations. Disc layers contain wireframes, data glyphs, and audio wave stems. Avoid stock photography, cartoonish vectors, or organic natural forms entirely.
SIGNATURE DETAIL — the thing that makes this design itself
The central luminous core: a vertical laser beam puncturing four separated glass discs with opposing cyan and magenta edge rim-lighting. If this glowing structural layer stack and its dotted leader lines were removed, the design would instantly lose its high-tech institutional identity.
MUST
- Keep typography tight, left-aligned, and strictly capped to two distinct weights.
- Use pure white solely for high-priority headlines and active button labels.
- Restrain glowing neon light strictly to technical diagrammatic focal points.
- Apply hairline 1px borders using low-opacity white (10-15%) on ghost buttons.
AVOID
- Do not introduce warm color tones like yellow, orange, or olive green.
- Never apply colored glow effects to generic body paragraphs or text links.
- Avoid fully rounded pill shapes for primary buttons; use 8px rounded rectangles.
- Do not center-align the main hero headline when paired with an isometric graphic.
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 中尝试