Design a light-mode website section: crisp daylight governance meeting midnight architectural utility for automated financial intelligence.
LAYOUT
The layout uses a split top-to-bottom rhythm: an asymmetric 2-column hero above a multi-column enterprise footer. The hero pairs left-aligned high-impact typography and dual CTA buttons with an expansive right-aligned interactive node flowchart. Directly beneath, the dark footer arranges a corporate identification module on the left, four proportional sitemap columns in the center, and an email capture panel on the right, capped by a hairline-separated copyright bar.
PALETTE (use these exact hex values)
- #f8fafd — Canvas Daylight: Hero background canvas providing an ultra-subtle cool atmospheric tint
- #0c131f — Canvas Midnight: Deep navy base for footer structure, footer links, and legal zones
- #ffffff — Surface Elevated: Floating diagram nodes, badges, and secondary buttons
- #151e2e — Surface Midnight Alt: Background for newsletter input field and social button tiles
- #4f5ff7 — Electric Cobalt: Primary CTA button fills, active nodes, and brand icon glyph
- #5856d6 — Trust Indigo: Emphasis text gradient termination on hero headline and text hyperlinks
- #10b981 — Operational Emerald: Status indicator pips signaling healthy API integrations and system uptime
- #0f172a — Text Slate Dominant: Primary headings and high-contrast labels on light surfaces
- #5e6573 — Text Slate Muted: Hero paragraph descriptions, microcopy, and trust badge copy
- #8b94a5 — Text Midnight Muted: Footer section titles, secondary links, and copyright text
TYPOGRAPHY
Typeface Inter (or Geist, Plus Jakarta Sans, SF Pro Text), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 44px display. Tracking -0.02em at display, 0.05em on caps badges. The typographic tone is authoritative, highly disciplined, and corporate-native. Using a clean grotesque like Inter or Geist conveys enterprise rigor, while the punchy two-tone display heading—shifting into vibrant cobalt indigo—softens the technical density. Free web font alternatives include Inter and Plus Jakarta Sans, set with crisp -0.02em tracking.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is intentionally restrained and utilitarian. The light hero uses subtle flat elevation where white cards cast delicate low-opacity shadows (0 4px 16px rgba(0, 0, 0, 0.03)) over the light canvas, while the dark footer is completely planar, relying entirely on 1px hairlines (#1d2638) for layering.
IMAGERY
No photographic imagery is present; the interface relies on schematic diagrammatic illustrations representing accounting automation. Visuals are composed entirely of HTML/SVG vector nodes, monospace-style status badges, and fine dashed connector curves. Any photorealistic imagery or illustrative 3D figures would violate this engineering-first design language.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the interactive agentic node diagram composed of floating rounded modules connected by delicate dashed circuit lines. Its clinical arrangement, complete with real-time status pills like 'Running' and live counts, transforms complex backend operations into an accessible visual architecture. It is commonly misused when cluttered with too many crossing lines or rendered as a static raster image instead of live UI components.
MUST
- Anchor primary CTA buttons with #4f5ff7 and precisely 10px border radius.
- Use uppercase 11px text with 0.08em tracking for all section eyebrow headers.
- Render connection paths in the diagram using fine 1px dashed lines in #c5cdd9.
- Employ true #0c131f for the entire footer section to create structural weight.
AVOID
- Do not use high-saturation gradients across button backgrounds; maintain flat cobalt precision.
- Do not apply drop shadows to footer navigation elements or newsletter inputs.
- Never substitute rounded pill borders for the main action buttons; keep them at 10px.
- Do not allow connector lines to overlap card content without explicit directional arrows.
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 中尝试 
