Design a light-mode website section: warm parchment canvas electrified by iridescent line-waves channeling daily communication chaos into crystalline, serene task summaries.
LAYOUT
The header spans edge-to-edge within a 1240px container, maintaining breathing room above a split two-column hero. The left column stacks metadata: launch pill, massive H1, paragraph, dual CTA buttons, and feature chips. The right column showcases the horizontal integration pipeline diagram ending in the checklist card, resolving downward into a centered compliance ribbon.
PALETTE (use these exact hex values)
- #FAF8F5 — Parchment Base: Primary warm atmospheric canvas tinting the entire viewport
- #111418 — Obsidian Text: Headings, logo title, primary button fill, and high-emphasis labels
- #5A626A — Slate Muted: Hero supporting paragraph, trust badges, and sub-labels
- #E25C47 — Solar Coral: Logo star emblem, central hub icon, launch pill accent, and glow trails
- #38B2AC — Aura Cyan: Ambient wave currents and flow lines connecting to output modules
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Geist Sans, Public Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 17px body-lg, 20px heading, 60px display. Tracking -0.03em display, -0.01em body. The typographic tone is authoritative, clean, and unmistakably modern neo-grotesque. Plus Jakarta Sans or Geist provides precise horizontal terminals and tightly kerned letterforms that prevent massive titles from feeling sprawling. For open-source execution, Inter or Public Sans provide identical rhythmic stability and high x-height readability.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is produced through translucent glass surfaces (rgba(255,255,255,0.85)) layered over flowing vector waves rather than deep blur shadows. Subtle 1px white specular highlights on top borders give floating cards physical substance. The central AI hub node incorporates a soft outer radial glow in coral and peach to establish a focal focal-plane layer.
IMAGERY
Avoid photographic stock or literal screenshots; all illustrative communication is delivered via streamlined diagrammatic UI primitives and brand vector ribbons. Micro-app logos (Google, Slack, Outlook) are rendered in their crisp canonical SVG formats inside minimal white tiles. Topographic wave currents evoke motion, calm, and invisible intelligence without visual clutter.
SIGNATURE DETAIL — the thing that makes this design itself
The radiant nexus: a 3D-like glassy squircle processor drawing multiple curved energetic light trails from input nodes into a structured daily briefing card. This move visually explains complex background automation at a single glance. Misusing it by turning the lines into static gray arrows destroys the illusion of continuous, living ambient intelligence.
MUST
- Anchor the layout in warm ivory (#FAF8F5) rather than clinical sterile white (#FFFFFF).
- Set the main hero headline to -0.035em tracking with tight 1.05 leading for punchy impact.
- Restrict full pill (999px) borders to announcement tags while keeping action buttons at 10px radius.
- Use glowing vector circuit threads to tangibly bridge raw inputs to structured outputs.
AVOID
- Do not use heavy drop shadows; depth is rendered via frosted transparency and hairline borders.
- Avoid cold gray tints in the background; the signature warmth relies on yellow-red ivory undertones.
- Never replace the four-pointed brand star motif with generic circular spark icons.
- Do not set display headings in regular or light weights; they require bold or heavy impact.
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 中尝试 
