Design a light-mode website section: cool frosted glass compute modules anchored by crisp dark terminals and hyper-focused developer telemetry.
LAYOUT
The page follows a classic asymmetrical 50/50 hero split contained within an 1280px max-width boundary. The left half provides a clear vertical stack: an announcement badge, massive display typography, supporting description, dual CTAs, and a horizontal triplet of feature points. The right half displays an interactive telemetry stage where overlapping dark terminals cascade into a 3D isometric glass cluster, terminated at the bottom by a full-width trust banner.
PALETTE (use these exact hex values)
- #F3F6FD — Canvas Ice Blue: Full background viewport canvas delivering a clean, sterile compute atmosphere.
- #161B26 — Deep Terminal Obsidian: Dark code editor and CLI card surfaces providing dense optical weight.
- #0F172A — Primary Text Slate: Used for the core headline, primary button fills, and bold section titles.
- #5A6578 — Secondary Body Slate: Used for supporting hero copy, metadata, and lower feature descriptions.
- #4F46E5 — Electric Indigo: Focal accent used for 'general' headline emphasis and glowing data bus connectors.
- #F87171 — Vibrant Coral: Focal accent used for 'intelligence' headline emphasis and thermal visual cues.
- #10B981 — Terminal Active Green: Used for terminal completion status indicators and successful checkmarks.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Geist), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 32px heading, 54px display. Tracking -0.03em on display, -0.01em on body. The typographic tone is authoritative, highly technical, and razor-sharp, executed through a clean geometric sans with tight negative tracking. Its mechanical precision conveys enterprise reliability and developer-first seriousness without feeling sterile. Inter or Plus Jakarta Sans perfectly fits this posture, with JetBrains Mono providing uncompromised legibility for runtime logs and API calls.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is rendered via layered planar stacking combined with soft multi-stop drop shadows rather than stark elevation rings. Dark terminal elements cast a subtle deep ambient shadow (blur 24px, 15% opacity), while foreground glass chips use backdropped frosted blur (backdrop-filter: blur(12px)) with gentle top-lit white bevel highlights. The 3D prismatic server tower anchors spatial perspective through physical rendered cast shadows upon the cool floor plane.
IMAGERY
Visual assets combine crisp flat UI chrome with high-fidelity, translucent 3D isometric hardware illustrations. The primary graphic depicts a layered crystalline glass computing stack lit with inner neon phosphors and linked via luminous fiber busses to floating glass interface tiles. Gritty photography, flat hand-drawn clip art, or overly playful 2D cartoons are completely out of place.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone split colored display headline ('general' in indigo, 'intelligence' in coral) coupled directly with glowing translucent glass server hardware connected via physical fiber bus lines to UI chips.
MUST
- Use Electric Indigo and Coral exclusively as intentional visual anchors rather than full-page fills.
- Maintain strict 10px-14px border radiuses across all UI containers and sub-cards.
- Pair dark terminal elements with light frosted glass chips to preserve high technical contrast.
- Keep typography leading extremely tight on display headlines (around 1.05 to 1.1).
AVOID
- Do not use heavy, pitch-black drop shadows; use diffused, low-opacity ambient occlusion instead.
- Do not color the entire headline in gradient text; reserve chromatic color for the key punch words.
- Never substitute rounded pill buttons with sharp 0px rectangular corners.
- Avoid warm beige or yellow background tints; the canvas must feel cool, crystalline, and synthetic.
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