Design a light-mode website section: hyper-modern silicon architecture suspended over misty rolling meadows under crisp overcast light.
LAYOUT
The header spans the maximum 1360px container with three clean focal regions (wordmark, navigation, standalone access button). Below, the viewport divides into an asymmetric two-column split: left column stacks the category chip, a 4-line display headline, two-sentence body prose, dual CTAs, and a wide 3-stat metric plinth; the right half allows the monumental floating chip asset to breathe against the horizon.
PALETTE (use these exact hex values)
- #F4F6F9 — Atmospheric Mist: Uppermost canvas wash fading smoothly down to sky horizon
- #11141A — Silicon Onyx: Primary headings, top nav CTA button fill, and silicon chip body
- #3F47E8 — Electric Cobalt: Emphasis headline text, primary hero button, badge icon, and metric figures
- #5B8BFB — Subtle Nitrogen Glow: Rim lighting and under-glow cast from the floating ASIC chip
- #10B981 — Verification Emerald: Status indicator dot denoting physical silicon lab validation
- #525C6C — Slate Body: Explanatory subcopy, category subtitles, and metric description labels
TYPOGRAPHY
Typeface Inter (or Geist,SF Pro Display,Plus Jakarta Sans), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px subheading, 32px heading, 60px display. Tracking -0.03em at display, -0.01em at body. Surgical, intellectual, and unpretentious. The neo-grotesque sans (Inter match) conveys institutional engineering rigor without decorative flair, letting the sharp scale contrast between 60px display headings and 12px micro-labels carry the pacing.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 14px, buttons 14px. Spacing on a 8px unit, 20px gaps, 96px between sections, 1360px container, comfortable density.
DEPTH
Depth is created organically via 3D physical occlusion and atmospheric layers rather than conventional card drop-shadows. The floating microchip casts a soft, light-blue diffuse ambient shadow over the turf, while the metric dock relies on frosted backdrop-blur (16px blur, 75% opacity) with a faint 1px white rim light to separate from the background blades of grass.
IMAGERY
A juxtaposition of photorealistic pastoral landscape photography—soft morning sunlight sweeping across lush green grass dunes—with high-precision industrial design CAD renders of silicon microprocessors. Avoid stock conceptual network nodes, glowing digital brains, or generic datacenter rack photos.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an obsidian microchip emitting cool neon underside glow directly over rolling green grassy meadows under hazy daylight. Recreate it by pairing high-fidelity outdoor landscape photography with a suspended matte 3D hardware element and a frosted glass proof bar overlapping the terrain.
MUST
- Ground cutting-edge hardware claims against serene, organic natural lighting and earthly landscapes.
- Use Electric Cobalt (#3F47E8) strictly for active vectors, key punchlines, and quantitative metric values.
- Maintain generous 24px border radii on glassmorphic floating data containers.
- Pair frosted glass backgrounds with backdrop-filter: blur(16px) and subtle 1px translucent white borders.
AVOID
- Do not use dark cyberpunk neon themes, terminal green, or clichéd circuit-board tracings.
- Never center-align the main headline; the architectural layout relies on left-anchored tension.
- Avoid solid opaque white cards over nature backgrounds; opacity must feel continuous and translucent.
- Do not make buttons pill-shaped; constrain button corner radii to precisely 12px–14px.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub