Design a light-mode website section: clinical healthcare precision encased in crisp white bento modules descending into deep sovereign midnight trust.
LAYOUT
The composition follows a two-tiered rhythm. The upper CTA tier is an asymmetric 2-column bento grid (60/40 ratio) where the left card spans full height and the right card is split into two vertically stacked modules. Directly underneath, the section resolves into a full-bleed 6-column enterprise footer organized into brand identity, four navigation categories, and a right-aligned utility/subscription column.
PALETTE (use these exact hex values)
- #030e1e — Deep Sovereign Navy: Footer ground and security bento card surface providing enterprise gravity and containment.
- #f3f6fa — Canvas Cool Mist: Background plane for upper bento CTA grid and section canvas.
- #ffffff — Card White: Elevated card surface for primary CTA and outcome metric module.
- #1b68f5 — Cognitive Blue: Primary interactive buttons, key metric numerals, and emphasized AI typography.
- #081324 — Slate Heading: High-contrast headings, card titles, and dark interface anchors.
- #5e6d82 — Clinical Gray: Secondary descriptive body copy, subtext, and copyright line.
- #8c9cb0 — Footer Link Fog: Unselected footer links, contact details, and input placeholder text.
- #10b981 — Success Mint: Outcome trend icon stroke and success indicator.
- #f59e0b — Vault Amber: Icon stroke for security lock and compliance status badge.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, Satoshi), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 28px heading, 44px heading-lg, 48px display. Tracking -0.03em at display, 0em at body. The typographic tone is authoritative, hyper-clean, and tech-forward. Tight letter tracking on display sizes conveys algorithmic precision and speed, while neutral, open proportions on small text preserve legibility across dense navigation links and compliance standards.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created primarily through flat juxtaposition rather than heavy shadows. White cards sit on a cool-tinted canvas with a very soft ambient shadow (0 4px 20px rgba(8, 19, 36, 0.04)), while the dark card and footer use stark background contrast to anchor depth naturally.
IMAGERY
Abstract, generative dot-matrix mesh graphics in faint ice blue represent algorithmic precision and healthcare data flow. Stock photography of clinicians or patients is omitted entirely in favor of schematic data artifacts and minimalist geometric iconography.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric bento duality: pairing an expansive, airy white AI hero card with a stacked high-contrast pair containing an oversized blue metric and a midnight security module, directly transitioning into an exhaustive dark infrastructure footer.
MUST
- Use deep sovereign navy (#030e1e) exclusively for the footer and security module to establish institutional trust.
- Maintain generous 20px radii across all main card containers for a modern, approachable enterprise feel.
- Reserve vibrant royal blue (#1b68f5) for AI-related emphasis, primary buttons, and critical quantitative data.
- Group footer columns with explicit 14px bold headers and generous 12px vertical spacing between link items.
AVOID
- Do not use saturated green or purple gradients; stick strictly to monochromatic navy, white, and deliberate blue.
- Avoid sharp 0px corners; all cards, badges, and inputs must use intentional rounded corners between 8px and 20px.
- Never make footer link text pure white; keep links at #8c9cb0 to preserve typographic hierarchy.
- Do not place heavy photographic imagery inside the bento cards; rely on clean typography, icons, and faint particle meshes.
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 中尝试