Design a dark-mode website section: an incendiary dusk gradient blooming above a midnight-ink utility footer.
LAYOUT
The layout features a centered single-column stack in the upper hero (badge, title, subtitle, dual action buttons) transitioning into a wide four-column stat bar. Immediately beneath, the layout shifts to an asymmetric footer consisting of a 2-column brand anchor, four compact link columns, and a dedicated newsletter card, closing with a balanced horizontal utility row.
PALETTE (use these exact hex values)
- #0B0F15 — Midnight Obsidian: solid background canvas for footer links, branding, and input controls
- #3A112C — Twilight Wine: deep purple-wine tone anchored at the far upper-left of the CTA background
- #A81E38 — Crimson Ember: rich red-magenta transition zone spanning the lower-mid hero section
- #FF7A38 — Solar Flame: luminous orange radiating down from the top right and backing the newsletter submit button
- #FFFFFF — Pure White: primary heading text, high-emphasis stat numbers, and category titles
- #8A94A6 — Muted Ash: secondary footer links, copyright text, disclaimer notes, and input placeholders
- #131920 — Charcoal Void: dark button fill for primary CTA and newsletter text input field
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 36px heading, 52px display. Tracking -0.03em on display, -0.01em on body. The typography relies on Inter or a high-performance neo-grotesque sans, styled with tight tracking on hero titles to project modern technical precision. It conveys calm authority, avoiding playful or decorative traits in favor of crisp enterprise legibility.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 32px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is created purely via color saturation and luminous contrast rather than drop shadows. The top CTA glows forward like backlit diffusion glass, while the bottom footer recedes into a dense, flat obsidian black.
IMAGERY
No photographic imagery is present; the entire visual weight is borne by a rich, continuous ambient mesh gradient with an organic film-grain overlay. The only graphic accents are minimal linear iconography (sparkle badge, right arrows, GitHub/LinkedIn/X brand marks).
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the dramatic full-bleed collision between a hot ember dusk grain-gradient and a flat midnight-obsidian technical footer, without borders, cards, or masking between them.
MUST
- Keep the gradient atmospheric and analog, using warm dusk hues ranging from plum to ember-orange.
- Maintain high contrast between pure white headings (#FFFFFF) and gradient color planes.
- Use thin, semi-transparent white dividing lines (1px, 18% opacity) between metric items.
- Anchor the vibrant top CTA directly to a pure dark obsidian footer without intermediate cards.
AVOID
- Do not introduce sharp box shadows; let edge boundaries and tone shifts create definition.
- Never place saturated colored typography on the gradient; use only white and translucent whites.
- Do not use full pill (9999px) border radii on standard buttons; maintain a modern 8px radius.
- Avoid harsh white dividing lines in the footer; keep dividers tinted to dark navy-slate (#171E28).
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 
