Design a light-mode website section: crisp b2b enterprise canvas where vibrant cobalt typography and orbital pastel agent nodes anchor systematic clarity.
LAYOUT
The composition follows a centered, top-down funnel hierarchy with rigorous symmetric alignment. It opens with an orbital halo framing the pill badge, display heading, paragraph, and dual button cluster over an inline trust checklist. The layout then pivots to a balanced 4-column feature matrix, culminating in an expansive 5-column metric banner anchoring the base.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas Pure: Primary surface background across the entire viewport and card interiors.
- #0F172A — Charcoal Slate: High-contrast headings, primary metric numerals, and prominent text anchors.
- #254FDC — Cobalt Punch: Headline emphasis color, primary CTA button fill, and highlighted stats.
- #475569 — Muted Slate: Explanatory subtext, card descriptions, and secondary metadata.
- #E2E8F0 — Ghost Border: Delicate 1px borders surrounding feature cards, metric bands, and secondary buttons.
- #F3E8FF — Orbit Node Violet: Background fill for planning icon badges and orbiting node rings.
- #DCFCE7 — Orbit Node Lime: Background fill for execution and orchestration iconography.
- #EFF6FF — Soft Blueprint: Tint fill for top eyebrow badge and content feature pill.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 32px heading, 64px display. Tracking -0.03em at display, 0.05em at caps caption. The typography speaks with authoritative, measured clarity via Plus Jakarta Sans (or Inter). The disciplined negative letter-spacing (-0.03em) on display sizes gives enterprise tech credibility without feeling robotic. Substitution with generic geometric sans works only if tall x-height and circular terminals are maintained to preserve friendliness.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 12px, buttons 12px. Spacing on a 8px unit, 16px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is achieved almost entirely through subtle surface boundaries and ultra-soft diffusion rather than traditional drop shadows. Cards feature a 1px solid #E2E8F0 outline accompanied by a faint ambient shadow (0px 4px 20px rgba(15, 23, 42, 0.03)). Interactive buttons elevate slightly with a localized 0px 8px 16px rgba(37, 79, 220, 0.20) cast shadow on primary actions.
IMAGERY
Visual interest is generated purely through geometric diagrammatic vector art rather than photography. An elliptical orbital coordinate system loops behind the content, populated by pastel node circles housing crisp SVG line glyphs. Photographic cutouts or 3D glossy renders would severely clash with this disciplined diagrammatic language.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-clause headline typography split—pairing deep slate #0F172A with electric royal blue #254FDC—set directly over a faint elliptical orbit dotted with floating pastel micro-nodes. To use it properly, keep the orbit lines feather-light and align the primary CTA directly along the central axis. Misusing it involves oversaturating the orbit nodes or tinting the whole headline in blue.
MUST
- Reserve #254FDC cobalt strictly for high-priority CTA fills, metrics, and key headline clauses.
- Maintain uniform 16px border-radii across feature cards and bottom KPI banner containers.
- Use uppercase 11px tracking (+0.08em) for secondary eyebrow tags and enterprise credibility labels.
- Keep card icon housings tinted in pastel variants (#F3E8FF, #DCFCE7, #EFF6FF) rather than saturated fills.
AVOID
- Do not apply heavy drop shadows or dark skeuomorphic borders to the white feature cards.
- Do not color the entire headline in cobalt; maintain the strict charcoal-to-blue narrative split.
- Avoid solid dark backgrounds; the identity collapses without radiant high-key negative space.
- Do not use sharp 0px corners; all surfaces adhere strictly to 12px, 16px, or 999px radii.
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 中尝试 
