Design a dark-mode website section: high-finance infrastructure charged with focused mint luminescence against a deep midnight abyssal canvas.
LAYOUT
The composition is horizontally split into an upper conversion zone and a lower footer matrix. The upper zone centers display typography on the left while anchoring a perspective 3D interface graphic toward the right edge. Below a delicate division rule, the footer organizes horizontally into a brand column, four equal-width vertical link groups, and a right-aligned email subscription module. The base concludes with a distributed legal and contact ribbon.
PALETTE (use these exact hex values)
- #050b11 — Obsidian Base: Primary dark canvas for the hero CTA and main footer background.
- #0b1622 — Surface Elevated: Newsletter input field background and floating perspective dashboard background.
- #132333 — Border Hairline: Footer separation rule, input field borders, and social icon boundaries.
- #6ee7a8 — Luminous Mint: Headline keyword highlight, primary CTA buttons, and newsletter submit button.
- #22d3ee — Cyan Ray: Secondary optical frequency in the fiber-optic background wave and chart accents.
- #ffffff — Pure White: Primary display headline, brand wordmark, column titles, and active links.
- #859ab0 — Slate Mist: Body descriptions, navigation links, copyright notice, and placeholder text.
- #03140e — Void Black: High-contrast text placed directly over solid mint primary buttons.
TYPOGRAPHY
Typeface Inter match (or Plus Jakarta Sans,SF Pro Display,Geist Sans), weights 400/500/600. Sizes 12px caption, 13px body-sm, 14px body, 15px subheading, 16px body-lg, 44px display. Tracking -0.02em on headings, 0 on body and UI. The typographical voice is technical, crisp, and institutional. Set in a contemporary neo-grotesque sans-serif (Inter match), it conveys enterprise stability while the mint-colored keyphrase injects agile modern software aesthetics. Free Google Fonts like Inter or Plus Jakarta Sans are immediate 1:1 drop-in substitutes.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 32px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is rendered entirely through optical glow and perspective rather than drop shadows. A dark 3D perspective dashboard slice floats on the right, lit from below by an energetic wave of cyan and emerald rays. Input surfaces sit recessed via darker-than-ground fills surrounded by thin 1px slate borders.
IMAGERY
Abstract mathematical laser energy lines convergent toward a perspective vanishing point convey automated intelligence and speed. Any replacement imagery must feature programmatic vectors, data flows, or perspective SaaS dashboards; real-world photography or organic illustrations would break the financial-tech atmosphere.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an electric mint highlight (#6ee7a8) embedded directly inside an enterprise banking headline, set against an emerald-cyan light conduit sweeping beneath a tilted UI dashboard. Misusing it by over-saturating the entire headline in mint destroys the sophisticated restraint.
MUST
- Reserve luminous mint (#6ee7a8) strictly for active primary buttons, high-priority keywords, and newsletter titles.
- Maintain the dark slate background (#050b11) uniformly across both CTA and footer sections without heavy dividing cards.
- Use hairline 1px borders (#132333) to structure newsletter inputs and social icon buttons.
- Keep typography strictly sans-serif with slight negative tracking on large display headlines.
AVOID
- Do not introduce warm hues like orange, yellow, or red into the background lighting effects.
- Never use solid white backgrounds for buttons or cards in this system.
- Do not set footer navigation links to 100% white; they must remain muted slate (#859ab0) to preserve hierarchy.
- Avoid thick pill buttons (full 999px radius); maintain systematic 8px rounded corners.
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 中尝试