Design a light-mode web interface screen: deep navy command deck meeting an airy white architectural workspace.
LAYOUT
The screen uses an asymmetrical macro layout: a narrow fixed vertical navigation bar on the far left, followed by a stacked two-tier main canvas. The top half is dominated by an expansive navy hero block anchored next to a white corporate statement column. The lower half features a balanced split-screen layout with a 6-card numbered workflow matrix on the left and a capability list with client reviews on the right.
PALETTE (use these exact hex values)
- #f8fafc — Canvas White: Overall page background and secondary surface container
- #0b1437 — Command Navy: Primary hero block background creating high-contrast executive presentation
- #2563eb — Electric Blue: Key primary CTAs, active toggles, and emphasis text highlights
- #ffffff — Surface White: Card surfaces, dock navigation background, and feedback blocks
- #0f172a — Dark Charcoal: Primary body headers, card titles, and high-emphasis typography
- #64748b — Muted Slate: Secondary copy, metadata, descriptive paragraphs, and inactive icons
- #e2e8f0 — Border Grey: Hairline card borders, divider lines, and segmented control containers
- #fee2e2 — Warm Coral Tint: Process step 01 icon backdrop and subtle categorized badge highlights
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 22px heading, 28px heading-lg, 38px display. Tracking -0.02em at display, 0.05em at caps. Precise, corporate, and relentlessly modern. The typography communicates high-velocity engineering rigor through tight display tracking, crisp x-heights, and strong contrast between ultra-bold titles and slate-gray supporting copy. Inter or Plus Jakarta Sans perfectly fits this systematic, developer-first aesthetic.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1440px container, comfortable density.
DEPTH
Depth is created strictly through surface contrast rather than physical drop shadows. The top hero acts as a massive dark volumetric platform hovering above the canvas. Secondary depth comes from subtle translucent glassmorphic layering inside dashboard mockups, keeping the overall interface crisp, flat, and engineered.
IMAGERY
Imagery is purely vector UI, product telemetry mockups, and micro-isometric diagrams floating in the hero. Real-world imagery is restricted to small circular user avatars (32px) in client feedback modules. Never use generic corporate stock photography or raw landscape cutouts.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetrical navy-to-white horizon shift framed by a persistent left icon dock. This immediately distinguishes it from conventional SaaS marketing pages by blending a web app console with an agency capability deck. Misusing it by turning the entire background dark or eliminating the left rail destroys the identity.
MUST
- Retain the curved lower-right corner (approx 24px) on the dark hero block.
- Pair deep navy (#0b1437) hero components directly with airy white (#f8fafc) card grids below.
- Use 11px uppercase tracked letterforms (+0.08em) for pre-headers and system badges.
- Style primary CTA buttons in solid vibrant blue (#2563eb) with pure white text and 8px radii.
AVOID
- Do not bleed the dark navy across the full page; bottom panels must remain light.
- Do not apply dark, aggressive drop shadows to cards; use flat 1px grey borders.
- Do not use sharp 0px corners; maintain rounded geometries (8px to 16px) throughout.
- Do not enlarge body copy beyond 15px in grid cards; density must remain crisp.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3312:2480. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
