Design a light-mode website section: luminous frosted porcelain surfaces paired with cobalt precision for mission-critical developer tooling.
LAYOUT
The layout is divided into two distinct zones: a top bento grid (comprising one 8-column main card on the left and two stacked 4-column cards on the right) followed by an expansive footer section. The footer spreads cleanly across the bottom container with brand info and social buttons on the left, a 4-column link matrix in the center, and a newsletter sign-up block on the right. A single horizontal hairline separator anchors the legal copyright and policy links at the very base.
PALETTE (use these exact hex values)
- #f8fafc — Background Tint: Global backdrop providing subtle contrast against bright white card containers
- #ffffff — Card Surface: Primary surface for modular CTA cards, input controls, and icon enclosures
- #e2e8f0 — Border Subtle: Delicate boundary line for cards, input containers, and social icon buttons
- #2563eb — Electric Cobalt: Focal headline emphasis, primary CTA fill, active link accents, and logo glyph stroke
- #1d4ed8 — Cobalt Hover: Hover and pressed states for primary button surfaces
- #0f172a — Ink Slate: Dominant text tone for headings, card titles, and logo wordmark
- #64748b — Muted Slate: Descriptive copy, subheadings, footer navigation links, and copyright text
- #10b981 — Mint Shield: Verification badges, HIPAA compliance iconography, and security graphic accents
- #f59e0b — Amber Lock: Warm accent for isolation and safety compliance icon highlights
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 22px heading, 38px display. Tracking -0.03em for display headings, 0.08em for uppercase badges. The type choice (Inter or similar neo-grotesque) conveys quiet competence, clinical precision, and developer-first utility. Display sizes carry tight negative tracking (-0.03em) to prevent titles from sprawling, while metadata and eyebrows utilize spaced uppercase tracks. If substituted, pair modern geometric sans like Plus Jakarta Sans or Geist to retain this surgical engineering clarity.
GEOMETRY & SPACING
Corner radii — cards 20px, links 6px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is created via luminous, translucent surfaces rather than heavy elevation shadows. Cards use a faint, diffuse drop shadow (rgba(15, 23, 42, 0.04) 0px 4px 20px) paired with a crisp 1px stroke (#e2e8f0). The 3D illustrated assets feel weightless, emerging seamlessly from card interiors via subtle radial gradients.
IMAGERY
Visual assets consist of matte, frosted-glass-and-porcelain 3D isometric models tinted with pale cyan, sky blue, and white. Shapes are clean and pneumatic (layered cloud slabs, contoured rockets, and translucent shields) with glowing edge highlights. Complex photorealistic human imagery or dense flat clip art would violate the pristine technical aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the dual-tone display headline paired with a frosted, pale blue isometric 3D asset fading gracefully into the right side of the card. This signals both enterprise reliability and cutting-edge cloud infrastructure. It is misused when high-contrast flat graphics replace the soft translucent render or when the blue headline highlight is applied to too many words.
MUST
- Use 20px border radius across all major content cards for consistent softness.
- Split main display headlines between deep slate #0f172a and vibrant cobalt #2563eb.
- Enclose secondary feature graphics inside the right half of bento cards with faded gradients.
- Keep text input fields and buttons aligned at matching 10px corner radii.
AVOID
- Do not use harsh dark borders or stark black drop shadows on card surfaces.
- Avoid solid vibrant backgrounds across entire sections; reserve punchy color for accents.
- Do not mix sharp right-angled rectangles into this soft-cornered layout.
- Never shrink body typography below 11px to maintain legibility on technical copy.
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 
