Design a light-mode website section: crystalline fintech serenity with glowing lavender depths, translucent security motifs, and hyper-structured modular navigation.
LAYOUT
The interface is structured in a two-tier vertical progression. The upper tier holds an expansive, self-contained rounded CTA card (1280px max width) containing center-aligned typography flanked by isometric 3D illustrations. Directly beneath, the canvas shifts to pure white (#FFFFFF) for a six-column footer directory, concluding with a full-width bottom legal row divided into copyright text on the left and horizontal compliance links on the right.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas Ground: Global page canvas and container background behind the main footer grid.
- #F8F8FD — Lavender Mist: Soft ambient background fill for the curved primary CTA container.
- #583BE2 — Brand Violet: Primary brand accent, main CTA button fill, active links, and brandmark glyph.
- #0F172A — Ink Deep: High-contrast headings, logo wordmark, and primary section titles.
- #5A6578 — Slate Body: Hero subtext, footer navigation items, and descriptive lead text.
- #8C96A5 — Muted Caption: Copyright text, micro-disclaimers, and input placeholder strings.
- #ECEEF6 — Border Frost: Dividers between feature badges, card border strokes, and input outlines.
- #FF6C47 — Signal Coral: Micro-dots on diagrammatic path lines and highlight icons.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Urbanist), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 14px subheading, 16px body-lg, 20px heading, 40px display. Tracking -0.025em at display, 0 at body. The typographic tone is authoritative, highly technical, and meticulously balanced. Rendered in a modern geometric neo-grotesque like Plus Jakarta Sans or Inter, tight tracking at display sizes (-0.025em) conveys engineering precision. Neutral weights (400-500) at 13-14px in the footer ensure dense listings remain legible without visual strain.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created entirely through ambient color diffusion, frosted translucent glass shapes, and fine 1px structural strokes (#ECEEF6). Heavy drop shadows are intentionally omitted in favor of flat layered surfaces bathed in a subtle purple ambient glow. The 3D isometric cards float softly against the background via clean perspective and alpha transparency rather than dark cast shadows.
IMAGERY
Abstract 3D isometric security elements featuring frosted glass slabs, translucent biometric thumbprint emblems, and pale geometric facets. Crisp hairline connection tracks with miniature coral signal nodes (#FF6C47) thread between objects. Photography is entirely absent; photographic portraits or busy product screenshots would break this crystalline architectural atmosphere.
SIGNATURE DETAIL — the thing that makes this design itself
The floating frosted CTA container framed by ethereal 3D identity artifacts and an inline segmented trust bar. This layout anchors conversion by physically separating the primary marketing prompt from the directory footer via a curved luminous enclosure, rather than relying on full-bleed bands. Misusing it by stripping the ambient purple tint or cluttering the center with illustration breaks the focal funnel.
MUST
- Wrap the hero CTA in an oversized rounded frame (24px radius) distinct from the baseline page canvas.
- Maintain strict 12px vertical spacing between navigation links within footer columns.
- Use deep purple (#583BE2) sparingly, reserving it for primary CTAs, the brand wordmark, and key interactive signals.
- Separate feature badges in the trust strip with crisp 1px vertical hairpins (#ECEEF6).
AVOID
- Do not use dark or heavily saturated backgrounds for the main footer region.
- Never substitute the soft violet tint (#F8F8FD) with stark neutral grays inside the CTA card.
- Avoid heavy drop shadows; elevate elements using 1px pale borders and soft ambient color blooms.
- Do not center footer navigation columns; keep all footer link groups flush left.
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 中尝试