Design a light-mode web interface screen: crisp dual-tone enterprise tooling where luminous cyan actions punctuate immaculate white analytics against midnight navigation.
LAYOUT
The page operates on an asymmetric split: a fixed 240px dark navy sidebar on the left, flanked by an expansive dual-mode workspace on the right. The top half integrates a marketing-grade hero area on the left and an isometric product scene on the right, capped by a light horizontal secondary nav. The lower half shifts seamlessly into a multi-column operational dashboard, deploying a 4-tile KPI row over three equal-width analytical cards.
PALETTE (use these exact hex values)
- #06132D — Midnight Sidebar: Full-height persistent left sidebar navigation background providing high visual grounding.
- #F7F9FC — Workspace Canvas: Main application background providing clean low-contrast breathing room for cards.
- #FFFFFF — Card Surface: Raised dashboard surfaces, KPI metric tiles, and floating action containers.
- #0E98A8 — Vibrant Cyan: Primary action buttons, active navigation markers, and headline emphasis text.
- #4F67EE — Electric Indigo: Middle funnel chart stages, secondary trend indicators, and candidate icons.
- #F59E0B — Warm Apricot: Late-stage pipeline indicators, alert badges, and review rating stars.
- #0B1A30 — Deep Navy Text: High-contrast headings, main metric values, and primary labels.
- #7B8A9E — Slate Muted: Secondary metadata, timestamps, axis labels, and supporting body copy.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Outfit, DM Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 24px heading, 36px display. Tracking -0.02em on headlines, 0 on body. The typographic tone is authoritative, highly modern, and frictionless. Plus Jakarta Sans supplies crisp geometric legibility that feels equally at home in large display marketing headlines and microscopic tabular data cells. Headlines exhibit tight negative tracking (-0.02em) to look engineered and punchy, while body and metadata retain neutral zero-tracking for instant scanning.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 32px between sections, 1360px container, comfortable density.
DEPTH
Surfaces rely on ultra-subtle, wide-diffusion drop shadows (0 4px 20px rgba(11, 26, 48, 0.04)) over the pale blue-gray workspace canvas, eschewing visible borders. Interactive buttons feature a slight bottom-weighted elevation with an ambient cyan glow on hover. The dark navigation rail creates an intentional hard split of physical depth, acting as a deep underlay behind the elevated content plane.
IMAGERY
Features clean, smooth 3D isometric vector illustrations rendered with soft ambient occlusion, pastel purple-blue surfaces, and stylized human characters. The aesthetic is futuristic yet corporate, depicting business tasks through miniature laptops, charts, and floating document envelopes. Photorealistic stock photography is strictly prohibited, with the sole exception of miniature 24px circular employee avatar cutouts.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone split headline ('Our recruiting strategy' in deep navy, 'hits your hiring plan.' in vibrant cyan) directly adjacent to a rich, glossy 3D isometric workstation illustration, bridging high-converting marketing hero with live operational dashboard.
MUST
- Anchor left-hand layout with a dense midnight-navy rail (#06132D) to contrast the pale main canvas.
- Use pure cyan (#0E98A8) sparingly on the main canvas for primary interactions and the second headline line.
- Enclose metric icons inside low-saturation tinted circular backplates matching their data category color.
- Keep card backgrounds crisp pure white (#FFFFFF) against the subtle off-white (#F7F9FC) background canvas.
AVOID
- Do not turn the main canvas dark; the dark theme is strictly reserved for the sidebar rail.
- Avoid high-contrast dark borders around white cards; rely on elevation shadows and background contrast.
- Do not use saturated cyan for large background fills—reserve it for interactive triggers and focus points.
- Avoid sharp 0px corners which disrupt the smooth, soft SaaS aesthetic.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3520:2336. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
