Design a dark-mode website section: deep-ocean fintech darkness illuminated by cyan architectural glow and disciplined, high-density transactional geometry.
LAYOUT
The layout is divided horizontally into two primary zones: an upper split hero/pipeline showcase and a grounded multi-column footer. The upper half places value proposition and dual CTAs on the left 45% column, while the right 55% hosts a horizontal systemic flowchart anchored by a centered glowing hub. Below a full-width divider line, the footer organizes company brand identity and social links on the left, four navigation link columns in the center, and an email capture module on the right.
PALETTE (use these exact hex values)
- #060B13 — Abyssal Void: Deepest structural background layer across hero and upper canvas sections.
- #08101C — Midnight Shelf: Footer container background providing subtle contrast against the base canvas.
- #0C1726 — Subsea Card Surface: Fill for system diagram workflow nodes and input fields.
- #1D6BFF — Signal Blue: Primary conversion button fill and active interaction highlight.
- #38BDF8 — Cyan Resonance: Used for the glowing border halo around the central processing engine node.
- #C084FC — Regional Violet: Gradient terminator applied exclusively to the 'For India' headline emphasis.
- #F8FAFC — Primary Frost: Primary headlines, node titles, and active footer column titles.
- #94A3B8 — Secondary Slate: Hero description copy, supporting metadata, and default footer links.
- #1E293B — Wireframe Border: Structural strokes separating sections and bounding resting diagram cards.
TYPOGRAPHY
Typeface Inter (or Geist, Plus Jakarta Sans, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 48px display. Tracking -0.02em at display, 0 at body, +0.05em at caps. The typography is cold, precise, and institutional, matching the rigorous demands of cross-border financial rails. Setting high-contrast white copy against near-black surfaces creates maximum legibility without visual fatigue. Inter or Geist serves this role natively with zero display quirks, emphasizing machine-like reliability.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1280px container, tight density.
DEPTH
Depth is rendered entirely through layered darkness and luminescence rather than physical drop shadows. Architectural elements sit on translucent dark slate planes (#0C1726) highlighted by 1px hairline borders. The central Mochatrade engine card establishes z-index authority using an ambient cyan backlight diffusion (0 0 30px rgba(56, 189, 248, 0.2)).
IMAGERY
There are no photographic assets or human figures present. Visuals are strictly diagrammatic and algorithmic, composed of UI vector nodes, clean geometric system icons, and dashed circuit flows. Introducing lifestyle photography or saturated 3D renders would break the institutional infrastructure narrative.
SIGNATURE DETAIL — the thing that makes this design itself
The glowing cyan architectural pipeline node that bridges user onramp to market execution. It transforms an abstract crypto-derivative flow into a tangible hardware-like processing diagram using dashed vector lines and a single illuminated blue-cyan haloed center card.
MUST
- Use electric blue (#1D6BFF) strictly for actionable touchpoints and the central engine node.
- Maintain high-contrast white text against the deep #060B13 background for primary scannability.
- Represent architecture pipelines with thin dashed lines (#334155) and directional arrows.
- Keep footer column headers in 14px medium-weight white text with link lists in #94A3B8.
AVOID
- Do not introduce warm orange or yellow tones that clash with the oceanic tech palette.
- Avoid solid drop shadows; depth must be simulated strictly via translucent borders and cyan halos.
- Do not use full-white borders on diagram cards; keep borders muted at #1E293B.
- Never make secondary satellite cards as visually prominent or glowing as the central engine card.
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 中尝试