Design a light-mode website section: clinical daylight research surfaces anchored into an obsidian footer alive with ethereal stippled simulation currents.
LAYOUT
The section employs an asymmetrical multi-card grid directly abutting a monolithic footer. At the top, a 1240px container houses a two-column row: the left 60% belongs to the primary conversion card, while the right 40% holds two vertically stacked technical feature cards separated by a 20px gap. Beneath, the viewport spans into an edge-to-edge dark footer divided into a brand column, four link columns, and an input column, terminating in a horizontal rule and a legal utility bar.
PALETTE (use these exact hex values)
- #0c1322 — Obsidian Ground: Deep structural background for the primary footer and copyright strip.
- #ffffff — Pure Surface: Interior card fill for CTA and feature panels.
- #f8f9fd — Atmospheric Canvas: Base canvas wash behind the upper interactive card grid.
- #255ff4 — Electric Cobalt: Primary interactive buttons, key headline accent word, and focus states.
- #0f172a — Charcoal Title: High-contrast headings, main titles, and logo wordmark in light mode.
- #505e73 — Slate Neutral: Descriptive body copy on light cards and subheaders.
- #94a3b8 — Footer Muted Link: Footer navigation links, category headers, and copyright text.
- #e8ebf3 — Card Boundary: Subtle 1px perimeter definition for all upper cards.
- #eeeffc — Developer Lavender: Background fill for the code icon badge in the developer card.
- #e6f8f6 — Enterprise Mint: Background fill for the shield icon badge in enterprise card.
TYPOGRAPHY
Typeface Inter (or Geist, Plus Jakarta Sans, Helvetica Neue), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 22px heading, 38px display. Tracking -0.025em for headings, 0 for body, +0.01em for caps. The typographic tone is restrained, technical, and hyper-legible, driven by a modern grotesque sans-serif like Inter or Geist. Headlines utilize tight character tracking and medium-bold weights to convey engineering precision without aggressive marketing noise. The hierarchy is cleanly segmented, ensuring dense technical directory listings in the footer read as an orderly dashboard rather than clutter.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is strictly planimetric rather than skeuomorphic. Light mode cards rely exclusively on hairline 1px strokes (#e8ebf3) against a pale off-white backdrop (#f8f9fd) without drop shadows. The transition to the footer is articulated by a stark surface boundary where deep navy (#0c1322) takes over completely.
IMAGERY
Imagery is purely algorithmic and generative, featuring sparse, mathematical stipple fields resembling particle simulations or fluid manifolds. The particles transition smoothly from soft royal blue to cyan and violet against white card interiors. Photographic assets, heavy gradients, or cartoony illustrations would break the analytical, high-precision aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive signature is the biological stippled simulation cloud that drifts asymmetrically behind the typographic content of the cards. It communicates simulated human intelligence through a delicate, mathematical mist of dots rather than generic AI sparkles or wireframes. It must always be masked cleanly within the card boundaries and never overpower text legibility.
MUST
- Retain the sharp 60/40 visual weight split between the primary CTA and stacked secondary cards.
- Use a fine, organic point-cloud dot gradient (#255ff4 to cyan) to denote AI simulation activity.
- Isolate the single high-impact word in display titles using brand cobalt (#255ff4).
- Keep card perimeters ultra-subtle with 1px borders (#e8ebf3) and completely omit drop shadows.
AVOID
- Never replace the fine dot-matrix simulation graphics with solid vector blobs or glossy 3D renders.
- Do not apply drop shadows to the daylight feature cards; elevation is flat and boundary-based.
- Avoid using bright white text for secondary links in the footer; keep them muted at #94a3b8.
- Never make the footer background pure black (#000000); preserve the midnight blue tone (#0c1322).
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 
