Design a light-mode website section: crystalline glass cards converging along bioluminescent circuits into a glowing central processing nexus.
LAYOUT
The layout uses a centered pyramid rhythm beginning with a top badge, cascading into an oversized display headline, subtext paragraph, and dual CTAs. Below the fold line, the composition splits into a three-column pipeline: integration inputs on the left, the elevated processing core and capability pillars in the center, and dynamic output metrics on the right. A wide unified ledger card stabilizes the bottom of the central processing stage.
PALETTE (use these exact hex values)
- #FAFAFD — Canvas Pearl: Background base surface across the entire hero section.
- #5A52E0 — Periwinkle Accent: Primary interactive buttons, category icons, glowing fiber optics, and primary headline emphasis.
- #F87171 — Coral Glow: Accent gradient stop in headline ('business'), right-side circuit trails, and metric sparklines.
- #1E1E2F — Obsidian Body: Primary headline typography and high-emphasis logo branding.
- #6E6D82 — Muted Slate: Hero description paragraph, trust bar badges, and card micro-labels.
- #E5E4F0 — Hairline Border: Subtle stroke on secondary buttons and inactive card containers.
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans, SF Pro Display, Geist), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 32px heading, 60px display. Tracking -0.03em at display, -0.01em at body. The typography is clinical, ultra-modern, and confident, reminiscent of premier infrastructure software. Inter Display (or Plus Jakarta Sans) provides geometric legibility with clean apertures and neutral letterforms that keep the focus on the data narrative. Tight tracking at display scales conveys mathematical precision and premium enterprise reliability.
GEOMETRY & SPACING
Corner radii — cards 16px, links 9999px, inputs 8px, buttons 10px. Spacing on a 4px unit, 20px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is rendered purely through optical layering and physical glassmorphism rather than dark drop shadows. Glass cards receive 1px semi-transparent white top-light borders paired with wide, diffuse shadows (rgba(90, 82, 224, 0.08) with 30px blur). The central 3D chip projects light downward onto layered circuit planes, casting realistic multi-tier ambient reflections.
IMAGERY
The visual language is abstract technical hardware combined with luminous fiber optics and particle fields. Flowing blue particles feed in from the left, process through a frosted silicone-and-glass microprocessor, and emerge as warm coral telemetry data on the right. Stock photography, literal humans, or flat vector clip-art would break the high-tech atmospheric aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The horizontal data-convergence pipeline: glowing fiber-optic circuit conduits physically bridging left-side input SaaS logos into a central floating 3D processor puck, which emits warm coral telemetry into right-side metric glass tiles. To use it properly, retain the distinct cold-to-warm light temperature shift across the canvas.
MUST
- Use backdrop-filter blur(16px to 24px) combined with subtle 1px semi-transparent white borders on all floating cards.
- Limit color gradients to glowing energetic traces and delicate headline text accents.
- Maintain strict symmetry between left data ingestion nodes and right analytical outputs.
- Keep typography crisp, neutral, and tightly tracked to counter-balance the intricate 3D graphic.
AVOID
- Do not use dark, heavy, or opaque solid backgrounds for modular UI tiles.
- Avoid harsh black drop shadows; keep elevation shadows tinted with faint indigo or purple.
- Do not style secondary buttons with dark fills; they must remain airy and frosted.
- Avoid cluttered iconography; use monoline vector symbols sized exactly at 14px to 16px.
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