Design a light-mode website section: deep sapphire enterprise telemetry framed by clinical white clarity for high-trust healthcare automation.
LAYOUT
The layout is divided into two distinct visual tiers. The upper tier is a centered floating banner card (max-width 1280px) hosting a centered copy stack, CTA button cluster, and a bottom horizontal rule-separated trust strip. The lower tier is a white 6-column directory footer: 1 column for brand info, 4 columns for link navigation with dotted headers, and 1 column for newsletter input, culminating in a bottom hairline divider with copyright and legal terms.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Base page surface underpinning the lower footer grid and surrounding page wrapper
- #031838 — Sapphire Depths: Deep foundational tone for the floating CTA card background gradient
- linear-gradient(135deg, #021735 0%, #062B64 55%, #0A3E8A 100%) — Oceanic Gradient: Linear background fill for the floating high-conversion callout section
- #2F76F6 — Electric Azure: Primary conversion button fill, header bullet dots, and brand logomark accent
- #0F172A — Ink Navy: Footer column headings, company wordmark, and prominent dark labels
- #64748B — Slate Muted: Secondary footer links, metadata descriptions, and copyright notices
- #1D4175 — Translucent Navy Border: Subtle bounding line for secondary CTA button, pills, and card contour
- #34D399 — Clinical Mint: Status checkmark icon indicator inside compliance badges
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px subheading, 16px body-lg, 20px heading, 38px display. Tracking -0.025em for display, 0 for body, 0.05em for uppercase badges. The typographic tone is authoritative, clinical, and surgically precise. Set in a contemporary neo-grotesque sans (matching Inter or Plus Jakarta Sans), display lines rely on tight letterforms and strong weight contrast to establish instant fintech and medical billing trust, while footer typography remains light and airy to prevent visual fatigue.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 32px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Elevation is achieved through glowing ambient luminosity rather than conventional dark drop shadows. The floating card hovers naturally through its dark-on-light color inversion and a very faint deep-navy ambient spread, while the primary 'Book a Demo' button casts an electric cyan-blue bloom onto the card surface. The footer directory remains entirely flat (Level 0), relying purely on 1px borders (#F1F5F9) for sub-bar separation.
IMAGERY
Visual assets are strictly schematic and vector-based: a glowing neon cyan-and-blue security shield with an internal checkmark floats on the right of the CTA, accented by faint wave-frequency lines. Flat photographic imagery or complex multi-color illustrations are excluded in favor of clean mathematical line work and translucent geometry.
SIGNATURE DETAIL — the thing that makes this design itself
The standout signature is the floating deep-navy capsule card with its glowing vector mesh and semi-transparent security shield, acting as a dramatic visual roof directly above a pristine, highly structured 6-column directory footer. Losing this dark-to-light card tension instantly reduces the aesthetic to a standard generic SaaS page.
MUST
- Retain the 24px corner radius on the floating banner to separate it deliberately from the flat footer beneath.
- Place the blue circle bullet (4px diameter, #2F76F6) before each category header in the footer link columns.
- Use subtle cyan glowing particle/mesh line effects behind the compliance shield graphic inside the CTA card.
- Enclose social media links in dedicated 32-36px light gray rounded tiles rather than bare icons.
AVOID
- Do not let the dark sapphire gradient bleed entirely to the page edge; it must remain an inset floating card.
- Do not use sharp 0px or 90-degree corners on CTA elements, buttons, or input enclosures.
- Avoid high-contrast pure black text in the footer; default to deep navy (#0F172A) for headers and slate (#64748B) for body.
- Never drop the fine 1px translucent border around the CTA container, which prevents gradient bleed against dark mode edges.
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 中尝试 
