Design a light-mode website section: clinical compliance precision cushioned in atmospheric pastel neomorphic gradients.
LAYOUT
The hero uses an asymmetric split layout within a 1240px container. The left column (roughly 45% width) holds platform categorization, a stacked three-sentence value proposition, descriptive paragraph, twin button group, and a trio of horizontal capability cards. The right column (55% width) presents a rounded halo container within which three layered software cards overlap: the main Submission Hub, an AI Copilot prompt card, a Readiness gauge, and an underlying client logo bar.
PALETTE (use these exact hex values)
- #ffffff — Canvas Background: Pristine white base layer for the entire viewport
- linear-gradient(135deg, #eff6ff 0%, #fdf2f8 100%) — Backdrop Aura: Soft ambient background glow containing the mock interface and partner bar
- #ffffff — Card Surface: Solid white elevated surfaces for mock cards and interface containers
- #1d4ed8 — Brand Accent Blue: Primary CTA button background, headline accent, and key status indicators
- linear-gradient(90deg, #1d4ed8 0%, #e11d48 100%) — Headline Gradient: Applied to the highlighted middle phrase 'Stay compliant.' in the primary display title
- #0f172a — Heading Dark: Display headlines and card titles with high legibility
- #475569 — Body Slate: Subtitles, descriptive paragraphs, and metadata labels
- #e2e8f0 — Border Subtle: Outlines on secondary CTA, dividers, and inner container borders
- #10b981 — Success Mint: Status indicator dot and label for planned or verified milestones
- #f43f5e — Warning Crimson: Status indicator dot and tag for items in review
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 48px display. Tracking -0.03em display, -0.01em body. The typography is clean, authoritative, and clinical, driven entirely by a neutral geometric/grotesque sans-serif like Inter or Plus Jakarta Sans. The tight display tracking (-0.035em) gives the multi-part headline monumental authority suitable for medical/FDA software, while small caps in eyebrows and tabular figures in dashboard cards reinforce regulatory compliance and technical rigor.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 10px, buttons 10px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is delivered through delicate atmospheric layering rather than harsh physical shadows. Surfaces float over one another with layered multi-stop drop shadows containing slight blue tints (rgba(30, 58, 138, 0.05)), complemented by crisp 1px borders (#f1f5f9) that separate nested white panels from soft gradient backplates.
IMAGERY
This design avoids photographic imagery entirely, relying on rendered, polished mockups of SaaS dashboard components. The UI elements—gauges, task rows, and sidebars—are stylized for clarity rather than 1:1 realism, framed by delicate dot-matrix grid accents in the upper right quadrant. No organic illustrations or stock business imagery should ever be introduced.
SIGNATURE DETAIL — the thing that makes this design itself
The design's signature element is the three-beat period-delimited headline ('Move faster. Stay compliant. Bring safer products to market.') where the middle imperative is highlighted in an electric blue-to-crimson horizontal gradient, paired with the floating glassmorphic submission card stack.
MUST
- Use a high-contrast three-line headline structure where only the central phrase carries the gradient fill.
- Enclose mock UI elements within a soft, low-opacity gradient aura backplate to maintain airiness.
- Set the primary action button to deep cobalt blue (#1d4ed8) with a 10px radius and inline chevron.
- Maintain strict 12-16px gaps between structured list rows inside mock interface frames.
AVOID
- Never apply the gradient text fill across the entire headline; restrict it to the compliant clause.
- Do not use dark, heavy shadows; rely exclusively on translucent colored diffusion (alpha < 0.08).
- Avoid sharp 0px card corners; all surfaces must use at least 12px to 20px radii.
- Do not use dense, saturated dark surface panels in this system.
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 中尝试 
