Design a dark-mode website section: hard-tech industrial minimalism where precision machine shop rigor meets celestial stippled engraving and terminal code.
LAYOUT
The page flows from an asymmetric three-part hero into an ordered multi-column footer grid. In the upper zone, the left third holds the API terminal specimen, the center contains the headline, copy, and action group, and the right half is occupied by the stippled orbital graphic. The bottom half shifts abruptly into an obsidian multi-column directory with brand anchor on the far left, four categoric link columns in the center, and a telemetry/origin stack on the far right, concluded by a hairline-divided legal sub-footer.
PALETTE (use these exact hex values)
- #0a0b10 — Obsidian Ground: Main canvas background for the entire lower footer and status infrastructure
- #ffffff — Cleanroom White: Base canvas for the hero CTA and API code specimen preview
- #12151e — Status Panel Dark: Background fill for the embedded operational system status container
- #2563eb — Cobalt Signal: Primary interactive buttons, eyebrow category text, active URLs, and location pin indicator
- #22c55e — Telemetry Green: Live system status dot, 200 OK API status code, and operational operational badges
- #0f172a — Carbon Primary: Display headlines and primary body copy on the light hero surface
- #f8fafc — Phosphor White: High-contrast headings, logo logotype, and primary values on dark surfaces
- #8b949e — Machinist Slate: Footer navigation links, API comments, supporting copy, and metadata captions
- #1e2230 — Bore Hairline: 1px horizontal rules, vertical footer dividers, and status card outlines
TYPOGRAPHY
Typeface Geist Sans (or Inter,SF Pro Display,National 2), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 32px heading, 48px display. Tracking -0.03em at display, 0.06em at micro caps. The typography balances ruthless machining precision with developer utility. Geist Sans provides an unadorned, neutral neo-grotesque foundation with crisp punctuation, tight tracking (-0.03em), and zero quirkiness. JetBrains Mono enforces engineering credibility in API examples and telemetry labels. If unavailable, use Inter for UI text and SF Mono or Fira Code for code blocks.
GEOMETRY & SPACING
Corner radii — cards 6px, links 2px, inputs 6px, buttons 6px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Depth is achieved entirely through chromatic division and hairline planar boundaries rather than cast shadows. The sharp transition from #ffffff to #0a0b10 establishes a clear split between the high-light CAD/API drafting plane and the command-center footer bedrock. Elevated panels like the System Status widget use a single 1px hairline (#1e2230) over a slightly lifted dark fill (#12151e).
IMAGERY
Visual assets rely on antique astronomical engravings translated into modern vector stipple dots, coordinate crosshairs, and razor-thin orbital paths. Shading on spheres is created via halftone dot density rather than continuous tone rendering, echoing vintage technical patents. Any photo-realistic hardware renders or consumer lifestyle imagery would instantly break the identity.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an authentic raw API payload terminal on the left flank with a delicate, stippled celestial orbital engraving on the right. This layout move immediately translates software API calls into physical matter in orbit, communicating that digital instructions directly machine physical aerospace parts.
MUST
- Anchor code and terminal outputs in authentic monospace typography with genuine JSON syntax.
- Keep borders strictly to 1px thickness in high-precision slate or dark-navy tones (#1e2230).
- Use stippling and dot-matrix halftone methods for graphical illustrations rather than smooth gradients.
- Keep button corner radii modest at 6px to preserve a disciplined, industrial machined character.
AVOID
- Do not introduce playful rounded bubble buttons or pill radii exceeding 6px on primary CTAs.
- Do not use colorful 3D renders or generic stock photography; stick to monochrome stippled technical vector graphics.
- Do not drop heavy multi-stop drop shadows; rely on hairline borders and surface contrast for elevation.
- Do not center footer navigation columns; maintain strict left-alignment across all columns.
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 中尝试 
