Design a dark-mode website section: translucent device slabs resting on a glowing pedestal in deep midnight space.
LAYOUT
Asymmetric two-column split: left column stacks the status dot, three-line display headline, explanatory copy, CTA dual-button row, and micro-reassurances. Right column holds the angled luminous device dock. The composition resolves below in a full-width three-column horizontal feature strip.
PALETTE (use these exact hex values)
- #020408 — Obsidian Void: Absolute background canvas absorbing light across the entire viewport
- #08111d — Subsea Plinth: Molded foundation pedestal hosting hardware device models
- #1ea0f5 — Electric Azure: Primary CTA fill, active interactive elements, and bottom highlight halos
- #00f0ff — Cyan Luminescence: Refractive glass edges, device bevel illumination, and inner ring lighting
- #34d399 — Signal Mint: Micro eyebrow status indicator and inline checklist checkmarks
- #ffffff — Starlight White: High-impact headline text and prominent hardware brand silhouettes
- #849bb5 — Atmospheric Blue: Supporting paragraph text, descriptive sub-bullets, and quiet labels
- #0f2035 — Abyssal Hairline: Dividing horizontal rule and vertical metric partition lines
TYPOGRAPHY
Typeface Inter Display (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 56px heading. Tracking -0.03em at headline, 0.08em at eyebrow caps. Engineered, authoritative, and direct. The compact grotesque sans-serif with negative letter tracking lends a modern high-performance infrastructure tone, reminiscent of elite developer tooling.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created purely through luminous optical phenomena rather than drop shadows. Translucent glass slabs catch intense edge highlights from below, while the dark plinth casts an ambient indigo halo over the pitch-black stage.
IMAGERY
Abstracted, isometric glass slabs standing upright to represent distinct client operating systems (Apple, Android, Chromium). Rendered with edge luminescence and minimal frosted surfaces rather than literal hardware frames or screenshots.
SIGNATURE DETAIL — the thing that makes this design itself
The edge-lit glass smartphone slabs arranged in isometric depth on a rounded cybernetic podium, casting an aquatic blue halo into void-black negative space.
MUST
- Reserve vibrant cyan (#00f0ff) strictly for light rims, glows, and key CTA fills.
- Color-code the final headline phrase in an azure gradient to visually conclude the thought.
- Use subtle 1px translucent borders (rgba(255,255,255,0.08)) to delineate dark surfaces from pure black.
- Keep device mockups abstract, glassy, and edge-lit rather than photorealistic hardware renders.
AVOID
- Never use pure white backgrounds or light mode frames; the neon glow depends on deep black.
- Avoid muddy drop shadows; use radial cyan glow blending (screen or linear dodge) instead.
- Do not fill secondary buttons with solid colors; they must remain translucent ghost outlines.
- Never make feature list icons larger than 16px; they are reassurance cues, not hero illustrations.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
