Design a dark-mode website section: clinical precision meets atmospheric violet glow across a high-contrast day-to-night horizon.
LAYOUT
The page flows vertically from a centered, high-density conversion block (status pill, dual-line headline, supportive paragraph, twin buttons) down into a sharp horizontal cut. Below this horizon, a massive brand wordmark spans edge-to-edge, followed by a 6-column footer grid (brand identity, four link categories, and an inline newsletter form). A dedicated sub-footer rail locks the base with live system status, legal routes, and copyright data.
PALETTE (use these exact hex values)
- #020412 — Void Obsidian: Deep navy base canvas for the entire footer section and input fields
- #f8f7fd — Luminous Cloud: Soft ethereal canvas supporting the top CTA section before the drop
- linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #2563eb 100%) — Atmospheric Glow: Primary interactive buttons, logo glyph, and ambient atmospheric haze
- #0f172a — Deep Cobalt Text: High-contrast headings in the light upper conversion section
- #ffffff — Pure White: Column headings, newsletter prompt, and button text in dark footer
- #94a3b8 — Starlight Slate: Subtle secondary links, legal disclaimers, and metadata in footer
- #10b981 — Active Emerald: Live indicator dot for infrastructure health and system status
- #0284c7 — Border Cyan Glow: Micro horizontal rule accents above footer category link headers
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 20px subheading, 24px heading, 48px heading-lg, 140px display. Tracking -0.03em at display, 0.01em at body-sm. The typographic tone is authoritative, clean, and clinical without feeling cold. Set in a tight geometric sans resembling Plus Jakarta Sans or Inter, display weights use negative tracking to convey infrastructural permanence, while body text uses expanded heights for effortless screening legibility. Any replacement must be a modern neo-grotesque with neutral terminals and distinct tabular numerals.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 24px gaps, 112px between sections, 1280px container, comfortable density.
DEPTH
Depth is created purely through ambient light emission rather than drop shadows. A wide-angle atmospheric violet-to-blue radial bloom illuminates the light canvas from the right edge, while the dark footer surface absorbs light with flat, crisp 1px borders (#1e293b) and high contrast text.
IMAGERY
No photographic imagery is present; the visual authority comes from atmospheric grain textures, bioluminescent linear gradients, and clean clinical vector iconography. Photographic assets would clutter the medical-grade clarity of the interface.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the massive gradient-filled brandmark 'Adialante' straddling the threshold between the light CTA atmospheric glow and the deep void footer. It functions simultaneously as typography, structural architecture, and an ambient horizon light source. Misusing it means shrinking it to standard logo size or detaching it from the footer's top edge.
MUST
- Anchor the transition between light CTA and dark footer with the oversized gradient brandmark.
- Maintain the clinical 8px vertical rhythm across navigation column stacks.
- Use micro-accents like the 24px cyan bar strictly above column titles to preserve structure.
- Pair emerald status dots with monospace or wide-tracked caption typography.
AVOID
- Never replace the smooth ambient violet gradient bloom with sharp solid geometric shapes.
- Do not use dark typography inside the footer section; contrast must remain AAA against #020412.
- Avoid fully rounding button corners into pills; buttons strictly use 10px squircle corners.
- Never remove the horizontal accent indicator above footer category column headings.
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