Design a light-mode website section: biometric intelligence framed in a luminous dark-mode hero card floating above crisp editorial utility.
LAYOUT
The composition follows a strict top-down flow: a self-contained, high-impact CTA card occupying the upper frame, followed by an expansive editorial footer. The footer arranges identity, a 4-column link directory, and an input box horizontally across a wide 1200px boundary. A full-width horizontal rule terminates the page into utility copyright and legal links.
PALETTE (use these exact hex values)
- #060B18 — Deep Space Canvas: Background fill for the primary floating CTA card container
- #F8FAFC — Light Canvas: Overall page background framing the floating CTA and containing the footer
- #2563EB — Cobalt Primary: High-intent CTAs including primary card action and newsletter submission button
- linear-gradient(90deg, #38BDF8 0%, #818CF8 50%, #C084FC 100%) — Emotion Gradient: Display text gradient highlight emphasizing human experience and EQ
- #60A5FA — Card Eyebrow Accent: Used for the uppercase subheader prompt above the card title
- #94A3B8 — Card Slate Body: Secondary descriptive copy and checkmark details inside the dark CTA card
- #0F172A — Footer Ink: Primary heading typography, footer column labels, and brand logotype
- #64748B — Footer Muted: Navigation item links, copyright, and explanatory footer helper text
- #E2E8F0 — Border Hairline: Vertical column delimiters, newsletter inputs, and horizontal separator lines
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, system-ui), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 44px display. Tracking -0.02em at display, 0.08em at uppercase eyebrow. The type choice is crisp, technical, yet deeply humanistic—typified by Plus Jakarta Sans. Its geometric clarity matches the algorithmic EQ positioning, while ample tracking in the eyebrow and tight kerning on the display title maintain editorial distinction. Clean free alternatives include Inter or DM Sans.
GEOMETRY & SPACING
Corner radii — cards 24px, links 999px, inputs 10px, buttons 10px. Spacing on a 8px unit, 32px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is handled strictly through chromatic containment rather than dropped shadows. The floating card feels elevated purely by its deep contrast against the light page background, while luminous ambient vector waves provide internal atmospheric depth within the card itself.
IMAGERY
Abstract biometric resonance waves composed of micro-beziers and subtle glowing particle dots. Visuals should evoke synaptic signals, brainwaves, or frequency lines; avoid literal photographic imagery, 3D hardware renders, or heavy glossy elements in this section.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-mode juxtaposition: a self-contained deep-navy bioluminescent CTA card hovering immediately above an ultra-clean, rule-separated light editorial footer. Misusing this pattern usually involves turning the entire page dark, which dissolves the focused visual gravity of the conversion card.
MUST
- Retain the sharp 24px radius on the floating CTA card to maintain modern software aesthetics.
- Restrict the cyan-to-purple gradient specifically to the punchline phrase of the hero heading.
- Use 1px #E2E8F0 vertical divider lines to logically partition footer content groups.
- Keep social icons strictly within circular minimalist outlines without loud background fills.
AVOID
- Do not extend the dark CTA card full-bleed; it must float with generous surrounding margin.
- Do not apply the multicolor gradient to body copy, button labels, or navigation headers.
- Avoid solid black backgrounds; use deep obsidian navy (#060B18) for volumetric depth.
- Do not drop the trailing arrow indicator from the primary and secondary CTA triggers.
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