Design a light-mode website section: crystalline technical certainty anchored by glowing optical fiber streams on an immaculate white canvas.
LAYOUT
The layout follows a centered vertical hierarchy anchored by horizontal data flow. At top is a lightweight 64px navbar with generous margins. Below, a live status pill precedes a centered 56px headline, supporting paragraph, and dual CTA buttons. The bottom half opens into a widescreen technical visualization: input cards stacked on the left, crystalline AI core centered, and output validation cards stacked on the right.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas Pure White: Dominant background of the header and upper hero section
- #0B1226 — Ink Navy: Primary headline text, brand wordmark, and prominent labels
- #1D58F6 — Cobalt Blue: Hero headline accent line, primary CTA buttons, and status indicators
- #535E73 — Subtle Slate: Subheadings, supporting body text, and secondary navigation links
- #D9E2EC — Hairline Border: Outlines on secondary buttons, badges, and floating cards
- #10B981 — Verification Green: Checkmark icons in verified output cards
- #00A3FF — Luminescent Cyan: Left-hand input data stream fibers and glowing refraction
- #EC4899 — Prismatic Magenta: Right-hand resolved output background gradient and fiber flare
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 15px body, 18px subheading, 28px heading, 56px display. Tracking -0.03em for headlines, -0.01em for body. The typography is clinical, modern, and authoritative. Using a contemporary neo-grotesque like Inter Display with tight letter-spacing (-0.035em on display titles), it projects software precision and institutional trust. For implementation, Plus Jakarta Sans or SF Pro Display offer an exact visual substitute without altering the tight optical balance.
GEOMETRY & SPACING
Corner radii — cards 10px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 16px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is achieved through atmospheric optical effects and clean layering rather than heavy drop shadows. Frosted white surfaces (#FFFFFFE6) with delicate 1px borders float directly over glowing 3D fiber optic renders. The central cubic structure uses ambient occlusion and volumetric blue backlighting to create dimensional presence against the flat white top canvas.
IMAGERY
The imagery centers on an intricate 3D rendered isometric matrix cube constructed from glowing acrylic-like blocks, illuminated from within by pure white light. Radiating outward are fiber-optic ribbon streams—electric cyan on the input side transitioning to warm magenta-violet on the output side. Photography or generic vector illustrations would completely break the hyper-technical, deterministic aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The standout signature move is the horizontal pipeline visualization: floating frosted UI input chips feeding via laser-fine paths into a central glowing 3D matrix block, which outputs verified status chips over violet fiber ribbons. Misusing it involves making the graphic a passive background rather than an explicit visual explanation of inputs becoming deterministic outputs.
MUST
- Keep the top 40% of the viewport clean white to let typography breathe before visual complexity begins.
- Split dual-phrase display headings with the second line accented in vibrant #1D58F6.
- Use 10px border radii consistently across buttons and floating data tags.
- Anchor complex 3D graphic elements with clean, minimal 2D UI callout cards on either side.
AVOID
- Do not introduce dark mode canvases or heavy dark section containers in this hero.
- Avoid heavy drop shadows on floating cards; rely on white surface contrast and 1px borders.
- Do not use multi-color gradients for the headline text; use flat two-tone color shifts.
- Avoid sharp 0px or overly bubbly 20px+ radii on cards; maintain strict 10px corners.
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. 在 DraPub 中尝试 
