Design a dark-mode website section: deep navy twilight illuminated by cyan stage lighting and crisp floating glass architectures.
LAYOUT
Asymmetric two-column split layout across a 1240px container. Left column contains eyebrow pill, 5-line display typography, explanatory subtitle, dual CTAs, and a horizontal feature checklist. Right column centers an architectural flowchart with a white central card anchored over a cyan glowing podium, capped at the bottom by an invading white shelf.
PALETTE (use these exact hex values)
- #030B1E — Midnight Abyss: Deep blue-black base canvas covering the primary hero background
- #00B2FE — Electric Cyan Glow: Volumetric backlight glow and elliptical floor spotlight highlighting runtime cards
- #5B44E6 — Neon Violet Glow: Secondary atmospheric halo on the extreme right border and logo icon
- #FFFFFF — Pure White: Display headings, primary button surfaces, central card canvas, and bottom sheet
- #7EB6FF — Soft Blue Text: Accent text within the main headline to highlight core value propositions
- #8EA0BE — Muted Slate: Paragraph description text, navigation links, and diagram secondary labels
- #22C55E — Success Green: Running status indicator pill dot inside the runtime card
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans,SF Pro Display,system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 52px display. Tracking -0.03em at display, 0.05em on small caps. Technical, confident, and highly structured sans-serif typography resembling Inter or Plus Jakarta Sans. Tight letter-spacing on display headlines (-0.03em) conveys modern enterprise software polish, while generous line heights (1.5) on slate body copy maintain comfortable readability against the dark void.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Elevation is expressed through luminance contrast rather than dark drop shadows. The backdrop sits at ground zero, peripheral nodes float at mid-level with subtle frosted translucency, while the core runtime block pops boldly forward through opaque white fill and an elliptical cyan stage light underneath.
IMAGERY
The interface avoids photographic elements entirely, relying on precise vector iconography (16px strokes) and schematic system diagrams. Diagrams represent real developer primitives like Slack, Postgres, and S3 without full corporate badges, favoring clean, subdued icons.
SIGNATURE DETAIL — the thing that makes this design itself
The stark opaque white runtime card suspended above a radiant cyan elliptical floor light, directly contrasting against the dark navy glassmorphism surrounding it.
MUST
- Reserve pure opaque white for the primary CTA, the central Runtime card, and bottom transition sheet.
- Use 1px borders with rgba(255, 255, 255, 0.12) to structure floating glass panels.
- Limit cyan text highlights to maximum 2-3 critical keywords in the hero title.
- Ensure the right-hand volumetric glow has a soft radial falloff to avoid harsh banding.
AVOID
- Do not use saturated yellow, red, or orange accent colors anywhere in the hero.
- Never make the peripheral input/output cards solid white; they must stay glassmorphic.
- Avoid heavy drop shadows on dark mode cards; use inner glow and thin strokes instead.
- Do not underline navigation links or CTAs.
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 中尝试 
