Design a light-mode website section: clinical industrial enterprise software dressed in airy lilac tints, crisp micro-data cards, and kinetic dot waves.
LAYOUT
The page structure splits the 1240px container into an asymmetrical 45/55 two-column composition. The left column stacks the eyebrow badge, a high-impact three-line headline, supportive value-prop copy, twin CTAs, and a horizontal feature rail. The right column organizes an offset multi-card mosaic depicting enterprise modules (Demand, Production, Inventory, Financials) culminating in a centered partner logo strip below.
PALETTE (use these exact hex values)
- #FAF9FD — Canvas Base: Lightest foundation background subtly bathed in ambient violet luminescence
- #FFFFFF — Card Surface: Pure white background for floating telemetry cards, modals, and secondary buttons
- #5C43F6 — Primary Indigo: Lead CTA fill, primary brand keyword emphasis, and core iconography accents
- #EB5757 — Signal Coral: Focal punctuation mark and high-visibility alert state in production metrics
- #2F80ED — Telemetry Blue: Financial and inventory line charts, status indicators, and metric data points
- #EFEAFD — Lilac Tint: Background pill fill for eyebrow tags and micro-icon containers
- #16151E — Ink Slate: Display headlines, prominent numerals, and high-contrast titles
- #636674 — Muted Ash: Supporting descriptive copy, inactive navigation links, and chart sublabels
- #E7E5F0 — Border Shroud: Hairline card boundaries, input strokes, and secondary button perimeters
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, Manrope), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 16px body, 18px body-lg, 28px subheading, 60px display. Tracking -0.03em at display, 0 at body, +0.05em at micro. Modern technical authority delivered through Plus Jakarta Sans (or Inter as a zero-cost drop-in). The tight letter-spacing (-0.035em) on display sizes projects institutional software power, while generous tabular-capable numerals ensure complex operational figures remain instantly scannable.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created using hairline structural containment rather than heavy drop shadows. Cards float over the canvas with an ultra-soft ambient shadow (0 4px 20px rgba(92, 67, 246, 0.04)) accompanied by a precise 1px stroke in #E7E5F0. This keeps the technical UI crisp and eliminates visual mud.
IMAGERY
Photography captures real-world manufacturing environments bathed in natural workshop lighting: workers in clean safety gear interacting with tablets, high-precision robotic arms, and industrial assembly stations. Over-saturated stock photos or clunky futuristic sci-fi tropes are strictly avoided.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone headline resolution paired with the diagonal dot-mesh particle wave. Coloring the terminal word 'Intelligently' in brand indigo and capping it with a signal-coral period immediately cements brand identity while the subtle 3D dot matrix bridges technical logic with human execution.
MUST
- Reserve the sharp coral tint (#EB5757) strictly for isolated focal moments like headline punctuation or alert stats.
- Pair every abstract data visualization card directly with real-world human factory photography to ground the software.
- Maintain high typography contrast by setting dark display copy (#16151E) against clean white cards and faint tinted canvases.
- Enforce consistent 8px corner radii on all interactive controls while giving composite bento cards a softer 12px radius.
AVOID
- Do not saturate the background; ambient glow must remain below 8% opacity to preserve readability.
- Avoid generic 3D glossy icons; stick to precise, line-drawn SVG glyphs with 1.5px stroke weight.
- Never drop full-width solid black sections directly below this airy hero; transition gradually using soft slate borders.
- Do not omit the human element from product preview cards; hardware-only renders feel cold and unapproachable.
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 中尝试