Design a light-mode website section: deep navy compute engine floating above an immaculate multi-column institutional white footer.
LAYOUT
The vertical composition is organized into two primary architectural movements within an aligned 1280px frame. The upper deck is an enclosed dark callout card spanning full width with a 50/50 two-column split between headline copy and the 3D isometric stack visual. The lower deck transitions abruptly to an open, white six-column footer directory: brand identity and social proofs anchor the far left, four informational link columns occupy the core, and a dedicated newsletter capture module anchors the far right. The layout concludes with a wide, single-line utility sub-footer spacing copyright left and legal policies right.
PALETTE (use these exact hex values)
- #080B11 — Obsidian Void: Background fill for the prominent dark high-conversion CTA card
- #FFFFFF — Pure Canvas: Background fill for the structural footer container and input fields
- #F3F4F6 — Peripheral Ground: Appears as the outer chassis border framing the entire layout container
- #1D63ED — Electric Cobalt: Primary action button fill in CTA and newsletter submission trigger
- #38BDF8 — Telemetry Cyan: Glow highlights on 3D stack hardware and compliance telemetry indicators
- #818CF8 — Orchid Violet: Upper gradient on the embossed monogram and compliance pill status dot
- #94A3B8 — Slate Text: Body copy and secondary descriptions inside the dark CTA card
- #111827 — Charcoal Heading: Footer column titles, wordmark brand name, and newsletter heading
- #4B5563 — Muted Ash: Navigation link labels, copyright notice, and legal sub-footer links
- #E5E7EB — Hairline Border: Border stroke around email inputs, social button tiles, and divider rules
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, Helvetica Neue), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 15px body, 16px body-lg, 16px subheading, 20px heading, 44px display. Tracking -0.025em for display, 0 for body and labels. The typographical tone is clinical, institutional, and highly calculated, leaning on Inter or equivalent neo-grotesque typefaces. The headline uses heavy weight and tight tracking to project algorithmic certainty, while the body and link hierarchies rely on relaxed leadings and neutral grays to optimize rapid multi-column scanning. Free open-source alternatives like Geist or Plus Jakarta Sans preserve the crisp tech-forward legibility without requiring proprietary licenses.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 32px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is created strictly through optical surface contrast and illuminated focal artwork rather than multi-layered drop shadows. The dark CTA card commands immediate z-plane priority over the flat, boundary-less white footer by virtue of its deep #080B11 void and internal cyan/violet ambient backlighting. The isometric server slab utilizes layered bevel edges and glowing perimeter lines to establish dimensional hierarchy without disturbing page layout flat planes.
IMAGERY
Imagery is strictly technical and synthetic: a bespoke isometric 3D server unit rendered in dark matte obsidian with precise neon-edge highlights in cyan (#38BDF8) and violet (#818CF8). The top face showcases an embossed, gradient-lit lettermark centered precisely on the angled quadrilateral. Editorial photography, human figures, or textured physical hardware photos are completely absent and would break the computational, finance-grade aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The design's signature element is the floating obsidian computing deck with an illuminated isometric layered stack that immediately bridges into an unadorned, clinical white directory footer. This sudden structural shift from deep cybernetic compute (#080B11) to transparent corporate ledger (#FFFFFF) visually translates the product promise: bleeding-edge AI working safely within traditional finance compliance. Misusing this pattern by softening the contrast or adding gradients between the dark card and the white footer dilutes the institutional precision.
MUST
- Retain the sharp division between the ink-black CTA card (#080B11) and the pure white footer canvas (#FFFFFF).
- Keep CTA headline typography tight at 44px with -0.025em letter-spacing for an authoritative enterprise voice.
- Use Electric Cobalt (#1D63ED) exclusively for primary submit and booking actions across both dark and light zones.
- Maintain uniform 8px border radii across inputs, buttons, and social tiles for rhythmic coherence.
AVOID
- Do not invert the footer into dark mode; the contrast between black CTA card and paper-white directory is intentional.
- Never use generic drop shadows on the dark CTA card; rely on high-contrast surface tone and internal illustration glow.
- Do not allow footer navigation link colors to fall below WCAG AA contrast against the white base.
- Avoid pill-shaped radii on action buttons; preserve 8px rounded rectangles for technical rigor.
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 中尝试 
