Design a light-mode website section: monumental dark infrastructure grounding an airy, high-precision algorithmic recruitment workspace.
LAYOUT
The top half is a centered, symmetrical hero CTA with an eyebrow badge, two-line 56px headline, descriptive paragraph, and dual button row. Flanking this core are two floating, asymmetric telemetry cards tied to the background with dotted vertical connector lines. At the midpoint, the page abruptly cuts to a full-width obsidian footer containing a left-hand brand stack, a vertical rule, four navigation columns, and a right-hand newsletter block, finished by a baseline legal row.
PALETTE (use these exact hex values)
- #f8fbff — Canvas Ice: Luminescent light background wash for hero CTA section
- #070c18 — Obsidian Deep: Primary surface for the comprehensive footer section
- #ffffff — Card Surface: Elevated background for floating telemetry and code preview cards
- #0d1424 — Input Charcoal: Recessed background for email newsletter capture in footer
- #1d58f6 — Prism Blue: Primary action buttons, active headline text, and brand accents
- #070b14 — Ink Text: Primary display and headline typography on light canvas
- #f8fafc — Frost Text: Logo text, headers, and active links within the dark footer
- #64748b — Muted Slate: Body copy, metadata, and column headers in navigation
- #10b981 — Telemetry Emerald: System status indicators, match percentages, and pill accents
- #162032 — Hairline Rule Dark: Dividers, column separators, and input borders within footer
TYPOGRAPHY
Typeface Inter Display (or Geist,Plus Jakarta Sans,system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 36px heading, 56px display. Tracking -0.03em at display, 0 at body. The typographic tone is uncompromisingly rational, technical, and executive. A grotesque display sans (matched to Inter Display) delivers density and punch with tight negative letter-spacing (-0.035em) on display headings. This is countered by a pragmatic monospace in code snippets that grounds the product in real engineering infrastructure.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 24px gaps, 100px between sections, 1280px container, comfortable density.
DEPTH
Depth is produced through subtle layered occlusion rather than heavy drop shadows. Floating API and telemetry cards sit on elevation level 1 using crisp white surfaces, delicate 1px borders (#edf2f7), and an ambient 24px blur shadow with less than 6% opacity. The footer relies on total absence of elevation, establishing depth through planar contrast against the light canvas above.
IMAGERY
No photographic imagery is present; the visual language relies entirely on algorithmic artifacts and developer telemetry. Floating UI fragments display JSON payloads, candidate match scores, and system state pills. Anything resembling stock photography, 3D clay illustrations, or organic hand-drawn shapes would violate the systematic precision.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone split headline where the second statement switches entirely to electric royal blue ('Scale with confidence.'), mirrored by the oversized lowercase brand wordmark split across white and blue in the pitch-dark footer.
MUST
- Anchor the page with an abrupt transition to a pitch-black footer canvas (#070c18).
- Color only the second sentence of the display headline in bright brand blue (#1d58f6).
- Keep floating mockups strictly code- and telemetry-driven; avoid lifestyle imagery.
- Use 1px crosshair alignment marks and dotted lines for technical scaffolding.
AVOID
- Do not round card corners beyond 14px; keep edges sharp and architectural.
- Do not use saturated background colors behind the CTA hero; preserve the ice-white glow.
- Do not capitalize the primary brand wordmark; it must remain strictly lowercase.
- Do not introduce multi-colored syntax highlighting; maintain muted monochrome code styling.
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. 在 DraPub 中尝试 
