Design a light-mode website section: airy lavender canvas punctuated by neon-tinged indigo gradients and crisp pill-shaped developer utilities.
LAYOUT
The vertical composition is split into two distinct tiers: a centered, spacious hero CTA stack followed by an expansive multi-column navigation footer. The hero centers a two-line headline, two-sentence descriptive paragraph, dual CTA buttons, and inline trust proofs. Below a full-width 1px hairline divider, the footer branches into a brand metadata anchor on the left, four equidistant link columns in the center, and a newsletter form on the right.
PALETTE (use these exact hex values)
- #ffffff — Canvas Pure: Primary surface for page body and footer background container.
- #f6f8fe — Aurora Wash: Soft atmospheric background tint behind top CTA area.
- #5852fe — Primary Indigo: Solid primary pill button, brand logomark fill, and interactive focus states.
- linear-gradient(90deg, #5b5ffc 0%, #a855f7 50%, #f472b6 100%) — Gradient Headline: Accent text fill for highlighted hero phrase and brand emphasis.
- #0f172a — Text Display: Main display headline and high-emphasis brand titles.
- #475569 — Text Body: Secondary description copy, form input text, and footer links.
- #94a3b8 — Text Muted: Uppercase column captions, subtle helper microcopy, and copyright statement.
- #e2e8f0 — Hairline Border: Delicate 1px borders on inputs, secondary buttons, and section dividers.
- #f1efff — Tag Lavender: Subtle background pill for hiring tag and feature chips.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 56px display. Tracking -0.03em at display, 0.05em on captions. The geometric sans-serif typeface conveys technical precision, clarity, and modern engineering maturity. Its generous counter-spaces and clean curves keep large display weights legible while ensuring 11px uppercase metadata remains razor-sharp. Inter or Plus Jakarta Sans are optimal open-source drop-ins that preserve this crisp developer-tool vibe.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 999px, buttons 999px. Spacing on a 4px unit, 32px gaps, 100px between sections, 1200px container, airy density.
DEPTH
Depth is flattened and entirely deliberate, eschewing drop shadows in favor of pristine 1px hairline borders (#e2e8f0). Contrast and layer segregation are created exclusively via white-on-light-gray fills and generous atmospheric empty space. Primary pill elements achieve visual dominance strictly through bold saturation rather than physical elevation.
IMAGERY
Vector line graphics take the form of faint, hairline concentric wave patterns watermark-etched into the upper perimeter. No photographic imagery, raster artwork, or skeuomorphic textures are present. Any replacement graphics should be abstract, mathematical SVG wire contours rendered at 5-10% opacity.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the vibrant horizontal text gradient ('On Projectx.') flowing from electric indigo to hot pink, floating over an ethereal light field. To implement correctly, wrap the target word in a span with background-clip text and webkit-fill-color transparent against solid dark surrounding type. Misusing this by applying the gradient across entire body paragraphs or button fills dilutes its singular focal power.
MUST
- Keep button and input elements strictly in full pill (999px) shapes.
- Restrict the neon gradient strictly to emphasized display type spans and branding.
- Use uppercase 11px type with 0.08em tracking for all footer section titles.
- Separate metadata proofs with faint 1px vertical rules (#e2e8f0) and ample horizontal breathing space.
AVOID
- Do not use sharp rectangular corners on interactive buttons or form fields.
- Do not apply the gradient fill to body text or standard CTA buttons.
- Do not introduce heavy drop shadows; depth must rely on flat hairline borders.
- Do not clutter the top CTA hero with dense illustrative graphics.
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 
