Design a light-mode web interface screen: an executive recruitment cockpit combining calm editorial whitespace with high-trust metric widgets and sharp electric blue accents.
LAYOUT
The viewport is anchored on the left by an ultra-narrow 68px dark navigation rail, establishing a continuous app frame. To its right, the marketing page flows vertically in a centered 1200px container: header, two-column split hero, encapsulated logo bar, and a symmetric 3-column feature card array.
PALETTE (use these exact hex values)
- #ffffff — Canvas White: Primary page background and card fill across main viewports
- #0b111e — Sidebar Obsidian: Persistent left-hand navigation rail background
- #1660eb — Electric Royal Blue: Primary action buttons, active navigation markers, and section eyebrow text
- #0f172a — Deep Slate Text: High-contrast headings, main metrics, and titles
- #596780 — Subtle Slate Text: Descriptive body copy, metadata labels, and inactive menu icons
- #eef2f6 — Border Grey: Dividers, card outlines, and horizontal rule delimiters
- #ff5c36 — Accent Coral: Warm feature card icon backdrop, trendline stroke, and inline links
- #0ea5e9 — Accent Cyan: Cost/metric feature badge fill and secondary chart line stroke
- #1e293b — Telemetry Slate: Floating dark metric chip background over hero photography
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 16px body-lg, 18px subheading, 24px heading, 32px heading-lg, 48px display. Tracking -0.03em at display, 0.08em at kicker. The voice is confident, sharp, and corporate without being sterile, driven by Plus Jakarta Sans. Its wide apertures and crisp geometric curves project contemporary digital authority, functioning effortlessly between large tight-tracked headlines and dense 12px chart captions.
GEOMETRY & SPACING
Corner radii — cards 16px, links 2px, inputs 8px, buttons 6px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is created via restrained, low-opacity drop shadows (0 12px 32px rgba(15, 23, 42, 0.06)) on white card surfaces. The highest z-index elements are the floating hero telemetry pills, which cast soft ambient diffusion across photographic imagery.
IMAGERY
Photography features real human subjects in warm, natural enterprise lighting with shallow depth of field, conveying collaboration and trust. Avoid generic 3D illustrations, heavily airbrushed models, or cold, robotic stock photos.
SIGNATURE DETAIL — the thing that makes this design itself
The interface's signature gesture is the hero media cluster: candid warm photography bound inside an oversized rounded frame, overlapped by contrasting light and dark floating metric chips that are tied together with an ultra-fine dotted orbital line and anchor nodes. This transforms passive stock photography into active, credible product telemetry.
MUST
- Always set display headings in bold weight with tight negative tracking (-0.035em).
- Keep card corner radii at 16px and button radii at 6px to maintain crisp contrast.
- Use category color pairs (icon fill, trend line, and link) consistently across cards.
- Place section eyebrows in uppercase 12px bold with 0.08em tracking in #1660eb.
AVOID
- Do not round buttons into full pills; reserve pill shapes strictly for metric badges.
- Never tint the main background grey; the canvas must remain pure #ffffff.
- Do not use dark backgrounds for feature cards; reserve dark surfaces solely for the sidebar and overlay pills.
- Avoid multi-colored gradient buttons; use pure solid #1660eb for main actions.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2496:3312. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub 
