Design a light-mode website section: clinical enterprise precision softened by luminous pastel nodes and rounded, high-trust whitespace.
LAYOUT
The layout is governed by an asymmetrical two-column hero section followed by a structured 5-column footer grid. In the hero, a 45/55 split gives dominant presence to the interactive workflow diagram on the right while anchoring copy, primary/secondary CTAs, and a trio of trust items on the left. The footer transitions gracefully after a clean 1px rule, pairing company branding and newsletter subscription with three central navigation columns.
PALETTE (use these exact hex values)
- #FAFAFC — Canvas White: Primary background color across the entire page layout.
- #F4F5F9 — Panel Background: Light grey surface container for the hero diagram illustration.
- #5A5AE6 — Primary Indigo: Primary interactive buttons, key brand nodes, and accent highlights.
- #111827 — Text Primary: Main display headers, logo text, and high-emphasis labels.
- #5A6275 — Text Secondary: Body copy, subheaders, and footer column links.
- #94A3B8 — Text Muted: Footnotes, copyright strings, and subtle inline icons.
- #E6E8F0 — Border Subtle: Dividing lines, input borders, and social icon button borders.
- #FF6B6B — Coral Accent: Hub icon node and alerts icon badge tone.
- #2DD4BF — Teal Accent: Certificates and validation badge indicator fill.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,SF Pro Display,Geist), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 13px subheading, 15px body, 16px body-lg, 20px heading, 44px display. Tracking -0.03em display, 0.08em uppercase subheads. The typography is clinical, ultra-confident, and authoritative, leveraging an engineered neo-grotesque like Inter. Heavy display weights communicate enterprise scale and compliance finality, while lighter secondary text maintains legibility in compact footer groupings. Inter or Plus Jakarta Sans are the ideal licensed/open-source choices to preserve this exact rhythm.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 32px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created purely through whisper-soft ambient shadows rather than layered bevels or hard outlines. Floating node badges and the central icon hub use 0 10px 25px rgba(90,90,230,0.05), appearing to hover barely above the flat recessed diagram background. No borders are used on cards when elevation is applied.
IMAGERY
Visual imagery is entirely programmatic and diagrammatic, avoiding realistic photography. It features clean SVG iconography, pastel-tinted icon backgrounds, soft geometric network connectors, and subtle dot-matrix patterns. Any busy photographic background or hand-drawn illustration style would completely clash with this clinical aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the soft-tinted 'network converge' architecture diagram featuring curved wire connectors leading outward from an elevated, glowing center hub to rounded integration pills. Replicate this with 1px lavender bezier curves, delicate dot nodes, and soft-radius white cards over a faint grey (#F4F5F9) panel. It fails if connector lines are straight, jagged, or heavily saturated.
MUST
- Keep background surfaces slightly warm-tinted off-white (#FAFAFC) rather than harsh #FFFFFF everywhere.
- Use tight tracking (-0.03em) strictly on display headlines to achieve high-density enterprise credibility.
- Render connector lines in hero diagrams with very subtle 1px stroke (#D8DBEA) and smooth bezier fillets.
- Maintain high contrast by keeping primary text at #111827 against pale grey containers.
AVOID
- Do not use dark or aggressive multi-color gradient fills behind buttons or hero sections.
- Do not introduce sharp 0px corners; all cards, inputs, and chips require between 8px and 20px radii.
- Never make connector wires in system diagrams heavy or dark—they must feel lightweight and ambient.
- Do not use pure black (#000000) for body or link typography; stick to #5A6275.
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. Try in DraPub 
