Design a light-mode website section: warm sunset optics meet cold executive instrumentation behind frosted enterprise glass.
LAYOUT
Classic split-hero composition spanning two primary columns within a 1280px frame. Left side hosts the eyebrow badge, massive three-line headline, descriptive paragraph, dual CTAs, and KPI stat block in clean vertical descent. The right side features an oversized, slightly inset product dashboard card that overlaps the warm chromatic motion wash.
PALETTE (use these exact hex values)
- #ffffff — Canvas White: Pure base surface across the page, panels, and inner dashboard cards
- #18181b — Midnight Ink: Primary heading typography, high-priority icons, and filled call-to-action buttons
- #52525b — Graphite Muted: Subtitles, body paragraphs, and secondary navigation labels
- #a1a1aa — Pencil Tint: Metric labels, metadata captions, subtext, and subtle hairline rules
- #8b5cf6 — Prism Lilac: Headline gradient emphasis, KPI badges, recommendation sparkles, and key sparklines
- #f97316 — Solar Coral: Trailing headline gradient, category eyebrow badge text, and upward trending sparklines
- #10b981 — Growth Green: Positive delta indicators, percentage trends, and live system status dot
- #e4e4e7 — Border Frost: Card borders, secondary button outlines, and vertical metric divider lines
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, Manrope), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 32px heading, 56px display. Tracking -0.03em on display, 0 on body, +0.08em on uppercase. The typographic tone is authoritative, clean, and uncompromisingly modern. Using a tight-tracked geometric sans like Plus Jakarta Sans bridges Silicon Valley SaaS precision with high-level management consultancy gravitas, making bold claims feel institutional rather than hype-driven.
GEOMETRY & SPACING
Corner radii — cards 20px, links 999px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is handled strictly through soft ambient occlusion beneath the product preview card. The simulated dashboard floats with a wide, diffused shadow (0 24px 64px -12px rgba(0,0,0,0.12)), while all buttons, tags, and internal cards remain completely flat with 1px hairline borders.
IMAGERY
No photographic assets or human imagery exist. The visual interest is generated solely through an abstract vertical light-leak motion blur on the right perimeter and high-fidelity vector UI schematics simulating an enterprise analytics platform.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the horizontal text gradient on 'Built for operators.' transitioning seamlessly from electric violet to sunset coral, harmonizing directly with the soft optical light wash on the right canvas.
MUST
- Apply the gradient treatment exclusively to the final punchline phrase within the primary headline.
- Keep dashboard internal borders crisp at 1px with subtle neutral slate tinting (#f4f4f5).
- Pair solid dark call-to-action buttons with an external angled arrow icon (45 degrees).
- Retain ample white space on the left column to balance the dense UI card on the right.
AVOID
- Never apply drop shadows to the primary or ghost buttons; keep interactive buttons flat.
- Do not saturate the left side with background gradients; leave the hero copy on clean white.
- Avoid generic stock photography; the only acceptable imagery is simulated SaaS UI artifacts.
- Do not use dark backgrounds for the card mockup; it must stay clean porcelain white.
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