Design a dark-mode website section: architectural deep-space finance where high-precision editorial serifs meet glowing data pipelines.
LAYOUT
The hero uses an asymmetrical two-column desktop grid over a 1280px container. Column 1 (45% width) holds an aligned left-aligned vertical stack: category pill, two-line 64px display headline, three-line body summary, and dual CTA cluster. Column 2 (55% width) hosts the horizontal three-stage pipeline diagram flowing left-to-right (Data Sources -> AI Core -> Outcomes). Below, a full-width trust row leads into a dramatic dark-to-light canvas inversion.
PALETTE (use these exact hex values)
- #060C12 — Void Canvas: Dominant deep background for the hero section, framing all particle glow and copy.
- #FAF8F5 — Alabaster Paper: Warm off-white background used in the following section to ground financial legitimacy.
- #EA5834 — Vermilion Brand: High-urgency primary CTA buttons in navigation and hero body.
- #6EE7B7 — Mint Bioluminescence: Accent text coloring for headline emphasis, particle nebulae, and verified checkmarks.
- #0F1A24 — Node Slate: Background fill for data source inputs, agent chips, and outcome cards.
- #1E2C3A — Subtle Border: Hairline 1px borders surrounding architectural diagram nodes and category pills.
- #FFFFFF — Text Primary: Headlines, active navigation links, and primary node titles.
- #8B9DAF — Text Muted: Body paragraphs, node metadata, breadcrumbs, and inactive nav items.
TYPOGRAPHY
Typeface Newsreader (or Instrument Serif, Playfair Display, Canela), weights 400/500. Sizes 11px caption, 13px body-sm, 14px body, 18px body-lg, 24px subheading, 36px heading, 64px display. Tracking -0.02em at display sizes. The typography evokes the prestige of a bespoke audit firm merged with the cold precision of automated algorithmic tooling. The editorial serif (Newsreader match) provides weight, institutional trust, and human craft, while the crisp sans (Inter match) grounds the technical credibility. When substituting, never choose casual or geometric display faces; stick to classical literary serifs with sharp brackets.
GEOMETRY & SPACING
Corner radii — cards 8px, links 4px, inputs 6px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created strictly through photonic glow and layering rather than standard cast drop shadows. Dark surface panels (#0F1A24) sit subtly above the #060C12 canvas via hairline 1px borders (#1E2C3A), while radial Gaussian blurs in mint green (#6EE7B7) simulate emissive luminescence behind the agent diagram.
IMAGERY
Avoids literal human photography or literal software UI screenshots. The imagery language is strictly generative and architectural: luminous micro-particle clouds, precise vector bezier conduits, and structured schematic chips showing automated data transformation. In the lower light band, fine watercolor-like emerald washes evoke handcrafted balance sheets.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the luminescent emerald particle nexus bridging schematic rectangular UI nodes, set directly adjacent to an authoritative, warm editorial serif headline with a mint green sentence termination. Misusing this design involves over-saturating the glow into a chaotic neon rave or removing the serif, which collapses the bespoke financial stature into a generic developer tool.
MUST
- Render the main headline in an editorial serif with 'Every time.' in glowing mint green (#6EE7B7).
- Use tight 1px borders in #1E2C3A for all dark UI nodes to preserve architectural crispness.
- Restrict the vermilion-coral tone (#EA5834) strictly to primary interactive action buttons.
- Use 11px uppercase sans-serif with 0.08em tracking for system tags, node headers, and category pills.
AVOID
- Never replace the editorial headline serif with a generic neo-grotesque sans-serif.
- Do not apply heavy drop shadows to cards; rely entirely on 1px stroke definition and particle glows.
- Avoid using saturated blue or purple gradients; keep luminescence constrained to mint and emerald.
- Do not make buttons pill-shaped; keep them strictly at an 8px radius.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
