Design a light-mode website section: luminous lavender enterprise canvas anchored by electric violet commands and a piercing warm coral punchline.
LAYOUT
The main hero is an asymmetrical 2-column composition spanning 1240px: the left column occupies roughly 45% of width housing badge, display headline, body, and feature bullets. The right column takes 55%, showcasing the floating product card. Beneath the primary split, a full-width divider line introduces a synchronized social proof strip partitioned between customer logos on the left and stacked key performance numbers on the right.
PALETTE (use these exact hex values)
- #FAF9FD — Canvas Ground: Full-bleed atmospheric page background creating subtle distinction from pure white card surfaces
- #FFFFFF — Card Surface: Primary container background for the dashboard simulation card and interactive elements
- #F8F7FD — Sub-Panel Violet: Background tint for the nested 'Why it works' rail and subtle inner groupings
- #101323 — Ink Navy: Primary headings, major numerical callouts, and prominent lead labels
- #6B6F82 — Slate Heather: Body descriptions, table subtitles, metric change labels, and microcopy
- #4F33E8 — Electric Indigo: Primary CTA button background, key sparkline strokes, and active accent pills
- #FF5738 — Coral Spark: Hero headline emphasis phrase and distinctive category status indicators
- #EDE9FE — Pill Tint: Background for badge chips and micro icon encasements
- #E9E7F2 — Border Frost: Hairline card outlines and horizontal dividers within data tables
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Manrope, DM Sans), weights 400/500/600/700/800. Sizes 11px caption, 13px body-sm, 15px body, 17px subheading, 20px heading, 32px heading-lg, 48px display. Tracking -0.03em display, -0.01em body. Plus Jakarta Sans delivers a geometric, authoritative, yet friendly modern tech tone. Its tight letter tracking and solid x-height maintain razor-sharp legibility across dense data tables and massive 48px hero headlines. Substituting with Inter is acceptable for pure utility, but Plus Jakarta Sans provides the distinct contemporary roundness seen here.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 32px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created entirely through very broad, low-opacity ambient drop shadows rather than heavy outlines (e.g., 0 20px 50px -12px rgba(80, 52, 235, 0.08)). Layer 0 canvas feels flat and expansive, while Layer 1 dashboard cards float noticeably above the surface. Nested components use border boundaries rather than secondary drop shadows to prevent visual mud.
IMAGERY
Avoids literal photographic depictions of people or stock offices, leaning completely into high-fidelity simulated UI components. Visual interest is derived from clean data graphics: smooth Bezier curve line charts, vector micro-icons, and clean status indicators. Any added illustration must be minimalist, monoline, and rendered in matching brand indigo.
SIGNATURE DETAIL — the thing that makes this design itself
The three-line period-delimited display headline terminating in a bright coral punchline ('Powered by AI.') placed alongside a high-density, multi-tile simulated dashboard card. Removing this punchline or replacing the rich multi-section preview card with an abstract screenshot would instantly compromise the design's signature SaaS identity.
MUST
- Reserve the coral red (#FF5738) strictly for key headline accents and warning dots.
- Encase primary dashboard containers in a generous 24px border radius.
- Pair heavy display numbers (bold 700/800) with small, wide-tracked muted helper text.
- Use 1px borders (#E9E7F2) solely to partition data tables and badge frames softly.
AVOID
- Do not use dark, heavy, or saturated borders that segment the layout aggressively.
- Do not apply the coral color to large background fills or CTAs.
- Do not introduce multiple divergent sans-serif typefaces into the composition.
- Do not make the secondary button filled; keep it an outlined white tile.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub