Design a light-mode web interface screen: deep navy console anchoring an airy, cobalt-punctuated enterprise marketing canvas.
LAYOUT
The interface is structured around a persistent 240px dark navigation rail on the left, running full viewport height. The main canvas initiates with an utility header row, followed by a dynamic split hero (left: headline and dual CTAs; right: overlapping photography and data overlays). Beneath the hero, content cascades logically through a 4-column service grid, a 3x2 feature matrix, a split narrative proof block, a full-width blue CTA card, and finishes with a 3-tier pricing matrix.
PALETTE (use these exact hex values)
- #071324 — Console Navy: structural backdrop for the persistent left navigation sidebar and dark mode widgets
- #FFFFFF — Canvas White: primary light background for page body, cards, and floating statistic overlays
- #F8FAFC — Mist Slate: light alternating section fills and muted badge backgrounds
- #0066FF — Cobalt Primary: dominant call-to-action buttons, active navigation states, and banner backgrounds
- #0B192C — Charcoal Title: high-contrast display headlines, section titles, and numerical metrics
- #64748B — Muted Slate: paragraph copy, meta descriptions, pricing labels, and inactive navigation links
- #10B981 — Success Emerald: positive percentage metrics, sparkline graphs, and confirmation checkmarks
- #E2E8F0 — Border Subtle: hairline outlines on pricing tiers, input fields, and inactive buttons
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, DM Sans), weights 400/500/600/700/800. Sizes 12px caption, 14px body-sm, 16px body, 18px body-lg, 20px subheading, 28px heading, 36px heading-lg, 52px display. Tracking -0.03em at display, 0 at body. The typographic tone is authoritative, clean, and modernly corporate. Plus Jakarta Sans delivers sharp geometric apexes and open counters that ensure crisp legibility at small sizes while projecting technical capability at scale. When substituting, Inter or General Sans provide the closest structural alignment without compromising the tech-forward polish.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is handled through two distinct systems: an architectural split between the zero-elevation dark sidebar and the white canvas, followed by soft diffused drop shadows on floating cards (0 12px 30px -4px rgba(7, 19, 36, 0.08)). Surface elevations avoid heavy strokes or dark drop shadows, favoring light 1px border borders (#E2E8F0) to delineate cards at base level.
IMAGERY
Photography consists of bright, crisp, high-key studio cutouts of energetic corporate collaborators alongside natural office photography showing modern creative teams around laptops. Visuals emphasize candid teamwork, natural lighting, and authentic expressions; avoid generic stock handshakes or abstract 3D geometric shapes.
MUST
- Keep the left console strictly dark (#071324) to create architectural depth against the white canvas.
- Use solid cobalt (#0066FF) strictly for key actions, link hover states, and primary focal points.
- Pair cut-out human photography with overlapping, floating metric cards for dynamic visual layering.
- Enforce 14px to 16px corner radiuses across standard cards, keeping aesthetic soft and approachable.
AVOID
- Do not apply the dark console color as a full-page background to content sections.
- Do not use sharp 0px border radiuses anywhere; the interface relies on unified rounded corners.
- Do not crowd hero typography against the cut-out image; preserve a balanced two-column split.
- Do not style secondary pricing cards with filled blue buttons; reserve fills for recommended tiers.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2336:3520. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
