Design a light-mode website section: aerated healthcare software aesthetic balancing high-trust white telemetry cards over a grounding midnight obsidian footer.
LAYOUT
The top section utilizes an asymmetric 2-column split (approx 55/45 ratio): the left column houses an expansive narrative CTA card, while the right column stacks two complementary proof cards (features above, metrics below). Directly underneath, separated by a 48px vertical gap, sits an expansive dark-theme footer organized in an asymmetric 2-part grid: brand/newsletter on the left (40%) and a 5-column directory grid on the right (60%).
PALETTE (use these exact hex values)
- #F4F6F9 — Canvas Ice: Light background behind primary CTA and proof cards
- #FFFFFF — Pure White: Raised card surfaces in the top grid showcase
- #0B132B — Midnight Obsidian: Base background for the deep contrast bottom footer container
- #0F172A — Deep Slate: Headings, titles, and high-emphasis display type
- #3851EC — Electric Cobalt: Primary CTA button, text emphasis spans, and positive metric accents
- #64748B — Cool Muted Gray: Body paragraphs, metric category labels, and footer link text
- #EEF2FF — Soft Lavender Icon BG: Subtle rounded container background for feature icon badges
- #E11D48 — Telemetry Coral: Accent value representing reduction in admin workload
- #1E293B — Footer Border Line: Subtle horizontal divider isolating legal metadata in footer
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Text), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 24px heading, 40px display. Tracking -0.03em on display, 0.08em on uppercase badge. The typographic tone is clinical, institutional, and highly computational. Inter provides geometric precision with tall x-heights, ensuring that critical data points, percentages, and dense navigation listings remain instantly legible. The mix of bold display headings alongside tight uppercase captions reinforces an enterprise medical software identity.
GEOMETRY & SPACING
Corner radii — cards 24px, links 6px, inputs 10px, buttons 10px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is handled via subtle ambient occlusion rather than harsh stacking. The white cards float over the pale #F4F6F9 canvas with an ultra-soft shadow: 0 12px 32px -4px rgba(15, 23, 42, 0.04). The dark footer avoids elevation altogether, acting as an authoritative, matte anchor block with zero drop shadow.
IMAGERY
No photographic imagery is used. The aesthetic relies entirely on schematic typography, crisp micro-icons inside pale badges, and an ethereal generative bezier wireframe wave in the bottom-right corner of the CTA block. Any photographic human imagery would compromise the pristine computational rigor.
SIGNATURE DETAIL — the thing that makes this design itself
The signature technique is the contrast bridge between ultra-clean clinical white telemetry cards and an enclosed, pill-softened midnight footer (#0B132B) spanning beneath them. This dual-tone hierarchy establishes a psychological transition from interactive operational proof down into enterprise stability.
MUST
- Use Electric Cobalt (#3851EC) strictly for focal emphasis: CTA buttons, key heading words, and primary metrics.
- Preserve 24px corner radii on major card containers to retain the approachable clinical feel.
- Give the dark footer full isolation with a crisp edge and distinct container boundary against the pale canvas.
- Keep metric captions capped at two lines to preserve baseline alignment across numerical columns.
AVOID
- Do not bleed the dark footer across the entire viewport edge without honoring top boundary rounding.
- Never apply high-contrast borders around light cards; rely solely on subtle drop shadows (#000000 4% blur).
- Avoid using harsh saturated red for the negative metric; use calibrated Telemetry Coral (#E11D48).
- Do not overcrowd the main hero card; ensure wireframe linework remains under 10% opacity in the bottom right.
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 
