Design a light-mode web interface screen: structured corporate clarity rendered in cobalt ink, whiteboard precision, and airy modern consulting architecture.
LAYOUT
The page adheres to a centered 1240px container starting with a clean top navigation bar (logo left, centered navigation links, utilities right). The hero section establishes a 55/45 asymmetrical split: editorial copy, checklist, dual CTAs, and avatar proof on the left; bespoke strategy illustration on the right. Directly below, anchored before the fold, sits a full-width 4-column feature banner with vertical divider rules.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Dominant background canvas across header, hero layout, and nested card components.
- #F8FAFC — Subtle Ice Surface: Background fill for floating bottom feature container and badge surfaces.
- #2563EB — Cobalt Primary: Primary brand fill for main CTA buttons, check icons, active nav markers, and key vector highlights.
- #0F172A — Midnight Ink: Primary display text, section headings, brand logotype, and illustration anchor points.
- #64748B — Slate Body: Secondary copy, paragraph descriptions, inactive navigation labels, and metadata captions.
- #E11D48 — Tactical Crimson: Accent diagram loops, strategic flow arrows, and whiteboard planning markers.
- #EFF6FF — Soft Periwinkle: Icon container backgrounds in the bottom feature grid and light badge borders.
- #E2E8F0 — Hairline Slate Border: Subtle boundary borders on docked cards, pill badges, and theme toggle buttons.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700/800. Sizes 12px caption, 13px body-sm, 15px body, 18px subheading, 24px heading, 48px display. Tracking -0.03em at display, 0 at body. Plus Jakarta Sans delivers an authoritative, modern corporate tone without feeling institutional or dated. Its geometric purity and tight aperture keep large headings punchy and executive-grade. Standardizing on Inter or General Sans preserves identical proportional metrics and visual clarity.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1240px container, comfortable density.
DEPTH
Depth is nearly flat, relying on 1px borders (#E2E8F0) to delimit containers against the pure white canvas. The bottom dock uses an ultra-diffused atmospheric shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.04), 0 8px 10px -6px rgba(15, 23, 42, 0.02). No hard drop shadows exist anywhere.
IMAGERY
The visual anchor is a flat 2D conceptual vector illustration depicting a business strategist presenting a game plan on a whiteboard alongside a giant chess piece. The palette is strictly harmonized with the UI tokens: cobalt suit jacket, navy trousers, periwinkle leaves, and tactical red marker arrows. Generic photographic stock or photorealistic renders are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The floating multi-column feature dock pinned at the base of the hero. Characterized by its 20px radius, hairline #E2E8F0 border, and pale blue icon tiles separated by fine vertical rules, it immediately grounds high-level marketing copy into discrete, actionable operational pillars. Misusing it involves overcrowding with paragraphs or turning it into disjointed individual cards.
MUST
- Reserve solid #2563EB exclusively for active interactive elements, highlights, and primary CTAs.
- Use tight negative letter-spacing (-0.03em) on headings above 32px for crisp editorial weight.
- Keep card outlines subtle with 1px solid #E2E8F0 and soft multi-layered atmospheric shadow.
- Group hero metadata into clear vertical steps: pill badge, display heading, deck, checklist, actions.
AVOID
- Do not introduce muddy drop shadows; use low-opacity ambient blur (alpha under 0.06).
- Never use dark surfaces or saturated gradient backgrounds for the primary page canvas.
- Do not omit the active indicator line under primary navigation links.
- Never replace vector line-work diagrams with photographic stock collages.
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. Try in DraPub 
