Design a light-mode website section: frosted glassmorphism floating effortlessly over rational developer-tool typography with vivid cobalt activation points.
LAYOUT
The layout is divided into two balanced macro sections: a self-contained, high-impact CTA card spanning the full width of the container, followed by an expansive 6-column footer grid. The footer dedicates the first column to the logo and mission statement, four central columns to categorized links, and the final column to the newsletter subscription module. A final horizontal sub-bar terminates the page with copyright and policy links.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Global page background and primary card fill
- #2B5DF6 — Electric Cobalt: Primary CTA button fill, active brand icon tint, and focus states
- #0F172A — Charcoal Black: Display headlines, column headers, and primary branding wordmark
- #64748B — Muted Slate: Body copy, subtext descriptions, and footer navigation links
- #94A3B8 — Subtle Gray: Input placeholder text, legal notices, and copyright metadata
- #E2E8F0 — Hairline Slate: Card borders, secondary button outlines, input perimeter, and divider rules
- #EEF2FF — Pill Tint Blue: Subtle background fill for the top 'READY TO BUILD' capsule tag
- #F0F4FF — Atmospheric Glow: Soft linear gradient ambient wash behind glass cards within CTA container
TYPOGRAPHY
Typeface Inter (or Geist Sans,SF Pro Display,Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px heading, 36px display. Tracking -0.02em at display, 0.05em at uppercase badges. The typographic tone is architectural, rational, and modern, reflecting the mindset of high-velocity software engineering. Inter (or a similar modern grotesk) delivers clean legibility at compact sizes (13px footer links) and assertive confidence at display scales (36px). It avoids quirky eccentricities, prioritizing pristine typographic rhythm and crisp vertical alignment.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 32px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Elevation is achieved through light dispersion rather than dark drop shadows. The primary CTA banner uses an ultra-diffuse, low-contrast shadow combined with a subtle 1px border (#E2E8F0) to softly lift off the pure white page canvas. Inner glass elements leverage backdrop blur and edge specular highlights to convey multi-layered physical depth.
IMAGERY
The imagery consists solely of 3D, semi-transparent frosted glass UI abstractions—such as rounded cards, floating sparkles, crosshair icons, and faint cyan-tinted line charts. Surfaces appear like precision-cut acrylic with soft cyan, lavender, and white reflections. Photography or solid cartoon illustrations would completely break the hyper-clean developer aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The design's signature element is the floating frosted-glass CTA card with soft edge-lit atmospheric lighting and semi-transparent 3D code/chart emblems flanking the headline. To use it properly, keep the background nearly white with only faint pastel ambient glows, letting the 3D refractive glass do the visual storytelling. A common mistake is oversaturating the backdrop gradient, which turns the subtle frosted glass into muddy plastic.
MUST
- Keep CTA graphics strictly translucent, using frosted glass effects with refractive edges rather than flat opaque illustrations.
- Reserve the solid cobalt fill (#2B5DF6) exclusively for primary conversion interactions and the brand logo mark.
- Maintain generous 24px outer corner radiuses on the main CTA card while stepping down to 8px on inputs and buttons.
- Ensure navigation column headers use #0F172A at 14px semibold to clearly establish vertical reading tracks.
AVOID
- Do not introduce dark saturated backgrounds into the CTA card; it must remain airy and frosted white.
- Do not mix multiple font families; stick entirely to a single precision neo-grotesque sans across all sections.
- Do not use sharp 0px corners on interactive buttons or form fields; always preserve the standard 8px radius.
- Avoid colored drop shadows; elevation should rely on low-opacity neutral blur and delicate boundary borders.
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 
