Design a light-mode website section: warm iridescent gradients meet disciplined enterprise utility in an event-driven tech footer.
LAYOUT
The vertical composition is organized into two primary tiers within a centered 1280px boundary. The upper tier is an expansive, padded banner (72px padding top/bottom) creating an expansive breather before the baseline utilities. The lower tier breaks into a 5-part grid: brand/newsletter span on the left, followed by four equally weighted columns (Product, Industries, Resources, Legal), terminating with a thin full-width rule above the copyright footer.
PALETTE (use these exact hex values)
- #111827 — Obsidian Slate: Primary headings, brand wordmark, column titles, and solid button surfaces
- #475467 — Signal Dusk: CTA supporting body copy and prominent secondary descriptions
- #667085 — Muted Ash: Footer navigation links, form placeholders, and brand bio text
- #98A2B3 — Subtle Caption: Copyright text and sub-footer legal links
- #FFFFFF — Canvas White: Main footer background and primary button label fill
- #F9FAFB — Input Surface: Background fill for the newsletter input field
- #F2F4F7 — Divider Frost: Sub-footer horizontal divider line and input field stroke
- linear-gradient(135deg, #FF7B6B 0%, #E0A7FF 28%, #FF9E6C 65%, #FFD384 100%) — Prismatic Dawn: Luminous textured backdrop fill for the primary CTA banner
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, General Sans), weights 400/500/600/700. Sizes 13px caption, 14px body-sm, 15px body, 18px subheading, 20px heading, 44px display. Tracking -0.03em at display, -0.01em at body, 0 at caption. The typography is disciplined, neutral, and hyper-legible, driven entirely by an unadorned contemporary grotesque like Inter. Its tight display tracking lends an authoritative enterprise tone that balances the playful warmth of the gradient card. The absence of serif or decorative display faces ensures that complex technical and legal terms remain scannable and functional.
GEOMETRY & SPACING
Corner radii — cards 24px, links 2px, inputs 8px, buttons 10px. Spacing on a 8px unit, 32px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is communicated purely through high-chroma colour density and soft surface delineation rather than traditional drop shadows. The vibrant CTA card appears suspended above the flat white plane through chromatic contrast alone. Form controls and buttons rely on crisp 1px borders and flat fills to preserve planar modernism.
IMAGERY
The design features a custom 3D ribbed, iridescent texture evoking fluted glass refracting sunlight across coral and lavender silk. Photography is completely avoided in favour of abstract, synthetic light phenomena representing data streams and AI events. Realistic stock photos or literal hardware illustrations would severely dilute this ethereal atmosphere.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the fluted, iridescent light field trapped inside a generous 24px rounded card positioned immediately above an austere, stark-white technical footer. To execute it properly, blend soft peach-purple radial gradients on the left with vertical linear striations on the right. Misusing it involves placing flat gradients without texture or extending the colorful treatment into the functional links below.
MUST
- Retain the warm, textured light-refraction background solely within the rounded hero card.
- Maintain strict 5-column balance in the footer with the brand block claiming 2.5 columns.
- Keep typography tight: use -0.03em letter spacing for display titles above 40px.
- Ensure the CTA secondary link utilizes an explicit underline and matching stroke chevron.
AVOID
- Do not spill the prismatic gradient onto the main footer background.
- Do not introduce filled or colorful backgrounds to the footer navigation links.
- Avoid pill (full 999px) radii on CTA buttons; keep them gently softened at 10px.
- Never make the primary CTA button text anything other than clean white #FFFFFF.
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