Design a light-mode website section: crisp product telemetry and bento workflows wrapped in sterile white surfaces and subtle crimson energy.
LAYOUT
The section adopts a modern 12-column bento grid. The left 6 columns hold the primary hero group (brand badge, 48px display headline, subtitle, dual CTAs, and a detailed SaaS control panel preview). The right 6 columns are subdivided into a balanced 2-column by 3-row grid of compact cards, each demonstrating a unique product superpower.
PALETTE (use these exact hex values)
- #FAF9F8 — Canvas Background: Outer structural page canvas surrounding cards and containers
- #FFFFFF — Card Surface: Primary surface for bento feature cards and dashboard viewport
- #F1F5F9 — Subtle Border: Delicate border around cards, inner panels, and table rows
- #D32F2F — Brand Crimson: High-emphasis primary CTA button, brand mark, and trendline stroke
- #FEE2E2 — Brand Crimson Soft: Active sidebar indicator background and warm ambient background bleed
- #10B981 — Positive Metric: Growth indicators, percentage delta badges, and completed workflow checkmarks
- #0F172A — Primary Text: Display headline, card titles, and high-impact stat figures
- #64748B — Secondary Text: Subtitles, body copy, table labels, and inactive navigation links
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Geist), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 20px heading, 28px heading-lg, 48px display. Tracking -0.03em on display, -0.01em on body. The voice is authoritative, swift, and highly engineered. Rendered in a clean, tight geometric sans-serif (Inter / Plus Jakarta Sans match), the display copy uses negative tracking (-0.03em) and bold cuts for punchiness, while data displays employ tabular numerals and compact line-heights to emulate a high-end enterprise cockpit.
GEOMETRY & SPACING
Corner radii — cards 20px, links 6px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1360px container, comfortable density.
DEPTH
Depth is created almost entirely without shadows. Surface boundaries are delineated by 1px borders in soft slate (#F1F5F9) resting over an off-white field (#FAF9F8). The only atmospheric depth comes from a soft, high-diffusion crimson gradient plume blooming behind the hero dashboard container.
IMAGERY
No photographic lifestyle imagery is present. Visual storytelling relies entirely on synthetic micro-UI simulations: miniaturized dashboards, interactive reply bubbles, pipeline charts, and workflow pipeline nodes. Illustrations or complex 3D renders would break the utilitarian, software-native feel.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric juxtaposition of a full live-state dashboard preview on the left against a neatly organized 2x3 matrix of micro-interactive bento tiles on the right, punctuated by a faint crimson atmospheric glow.
MUST
- Use 20px corner radius on outer bento modules and 8-10px on inner widgets.
- Pair crimson (#D32F2F) strictly with primary conversion elements and focal brand highlights.
- Maintain high contrast between display text (#0F172A) and body captions (#64748B).
- Nest micro-UIs (lists, graphs, steppers) into lower halves of bento cards with 16px top margin.
AVOID
- Do not use dark backgrounds; the layout relies entirely on crisp light-mode surfaces.
- Do not saturate card surfaces; keep them pure white (#FFFFFF) against off-white (#FAF9F8).
- Never apply heavy drop shadows; depth is strictly defined by border contours and subtle gradient air.
- Avoid mixed font families; rely exclusively on weight and scale within a modern neo-grotesque.
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 
