Design a dark-mode website section: precision synthetic agent testing encapsulated in deep void navy with glowing teal orbital trajectories.
LAYOUT
The layout is strictly stacked and centered at top, transitioning into a multi-column grid below. The hero CTA occupies the top half within a constrained 1200px container, housing a vertical stack: kicker, headline, body, button row, and a 3-part metric strip. Below a 72px gap, the footer unfolds horizontally into a 6-part arrangement (brand summary, four link columns, newsletter) finished by a two-sided baseline legal bar.
PALETTE (use these exact hex values)
- #020611 — Cosmic Void Canvas: Root page background behind the floating CTA card and base for the global footer section
- #061325 — Orbital Pod Surface: Background fill of the primary CTA card container, layered over subtle celestial gridlines
- #122744 — Subtle Struct Border: Defines outer boundary of CTA card and dividers within the feature highlight strip
- linear-gradient(180deg, #2f81f7 0%, #1a56db 100%) — Telemetry Cyan Primary: High-visibility primary action button background with soft top-edge inset highlight
- #34d399 — Signal Mint: Monospace-styled status kicker, active simulation beacons, and particle glow coordinates
- #f8fafc — Text Primary: Display headings, primary button label, and strong company wordmark
- #94a3b8 — Text Secondary: Card body paragraph, feature labels, and newsletter explainer text
- #64748b — Text Muted Link: Footer navigation links, copyright notice, legal items, and input placeholders
TYPOGRAPHY
Typeface Inter (or Geist Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 44px display. Tracking -0.02em at display, 0.08em at micro-mono uppercase. Engineered, analytical, and authoritative. The clean sans-serif typeface functions as an objective telemetry HUD, using tight negative tracking on the headline to convey modern technical solidity, and loose tracking on uppercase micro-labels to mimic terminal diagnostic outputs.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 72px between sections, 1200px container, comfortable density.
DEPTH
Depth is created purely through luminous light emission rather than drop shadows. The card acts as an ambient light box against the pitch-black void, using an inner cyan gradient wash and glowing particle beads along faint orbital wireframe paths to simulate spatial volume.
IMAGERY
Vector-based celestial telemetry: faint perspective grids intersecting with concentric orbital ellipses and localized glowing cyan data nodes. No photographic imagery, textured 3D renders, or human portraits are permitted.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the floating orbital card—a contained, rounded deep-navy console with faint elliptical trajectory rings and glowing nodes behind a high-contrast dual CTA. It is commonly misused by making the orbital graphic too opaque or using intense flat borders rather than subtle luminance.
MUST
- Anchor the CTA card within 20px border radius surrounded by clean #020611 negative space.
- Use 11px uppercase monospace styling for kickers and column section titles with wide tracking.
- Limit vivid cyan (#2f81f7) and mint (#34d399) to actionable controls and ambient celestial nodes.
- Maintain strict multi-column vertical alignment between the footer directory and the CTA bounds above.
AVOID
- Do not use sharp 0px or pill 999px radii on the main hero CTA container.
- Do not introduce warm tones (yellows, reds, oranges) into this deep maritime palette.
- Do not add solid opaque backdrops behind the celestial particle graphics.
- Avoid thick, heavy divider lines; borders must never exceed 1px solid #122744.
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 中尝试