Design a light-mode website section: crisp bento telemetry floating over soft iridescent ambient gradients.
LAYOUT
The hero uses a classic split layout: left column holds narrative copy (status pill, massive 56px H1, body description, dual CTAs, compliance badges), while the right column showcases an asymmetric bento grid. The bento grid features a prominent 2-row-spanning cobalt card next to a vertical stack of three metric cards, underlined by a sources card. The entire hero is anchored at the bottom by a wide frosted social proof stats bar.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas Base: Primary surface background blending into atmospheric radial edge glows
- #FFFFFF — Card Surface: Opaque card containers for metric sparklines, connected sources, and main content
- #4F6BF5 — Live Widget Blue: Signature primary blue card gradient anchor for live interactive demonstrations
- #0C56F7 — Electric Action: Primary CTAs, navigation action button, and prominent brand accents
- #0F172A — Text Primary: Headlines, core numeric metrics, and primary high-contrast titles
- #64748B — Text Muted: Supporting body descriptions, micro headers, and contextual metadata
- #10B981 — Success Positive: Telemetry upward trends, verified answer indicator dots, and live status pills
- #E2E8F0 — Border Subtle: Subtle card outlines, button borders, and horizontal badge dividers
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 28px heading, 56px display. Tracking -0.03em at display, 0.05em at micro caps. The typography is modern, engineered, and authoritative. A contemporary neo-grotesque sans-serif (Inter) delivers sharp enterprise credibility at display scale through negative letter-spacing, while uppercase micro-labels project high-precision telemetry. Substitute with Geist or Plus Jakarta Sans for equivalent structural balance.
GEOMETRY & SPACING
Corner radii — cards 16px, links 9999px, inputs 10px, buttons 10px. Spacing on a 4px unit, 16px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created purely through ambient contrast and soft diffuse blur rather than structured elevation levels. Solid white cards hover over a pastel-tinted luminous background with a faint 1px hairline border (#E2E8F0) and minimal diffuse ambient shadow (0 12px 32px rgba(0, 0, 0, 0.03)). Inside the featured blue card, secondary containers use frosted glass translucent white fills.
IMAGERY
Avoid photographic imagery or figurative 3D illustrations. Visuals are strictly telemetry-driven: simulated UI cards, live response dialogue boxes, minimal vector software icons (Notion, Slack, GitHub), and smooth smoothed SVG wave sparklines. Everything represents functional product utility.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an ultra-saturated royal blue live-dialogue card embedded seamlessly beside surgical white sparkline cards, all floating effortlessly atop an ambient pastel aurora mesh. Losing this blue-white contrast or the soft ambient glow would reduce the identity to a generic dashboard.
MUST
- Anchor the right side with a balanced 2-column or 3-column bento grid of metric telemetry.
- Use uppercase tracking (0.08em) at 11px for telemetry card category labels.
- Keep card backgrounds pure white (#FFFFFF) so they lift against the ambient pastel mesh.
- Feature exactly one high-saturation cobalt gradient card to anchor visual weight.
AVOID
- Do not use dark or harsh drop shadows; rely on soft ambient spread and border hairlines.
- Do not make all bento cards colorful; the interface requires pure white for clinical clarity.
- Avoid pill radiuses on cards; cards must stay strictly at 16px radius.
- Do not clutter metric cards with full chart grids or explicit axis labels.
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 中尝试