Design a dark-mode website section: cosmic deep indigo canvas wrapped around bioluminescent halftone particle vortexes and crisp developer cards.
LAYOUT
Asymmetric two-column split hero layout spanning 1360px. The left column holds the brand headline, paragraph description, CTA button row, and tri-column micro-features. The right column is entirely dominated by the planetary halftone vortex with the floating API code terminal embedded at its gravitational center.
PALETTE (use these exact hex values)
- #040711 — Canvas Obsidian: Deepest background base absorbing the halftone particle clouds
- #0A1022 — Glass Panel Surface: Background fill for the interactive code execution terminal card
- #3D6CF6 — Primary Indigo Accent: Primary CTA fill, glowing halftone particles, and hero header gradient text
- #7089FA — Periwinkle Glow: Gradient stop for hero headline 'Intelligence' and active hover states
- #38D9A9 — Electric Aqua: Status indicator success dot, terminal execution dot, and first feature badge
- #F06595 — Hot Magenta: Feature badge icon background and peripheral dust cloud particles
- #FFFFFF — Text Primary: Main headline words, active link labels, button text
- #94A3B8 — Text Muted: Body copy, navigation links, secondary feature descriptions, code punctuation
- #1E293B — Border Subtle: Ghost button border, terminal card edge stroke, and subtle dividers
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px heading, 72px display. Tracking -0.03em on headline, 0 on body. Utilitarian, developer-native, and hyper-precise. Inter provides the clean corporate sans foundation, while JetBrains Mono delivers high-legibility code representation that emphasizes engineering rigor and robotic precision.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 96px between sections, 1360px container, comfortable density.
DEPTH
Depth is created purely through luminous layering and ambient stipple particles rather than traditional box shadows. The code terminal card sits directly over the glowing planetary disc with a 1px stroke (#1E293B) and deep translucent fill, appearing to levitate in dark orbit.
IMAGERY
A striking circular vortex of generative halftone stippling in shades of electric royal blue, aquamarine, and deep indigo with swirling fluid clouds. Particles degrade naturally into cosmic black at the margins. Any generic 3D human hand or robot illustration would completely destroy the aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The massive circular generative halftone stipple accretion vortex swirling in royal blue and cyan behind the floating API terminal. Recreate it with dense concentric stipple dot patterns blending into fluid organic nebulae, never flat vector rings.
MUST
- Keep the primary headline tightly kerned with line 2 strictly highlighted in indigo/periwinkle.
- Render the code terminal card as a dark translucent layer overlapping the generative halftone disc.
- Use solid 8px border-radius consistently for primary buttons and documentation triggers.
- Maintain high contrast between pure white headings and muted slate secondary text (#94A3B8).
AVOID
- Do not use sharp 0px or full pill 999px radii on the main action buttons; stick to 8px.
- Never replace the halftone stipple texture with a flat linear gradient or standard stock photo.
- Avoid light mode variants; the entire interface aesthetic relies on deep black space luminance.
- Do not color the entire headline; only the middle word receives the electric gradient.
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 中尝试