Design a light-mode web interface screen: editorial technical precision softened by warm vector storytelling and airy structural framing.
LAYOUT
The composition follows a balanced split-hero arrangement inside a rounded 1280px container. The left 50% accommodates the eyebrow pill, oversized two-line headline, narrative paragraph, and inline CTA/social proof stack. The right 50% is occupied by the tall vertical illustration anchored on a faint horizon line. The entire section is pinned at the bottom by an elevated horizontal feature bar spanning all four columns evenly.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas Ground: primary inner viewport ground hosting hero copy and vector illustration
- #ECEFF5 — App Outer Frame: subtle outer background encasing the primary rounded workspace card
- #FFFFFF — Dock Elevation: floating bottom container surface for the four-column value propositions
- #2563EB — Cobalt Primary: primary action button fill, active navigation indicator line, and brand logo mark
- #0F172A — Ink Navy: display headlines, card titles, navigation labels, and high-emphasis vector hair
- #64748B — Slate Neutral: supporting hero copy, microcopy, social proof descriptions, and feature subtitles
- #E06A3B — Precision Orange: pill badge dot indicator, character shirt, and ambient warm corner highlight
- #EEF4FF — Pale Periwinkle: icon badge backdrop circle and fluid ambient background wave
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Satoshi, DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 16px body, 17px subheading, 24px heading, 60px display. Tracking -0.03em at display, 0em at body. The typography is clean, crisp, and architectural, using a modern neo-grotesque sans-serif with geometric roundness (Plus Jakarta Sans). It conveys technical rigor through tight headline tracking while retaining approachability through generous body line-height (1.6). When substituting, choose fonts with wide apertures and circular bowl geometry like Inter or Satoshi rather than condensed humanist types.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 12px, buttons 999px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is handled through structural layering rather than dramatic elevation. The main workspace sits inside an outer framing card with zero blur, while the lower four-column dock lifts gently off the white plane via an ultra-soft shadow: box-shadow: 0 12px 32px rgba(15, 23, 42, 0.04). Flat vector shapes remain co-planar with the canvas.
IMAGERY
Vector-based editorial illustration blending figurative human characters with oversized mechanical or optical instruments (such as vernier calipers and geometric eyes). The art combines navy silhouettes (#0F172A), cobalt botanicals, and warm peach highlights with delicate line-art accents like crosshairs and dot grids. Photorealistic imagery is strictly forbidden except inside tiny circular avatar cutouts.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an oversized technical measurement instrument (vernier caliper) rendered in flat editorial vector art right alongside a structured four-column floating bottom dock. It visually anchors the software's thesis of 'precision by design'. Misusing this pattern occurs when illustration elements crowd the text baseline or when the dock is styled with heavy borders instead of pure shadow elevation.
MUST
- Retain generous negative space around the hero headline, avoiding clutter above the bottom dock.
- Use pill silhouettes (border-radius 999px) for buttons, badges, and menu triggers.
- Restrict the primary cobalt blue (#2563EB) strictly to active states, key CTAs, and logo accents.
- Keep icon backdrops inside the dock soft and desaturated to let typography lead.
AVOID
- Do not add dark mode toggles or saturate the background canvas with dark fills.
- Avoid harsh high-contrast drop shadows; use low-opacity ambient diffusion (under 6% opacity).
- Do not use sharp 0px or small 4px corners on cards and buttons.
- Never replace the custom vector narrative art with stock corporate photography.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3456:2384. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
