Design a light-mode web interface screen: luminous corporate tech softened with pale cyan blobs, rounded cards, and elevated clay-style 3d geometry.
LAYOUT
The page follows a structured hierarchical top-to-bottom rhythm. It starts with a floating pill-shaped top nav, followed by an asymmetrical two-column hero section (text on the left, 3D laptop focal point on the right). Below the hero CTAs sits a 3-part micro-feature row, resolving into a balanced 4-column service card deck and culminating in an expansive 4-column proof/metrics ticker at the base.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Ice: Global application page background providing a clinical, high-clarity base.
- #FFFFFF — Surface Pure: Card backgrounds, floating stats chips, and hero backdrop plate.
- #2563EB — Cobalt Primary: Primary CTA button fills, keyword highlights in hero, active navigation indicators, and primary links.
- #0F172A — Midnight Ink: Primary headings, stat numerals, and high-emphasis body copy.
- #64748B — Slate Muted: Body descriptions, supporting subtext, and inactive navigation links.
- #E2E8F0 — Soft Frost Border: Subtle card outlines, secondary button borders, and pill tag strokes.
- #EC4899 — Amethyst Accent: Icon container background and illustration accent in 3D laptop composition.
- #10B981 — Emerald Trend: Performance chart sparkline, success checkmark badges, and positive metrics.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter,Outfit,DM Sans), weights 400/500/600/700/800. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 28px heading, 52px display. Tracking -0.03em at display, -0.01em at body. Plus Jakarta Sans delivers a geometric, precise, and tech-forward voice that avoids cold clinical sterility. Its rounded counters and tight tracking (-0.03em at display scale) evoke modern high-end software development. For open-source setups, Inter or Outfit serve as direct drop-in alternatives without compromising structure.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 10px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is created using subtle ambient diffusion rather than layered z-index borders. Primary cards rely on light 1px boundaries with flat white fills, while 3D laptop hardware and floating analytical chips cast deep, blurred shadows (box-shadow: 0 20px 40px -15px rgba(30, 58, 138, 0.12)) to appear suspended above the canvas.
IMAGERY
The imagery language centers on glossy, soft-shaded 3D clay-isometric tech elements—a sleek white laptop displaying a dark code terminal, flanked by floating app badges with rounded edges. Vector code symbols, cloud icons, and smooth glowing gradients enhance the futuristic, developer-focused aesthetic. Avoid grain, harsh textures, or realistic candid stock photography.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the ambient organic azure blob tucked behind an elevated, clean 3D clay laptop illustration encircled by floating soft-edged tech tags. Recreate it by pairing a CSS radial glow/blob (--color-canvas-accent) with floating UI cards sporting a 16px radius and soft 24px drop shadows.
MUST
- Use electric blue (#2563EB) strictly for active states, key CTAs, and semantic headline accents.
- Maintain uniform 16px border radiuses across all service and container cards.
- Pair 3D isometric hero hardware elements with ambient, low-opacity organic background puddles (#E0EDFD).
- Keep card stroke borders light and delicate at 1px solid #E2E8F0.
AVOID
- Do not use dark, harsh dropshadows; keep shadows diffused, low-opacity, and slightly blue-tinted.
- Never apply sharp, unrounded 0px corners to interactive cards or major UI surfaces.
- Avoid solid dark backgrounds; this design relies entirely on airy, luminous white-and-light-blue spaces.
- Do not color entire headings in electric blue; reserve color for single keyword emphasis.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3312:2480. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
