Design a light-mode website section: technical engineering clarity anchored by ghosted isometric wireframes and calm corporate cobalt accents.
LAYOUT
Centered hero layout with a high-impact typographic block sitting above a dual-button row, positioned equidistant between flanking blueprint graphics. Below the CTA, the page transitions into an expansive, structured footer sheet featuring five logical multi-column stacks and an auxiliary utility block.
PALETTE (use these exact hex values)
- #f8fafd — Canvas Ice: Global background tone sustaining technical blueprint watermark illustrations.
- #ffffff — Panel White: Background for elevated footer sheet, input fields, and secondary buttons.
- #1d64ec — Cobalt Blue: Primary CTA button background, keyword accent, and active hover state anchor.
- #0c1322 — Deep Ink: Primary heading typography, brand wordmark, and strong labels.
- #64748b — Muted Slate: Body copy, navigation links, and supporting descriptive text.
- #e2e8f0 — Border Subtle: Hairline borders on badges, inputs, cards, and icon buttons.
- #e6f8f0 — Mint Tint: Background for security trust badges and 'We're hiring' pill tags.
- #147d52 — Pine Green: Text and icon tint for compliance security metrics and hiring labels.
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Text, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 56px display. Tracking -0.025em for display, 0 for body. The typographic tone is ultra-precise, technical, and authoritative. Using a neutral neo-grotesque like Inter provides engineering legibility without distraction, relying on optical kerning and weight contrast to create hierarchy.
GEOMETRY & SPACING
Corner radii — cards 32px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Elevation is handled primarily through surface color segmentation rather than distinct drop shadows. The white footer panel visually floats off the pale ice-blue page backdrop via a crisp 1px light border (#e2e8f0) and clean shape demarcation.
IMAGERY
Watermarked mechanical CAD line-drawings and isometric coordinate axes (X, Y, Z) float in faint blue-gray (#cbd5e1) wireframe styling. Photographic imagery or photorealistic 3D renders would clutter the clinical, blueprint-inspired aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The large-radius (32px) white footer tray nesting into a soft cool-tinted canvas, paired with faint isometric blueprint wireframes floating in the hero margins.
MUST
- Retain the curved 32px top corners on the white footer container against the pale blue canvas.
- Render technical schematics with thin, low-opacity (#cbd5e1) vector lines in background corners.
- Highlight critical action words in display titles using brand cobalt (#1d64ec).
- Keep directory column headers set to bold 14px with generous 12px vertical gaps between links.
AVOID
- Never use dark background fills for the primary canvas or footer sheet.
- Do not drop heavy multi-layered drop shadows under buttons or footer containers.
- Avoid high-contrast, fully opaque CAD illustrations that fight with foreground headline copy.
- Never reduce the footer's top corner radii to sharp 0px corners.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub 
