Design a dark-mode website section: luminescent point-cloud rings suspended in deep void space, balancing cinematic enterprise authority with technical precision.
LAYOUT
Asymmetric two-column split within a 1360px centered bounding container. The left 52% column holds the typographic narrative, call-to-action buttons, and trust metrics stacked vertically, while the right 48% column holds the floating 3D planetary particle system with perimeter callouts. The section concludes with a centered horizontal feature taxonomy row.
PALETTE (use these exact hex values)
- #06080D — Canvas Midnight: Root background canvas behind all hero components and glows
- #0B1018 — Surface Elevated: Background fill for the credential pill and secondary button surfaces
- #1B2533 — Border Subtle: Hairline structural border on badges, metric card, and secondary inputs
- #00C2FF — Cyan Flare: Starting point for primary action gradient and data particle highlights
- #7CE495 — Mint Luminescence: Ending gradient stop for active CTAs, status badges, and headline accents
- linear-gradient(90deg, #00C2FF 0%, #7CE495 100%) — Action Gradient: Primary CTA background and standout category headline gradient text
- #FFFFFF — Text Primary: Primary headings, active labels, brand logo, and emphasis copy
- #8E9BAE — Text Muted: Body paragraphs, secondary navigation links, and callout subtext
- #546274 — Text Dim: Tertiary metadata, pipe dividers, and code glyphs
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans, SF Pro Display, Manrope), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 18px body-lg, 26px subheading, 68px display. Tracking -0.03em at display, 0.08em at micro labels. Inter Display or equivalent neo-grotesque sans-serif provides a clinical, authoritative institutional voice. It feels engineered, institutional, and swift—ideal for an AI operating system handling mission-critical credit underwriting. If Inter is unavailable, substitute Plus Jakarta Sans or Manrope.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 96px between sections, 1360px container, comfortable density.
DEPTH
Depth is created entirely through optical light emission rather than shadow drop. Objects sit directly on the deep space plane, highlighted by subtle back-glows, hairline borders (#1B2533), and particle luminosity that separates the foreground from the infinite void.
IMAGERY
The visual language relies on generative mathematical particle point-clouds forming planetary spheres and elliptical rings in cyan and mint tones. Imagery must be abstract, computational, and crystalline; avoid photorealistic textures, stock photography, or cartoonish vector icons.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone punchline headline ending in a cyan-to-mint gradient ('A new category.'), perfectly mirrored in the primary action button and floating particle rings. To preserve this identity, never separate the gradient CTA from its companion code-bracket secondary button, and ensure the particle globe remains floating without a container card.
MUST
- Use a pure black/midnight navy canvas with deep subtle cyan ambient glow behind 3D visual assets.
- Restrict vibrant color gradients strictly to high-priority interactive CTAs and key punchline headline text.
- Keep typography strictly geometric and crisp, using extreme scale contrast between 68px display and 11px metadata.
- Use 1px borders in #1B2533 for dark-surface cards to delineate structure without adding visual heaviness.
AVOID
- Do not introduce warm color tones like yellow, orange, or crimson into this cyan-mint cold tech palette.
- Never apply drop shadows with dark spreads; use diffuse radial color glows for elevation instead.
- Avoid fully rounded pill buttons for the primary CTA; use an 8px-10px squircle radius.
- Do not style all headline lines in gradient text; limit gradient treatment to the final emphatic phrase.
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 中尝试